Share data-binding
Introducing the HtmlJs framework
Hi everyone, after 2 years of research, I wrote a JavaScript framework. Today I would like to share my hope to bring benefits to JS Vietnam community. My framework is called HtmlJs. Homepage link , Github
Why need another framework?
First I want to emphasize that I don't want to criticize other frameworks, I just want to raise the current issue. Maybe you like or dislike but will have to acknowledge those issues.
Previously, my web code using data-binding was very convenient in many things; even admire this programming model. However, the framework currently does not satisfy some requirements such as performance on mobile, difficult debugging, integration with other frameworks is also difficult, the code process has some unbearable trick.
Angular:
Angular developers all know that working with setTimeout / setInterval is quite exhausting. This is a post of a dev who has 2 years of working with AngularJs, reading the article at Medium . The main point of this article is that Angular generates too much complexity, produces many problems and it also spawns many ways to solve its problems. That makes programming with Angular a hacking art, hackers like it, but working with an enterprise application is deadly dead.
Team Angular knows all of these problems and the team has decided to always have Angular 1 death, in fact Angular 2 is completely different from Angular 1.
ReactJs
ReactJs provide the web with a completely beautiful code, away from MVVM, React provides two extremely important features, namely performance + web component. However, ReactJs seem to hate MVVM model, Team React calls MVVM an anti-pattern because the complexity of binding mechanism slows down the app, which is difficult to maintain. However, I really like MVVM, in my framework, I have eliminated the complexity of data binding mechanism. I have done some illustrative examples to help you understand how HtmlJs work compared to ReactJs. Basically, a class of React can convert completely into a custom element of HtmlJs.
Examples:
- Timer HtmlJs – Reactjs
- Menu HtmlJs – Reactjs
- Real time search HtmlJs – ReactJs
- Service chooser HtmlJs – React
In the first example: Reactjs code is about 20 lines, HtmlJs is also shorter than that, it doesn't matter, but starting with more complex examples, HtmlJs is much shorter than the big ReactJs.
Code to generate menu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | html.menu = function (tree) { var selected = html.data (tree [0]); html.ul.each (tree, function (node, index) {; // generate UL tag // generate A tag với văn bản 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'); // thêm được phép vào danh sách danh sách mục $ (this) .addClass ('focused'); selected ($ (this) .text ()); } }; |
The code above just code completely with Js, don't compile.
If you like, it can be slightly modified to generate multiple menu levels, because recursive is extremely simple with HtmlJs, unlike AngularJs, recursive binding is a pretty difficult job.
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | html.menu = function (tree) { var selected = html.data (tree [0]); html.ul.each (tree, function (node, index) {; // generate UL tag // generate A tag với văn bản 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'); // thêm được phép vào danh sách danh sách mục $ (this) .addClass ('focused'); selected ($ (this) .text ()); } }; |
You can see the multi-level menu is simply adding an if command line (node.children) html.menu (node.children); more.
There are many examples I want to write so you can easily understand and compare HtmlJs with other frameworks.
However today I code 3 for example only, the next day the code continues.
Summary of the reasons for using HtmlJs
- Providing component Web is explicitly easy to code / reuse code
- The JavaScript should be high-speed debugging easily, just put break points into code, no build, no special technique for code.
- MVVM model, the code will be much shorter than ReactJs (the change of performance is not equal, if MVVM is removed, it is equal)
- Reactive (will have the following explanation)
- Production ready : HtmlJs have been applied to an enterprise application, so you can be assured of its stability. Every day I'm free to write an article about enterprise architect with HtmlJs
Share Nhan Nguyen