grokking techtalk #16: html js and three way binding
TRANSCRIPT
HTMLJSOPTIMIZE EFFORT OF BUILDING LARGE SCALE WEB APPLICATION
AGENDA
1. WHY HTMLJS2. ARCHITECTURE3. DEMO4. THREE-WAY BINDING5. Q&A
Fun project2014 Release 1.0.32015 Core-ehos2016
HTMLJS THE STORY
HTMLJS?WHY
PROBLEMComplicated
• Setup• Life cycle
Pure View DSL
• Weird syntax• No debugger• No OOP
Slow• Performance• Productivity
TEMPLATE
PRINCIPLES OF DESIGNARCHITECTURE
COOL API
PRINCIPLES OF DESIGNARCHITECTURE
OOP 1. Encapsulation2. Inheritance3. 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,...
PRINCIPLES OF DESIGNARCHITECTURE
OOP
Autocomplete and tree auto complete share many features but renderingTree aucomplete should only override "render" prototype
PRINCIPLES OF DESIGNOOP
PRINCIPLES OF DESIGNARCHITECTURE
Rendering 10.000 rows x 2 columns - lower is better
PERFORMANCE
CORE-EHOS ARCHITECTURE
THREE-WAY BINDINGTHE EVOLUTION
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
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
HOW DOES IT WORK?THREE-WAY BINDING
Can be generated from server side
Data from server
HOW DOES IT WORK?THREE-WAY BINDING
No more DOM manipulation after ajax
FullName displayed
HOW DOES IT WORK?THREE-WAY BINDING
No more DOM manipulation after ajax
FullName displayed
BEFORE
Many things to trade off
Easy to break things
Handwritten for all
HTML/JS/CSS
THREE-WAY BINDING
Better application performance
Better development performance
Easy to maintain customize and extend
AFTERTHREE-WAY BINDING
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
SUMMARYHTMLJS
1. 9 times faster than ReactJs, 5 times faster than Angular 22. Three-way binding is data binding from client to server side3. OOP can save our lives