Three-ways bindind: the good part

Nhan Nguyen viết ngày 16/07/2016

Introduction to three-ways binding with HtmlJs

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 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:

Nhan Nguyen 12-07-2016

Bình luận

{{ }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa


Nhan Nguyen

5 bài viết.
27 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
39 25
Giới thiệu về framework HtmlJs Chào các bạn, sau 2 năm nghiên cứu, mình đã viết 1 framework JavaScript. Hôm nay mình xin chia sẻ mong đem lại lợi ...
Nhan Nguyen viết 5 năm trước
39 25
8 10
Cái nào nhanh hơn vậy các bạn? Đi phỏng vấn thấy một câu hỏi vui vui là hai API này cái nào query nhanh hơn. Mình nói là document.getElementById, ...
Nhan Nguyen viết 4 năm trước
8 10
5 0
Build your own rendering engine We’re not going to reinvent the wheel. We’re going to do simple things that help you have deep understanding of ho...
Nhan Nguyen viết hơn 4 năm trước
5 0
Bài viết liên quan
4 1
Architecture Pattern Là một tập hợp các quy tắc để giải thích chúng ta có những class nào? chúng sẽ tương tác với nhau ra sao để thực hiện một hệ ...
bqthanh viết hơn 2 năm trước
4 1
5 0
Build your own rendering engine We’re not going to reinvent the wheel. We’re going to do simple things that help you have deep understanding of ho...
Nhan Nguyen viết hơn 4 năm trước
5 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
27 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!