Bạn có chắc chắn muốn xóa bài viết này không ?
Three-ways bindind: the good part
Introduction to three-ways binding with HtmlJs
What is 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?
Mixed messy code between client and server
- Reduce UI/UX bugs
- Share business code among many projects
- 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.
- 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:
- 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.
- MVVM and reactive design pattern in client side
- 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 1 - Shopping cart
- Traditional MVVM shopping cart
- Move the binding and the Model to server-side
Demo 2 - performance
- Request/response time and size
- Rendering time with ListView control
- Render 100.000 rows rendering with virtual mode tenique
Demo 3 - Component stack
- Input component
- Checkbox component
- Image button component
- ListView with input and checkbox and image button
- Real world ListView inline edit
References for HtmlJs:
Nhan Nguyen 12-07-2016