Speaker: Nhan Nguyen - Software Architect @ FPT IS Bio: Author of HtmlJs Be fluent in C# and JavaScript. Software architect at FPT IS Description: Kiến trúc của HtmlJs Cách thiết kế web app với HtmlJs Demo (code 1 số app đơn giản + performance demo) Mô hình lập trình three-way binding (điểm mới so với buổi trước)

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

3. Fun
project2014 Release
1.0.32015 Core-
ehos2016
HTMLJS THE STORY

4. HTMLJS?WHY
PROBLEM
Complicated
• Setup
• Life cycle
Pure View
DSL
• Weird syntax
• No debugger
• No OOP
Slow
• Performance
• Productivity
TEMPLATE

5. PRINCIPLES OF DESIGNARCHITECTURE
COOL API

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

8. PRINCIPLES OF DESIGNOOP

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