Grokking TechTalk #16: Html js and three way binding
- 1. HTMLJS OPTIMIZE EFFORT OF BUILDING LARGE SCALE WEB APPLICATION
- 2. AGENDA 1. WHY HTMLJS 2. ARCHITECTURE 3. DEMO 4. THREE-WAY BINDING 5. Q&A
- 4. HTMLJS?WHY PROBLEM Complicated • Setup • Life cycle Pure View DSL • Weird syntax • No debugger • No OOP Slow • Performance • Productivity TEMPLATE
- 6. PRINCIPLES OF DESIGNARCHITECTURE OOP 1. Encapsulation 2. Inheritance 3. Polymorphism Real world problem 1. You have autocomplete that display search result in flat list items. You want to have another one displaying search result in tree 2. You have a normal table. You have to create another component that display row group, column group 3. You want to override some feature of a component, e.g localize text, searching algorithm,...
- 7. PRINCIPLES OF DESIGNARCHITECTURE OOP Autocomplete and tree auto complete share many features but rendering Tree aucomplete should only override "render" prototype
- 9. PRINCIPLES OF DESIGNARCHITECTURE Rendering 10.000 rows x 2 columns - lower is better PERFORMANCE
- 10. CORE-EHOS ARCHITECTURE THREE-WAY BINDING THE EVOLUTION
- 11. THREE-WAY BINDING Every business code should be put in ViewModel Focus on business logic than DOM/CSS … Less code, fewer bugs Easy to write unit tests as ViewModel only work with data flow
- 12. HOW DOES IT WORK?THREE-WAY BINDING • The main purpose is to left developer work only with data in server side • Every single changes will be sent to client and updated to View automatically Only data manipulation
- 13. HOW DOES IT WORK?THREE-WAY BINDING Can be generated from server side Data from server
- 14. HOW DOES IT WORK?THREE-WAY BINDING No more DOM manipulation after ajax FullName displayed
- 15. HOW DOES IT WORK?THREE-WAY BINDING No more DOM manipulation after ajax FullName displayed
- 16. BEFORE Many things to trade off Easy to break things Handwritten for all HTML/JS/CSS THREE-WAY BINDING
- 17. Better application performance Better development performance Easy to maintain customize and extend AFTERTHREE-WAY BINDING
- 18. 5ms – 15ms per request/response without database access 1KB – 10KB per response Average time to develop a new screen: 1 - 2 weeks/dev Derived screens: 30 Derived controls: 10 OOP has saved our lives SOME NUMBERSTHREE-WAY BINDING
- 22. SUMMARYHTMLJS 1. 9 times faster than ReactJs, 5 times faster than Angular 2 2. Three-way binding is data binding from client to server side 3. OOP can save our lives
Editor's Notes
- 3 three years develop Htmljs. Began from a fun project that I want to know how KnockoutJs works. I dev the fw fỏ a year and release 1.0.3 HtmlJs is applied into core-ehos project, an enterprise level project. It is used for the whole project to design even a new architecture called three-way binding. The architecture helps us separate Web GUI from business logic, all we need to do is develop components for GUI. Now we even don’t need front end dev in our project. It is the first Javascript fw of Viet Nam that fully supports OOP, component and MVVM. It is also the fastest MVVM in the world. I'll show the evidence later
- - Fluent API - HTML like
- Everything is OOP(Ajax, Pormise, Obsevable)
- Everything is OOP(Ajax, Pormise, Obsevable)
- Show evedences HtmlJs: https://jsfiddle.net/5hwp2q7o/ ReactJs https://jsfiddle.net/w0m945hs/ AngularJs https://jsfiddle.net/xkkoxnwm/1/