Three-ways bindind: the good part

What is HtmlJs?

It is a library/framework that implements MVVM pattern aka two-ways binding in JavaScript. Please refer to my article about HtmlJs

What is three-ways binding?

A software architectural pattern, an upgrade version of MVVM.
With this pattern, data in client-side will be always synchronize with the UI and also the server-side Model. Every business logic should be done in server-side.

What does it solve?

1. Mixed messy code between client and server
   • Reduce UI/UX bugs
   • Share business code among many projects
2. Development performance
   • Reduce the complexity of data-binding and its steep learning curve
   • Focus on data flow and business rules, simplying developement
   • Forget about low level API of HTML and DOM in developement, just care about business. Of course, we have to build standard controls using HtmlJs, but only once.
3. UX performance
   • Single page application with ajax
   • Super fast rendering. We can forget about loading icon (lol).

What is it used for?

• Best suits for application that is data oriented, complex business flow. E.g enterprise app like ERP, CRM, accouting,....
• Startup projects that want to go fast wuthout breaking things

What isn't it used for?

• Small app without maintainance requirement or not critical development time plus UI/UX. E.g small e-commerce
• Not a data-oriented but UI oriented; e.g image editor, game,...

Is it production ready?

Yes, it is used in a health care application with heavy backend business logic, and very lightweight client-side code. The client-side only contains code to get data from server and display it, nothing more. This approach ensure everything in client-side is always fast, easy to customize, easy to integrate with other client-side technologies. In our project, we share the same business code between web version and window version.

Here are some numbers:

• 90KB gzip javascript code
• Request/response size: 1KB-10KB, usually lower than 2KB, 10KB is for rendering HTML at the first time
• Request/response time: 2ms - 500ms, usually lower than 10ms, 500ms is also for rendering HTML

Those numbers result in very good user experience, and could be better than window version.

Design principles

• MVVM and reactive design pattern in client side
• Render HTML once, using javascript to render data
• Use JSON for communication between the server and client; only send data that is changed
• Keep every business logic in the server and view logic in the client
• Component in client-side plus OOP in server side, these concepts allows us to think out of the low level DOM API. We think of Report, Menu, Dropdown, ListView, GroupListView, Webcam Image Capture controls,....

DEMO

Demo 1 - Shopping cart

1. Traditional MVVM shopping cart
2. Move the binding and the Model to server-side

Demo 2 - performance

1. Request/response time and size
2. Rendering time with ListView control
3. Render 100.000 rows rendering with virtual mode tenique

Demo 3 - Component stack

1. Input component
2. Checkbox component
3. Image button component
4. ListView with input and checkbox and image button
5. Real world ListView inline edit

References for HtmlJs:

• Home page
• API

Nhan Nguyen 12-07-2016