Share framework data-binding mình tự viết.

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 ích cho cộng đồng JS Việt Nam. Framework của mình tên là HtmlJs. Link trang chủ, Github

Tại sao lại cần 1 framework khác?

Đầu tiên mình muốn nhấn mạnh là mình không muốn chỉ trích chê bai các framework khác, mình chỉ muốn nêu lên vấn đề hiện tại mà thôi. Có thể các bạn thích hoặc không thích nhưng sẽ phải công nhận các vấn đề đó.

Trước giờ mình code web dùng data-binding thấy rất tiện lợi trong nhiều việc; thậm chí là hâm mộ mô hình lập trình này luôn. Tuy nhiên các framework hiện giờ vẫn chưa thỏa mãn một số yêu cầu chẳng hạn như performance trên mobile, debug khó khăn, integrate với các framework khác cũng khó khăn, quá trình code thì có mấy cái trick không thể chịu đựng được.

Angular:
Angular developer đều biết làm việc với setTimeout/setInterval khá là mệt mỏi. Đây là một bài chia sẻ của một dev có 2 năm làm việc với AngularJs, đọc bài tại Medium. Đại ý của bài viết này nói là Angular sinh ra sự phức tạp quá mức cần thiết, sinh ra nhiều vấn đề và nó cũng sinh ra nhiều cách hack để giải quyết vấn đề của nó. Điều đó làm cho lập trình với Angular là cả một nghệ thuật hack, các hacker thì thích nhưng mà làm việc với enterprise application là chết yểu liền.

Team Angular biết tất cả các vấn đề trên và team đã quyết định khai tử Angular 1 luôn, thật sự thì Angular 2 hoàn toàn khác biệt với Angular 1.

ReactJs
ReactJs cung cấp cho web một cách code hoàn toàn đẹp đẽ, tránh xa MVVM luôn, React lại cung cấp 2 feature vô cùng quan trọng đó là performance + web component. Tuy nhiên ReactJs lại tỏ ra ghét mô hình MVVM, team React gọi MVVM là anti-pattern vì sự phức tạp của cơ chế binding làm chậm app, khó maintain. Tuy nhiên mình rất thích MVVM, trong framework của mình thì mình đã loại bỏ sự phức tạp của cơ chế binding dữ liệu. Mình đã làm một số ví dụ minh họa để các bạn hiểu về cách làm việc của HtmlJs so với ReactJs. Về cơ bản thì 1 class của React có thể convert hoàn toàn thành 1 custom element của HtmlJs.

Các ví dụ:

1. Timer
   • HtmlJs:
   • Reactjs
2. Menu
   • HtmlJs:
   • Reactjs:
3. Real time search
   • HtmlJs:
   • ReactJs:
4. Service chooser
   • HtmlJs:
   • React:

Ở ví dụ thứ nhất: code Reactjs khoảng 20 dòng, HtmlJs cũng tầm đó ngắn hơn tí xíu không quan trọng, nhưng bắt đầu với các ví dụ phức tạp hơn thì HtmlJs tỏ ra ngắn hơn hẳn so với anh bạn to con ReactJs.

Code để generate menu

html.menu = function (tree) {
    var selected = html.data(tree[0]);
    html.ul.each(tree, function (node, index) {; // generate UL tag
      // generate A tag with text
      html.li.click(menuItemClick).text(node);
      if (node === selected()) html.className('focused');
    });
    html.p.span.text('Selected: ').$
      .span.text(selected).$p;

    function menuItemClick (e) {
      // remove all the focused class in all LI
      $(this).parent().find('li').removeClass('focused');
      // add  focused into current list item
      $(this).addClass('focused');
      selected($(this).text());
    }
};

Đoạn code trên chỉ code hoàn toàn bằng Js, không compile.
Nếu thích thì có thể sửa lại một tí để có thể generate menu nhiều cấp, bởi việc recursive là vô cùng đơn giản với HtmlJs, không giống AngularJs, recursive binding là công việc khá khó khăn.

Code

html.menu = function (tree) {
    var selected = html.data(tree[0]);
    html.ul.each(tree, function (node, index) {; // generate UL tag
      // generate A tag with text
      html.li.click(menuItemClick).text(node.text);
      if (node === selected()) html.className('focused');
      if (node.children) html.menu(node.children);
    });
    html.p.span.text('Selected: ').$
      .span.text(selected).$p;

    function menuItemClick (e) {
      // remove all the focused class in all LI
      $(this).parent().find('li').removeClass('focused');
      // add  focused into current list item
      $(this).addClass('focused');
      selected($(this).text());
    }
};

Các bạn có thể thấy menu nhiều cấp chỉ đơn giản là thêm 1 dòng lệnh if (node.children) html.menu(node.children); nữa mà thôi.

Còn nhiều ví dụ mình muốn viết để các bạn có thể hiểu rõ và dễ dàng so sánh HtmlJs với các framework khác.
Tuy nhiên hôm nay mình code 3 ví dụ thôi, hôm sau code tiếp.

1. Cung cấp Web component một cách tường minh dễ code/tái sử dụng code
2. Thuần JavaScript nên tốc độ cao debug dễ dàng, chỉ cần đặt break point vào code, không cần build, không cần kỹ thuật đặc biệt để code.
3. Mô hình MVVM nên code sẽ ngắn hơn rất nhiều so với ReactJs (đổi lại performance không bằng, nếu bỏ MVVM thì ngang nhau)
4. Reactive (sẽ có bài giải thích sau)
5. Production ready: HtmlJs đã là được ứng dụng trong 1 enterprise application nên các bạn yên tâm về độ ổn định của nó. Hôm nào rảnh mình sẽ viết một bài về enterprise architect bằng HtmlJs ^^