Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTMLJS
OPTIMIZE EFFORT OF BUILDING LARGE SCALE WEB APPLICATION
AGENDA
1. WHY HTMLJS
2. ARCHITECTURE
3. DEMO
4. THREE-WAY BINDING
5. Q&A
Fun
project2014 Release
1.0.32015 Core-
ehos2016
HTMLJS THE STORY
HTMLJS?WHY
PROBLEM
Complicated
• Setup
• Life cycle
Pure View
DSL
• Weird syntax
• No debugger
• No OOP
Slow
• Performance...
PRINCIPLES OF DESIGNARCHITECTURE
COOL API
PRINCIPLES OF DESIGNARCHITECTURE
OOP 1. Encapsulation
2. Inheritance
3. Polymorphism
Real world problem
1. You have autoco...
PRINCIPLES OF DESIGNARCHITECTURE
OOP
Autocomplete and tree auto complete share many features but rendering
Tree aucomplete...
PRINCIPLES OF DESIGNOOP
PRINCIPLES OF DESIGNARCHITECTURE
Rendering 10.000 rows x 2 columns - lower is better
PERFORMANCE
CORE-EHOS ARCHITECTURE
THREE-WAY BINDING
THE EVOLUTION
THREE-WAY BINDING
Every business code should be put in ViewModel
 Focus on business logic than DOM/CSS …
 Less code, few...
HOW DOES IT WORK?THREE-WAY BINDING
• The main purpose is to left developer work
only with data in server side
• Every sing...
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...
SUMMARYHTMLJS
1. 9 times faster than ReactJs, 5 times faster than Angular 2
2. Three-way binding is data binding from clie...
Grokking TechTalk #16: Html js and three way binding
Grokking TechTalk #16: Html js and three way binding
Grokking TechTalk #16: Html js and three way binding
Upcoming SlideShare
Loading in …5
×

Grokking TechTalk #16: Html js and three way binding

362 views

Published on

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)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Grokking TechTalk #16: Html js and three way binding

  1. 1. HTMLJS OPTIMIZE EFFORT OF BUILDING LARGE SCALE WEB APPLICATION
  2. 2. AGENDA 1. WHY HTMLJS 2. ARCHITECTURE 3. DEMO 4. THREE-WAY BINDING 5. Q&A
  3. 3. Fun project2014 Release 1.0.32015 Core- ehos2016 HTMLJS THE STORY
  4. 4. HTMLJS?WHY PROBLEM Complicated • Setup • Life cycle Pure View DSL • Weird syntax • No debugger • No OOP Slow • Performance • Productivity TEMPLATE
  5. 5. PRINCIPLES OF DESIGNARCHITECTURE COOL API
  6. 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. 7. PRINCIPLES OF DESIGNARCHITECTURE OOP Autocomplete and tree auto complete share many features but rendering Tree aucomplete should only override "render" prototype
  8. 8. PRINCIPLES OF DESIGNOOP
  9. 9. PRINCIPLES OF DESIGNARCHITECTURE Rendering 10.000 rows x 2 columns - lower is better PERFORMANCE
  10. 10. CORE-EHOS ARCHITECTURE THREE-WAY BINDING THE EVOLUTION
  11. 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. 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. 13. HOW DOES IT WORK?THREE-WAY BINDING Can be generated from server side Data from server
  14. 14. HOW DOES IT WORK?THREE-WAY BINDING No more DOM manipulation after ajax FullName displayed
  15. 15. HOW DOES IT WORK?THREE-WAY BINDING No more DOM manipulation after ajax FullName displayed
  16. 16. BEFORE Many things to trade off Easy to break things Handwritten for all HTML/JS/CSS THREE-WAY BINDING
  17. 17. Better application performance Better development performance Easy to maintain customize and extend AFTERTHREE-WAY BINDING
  18. 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
  19. 19. 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

×