grokking techtalk #16: html js and three way binding

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