Three-ways bindind: the good part
Javascript
200
MVVM
3
White

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

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


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nhan Nguyen

5 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
38 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 gần 2 năm trước
38 25
White
7 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 12 tháng trước
7 10
White
4 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 1 năm trước
4 0
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
26 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á!