Share framework data-binding mình tự viết.
Javascript
200
AngularJS
23
reactjs
21
White

Nhan Nguyen viết ngày 03/06/2016

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 í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.

Tóm lại các lý do nên dùng HtmlJs

  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 ^^
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
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
White
2 0
Hôm nay mình sẽ giới thiệu kiến trúc thiết kế web theo OOP, kiến trúc này mình đang dùng trong dự án ở trong công ty. Với kiến trúc này, bạn có thể...
Nhan Nguyen viết hơn 1 năm trước
2 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á!