incremental dom and recent trend of frontend development
TRANSCRIPT
Incremental DOM
and
Recent Trend of Frontend Development
2016.3.23
Akihiro Ikezoe
1
• Groupware Developer
• Frontend Team
• Troubleshooting Performance Problems
• Log Analysis
• Recently Interests
• Elasticsearch, Embulk, Kibana
Rx, Kotlin, Scala, AngularJS
About me
2
Today's Contents
• DOM Manipulation
• AngularJS
• Virtual DOM (React)
• Incremental DOM
• Architecture
• Server Client
• Component
• Flux
3
DOM MANIPULATION
4
Rendering on a Browser
ParseHTMLParseHTML
Generate DOM TreeGenerate DOM Tree
GenerateRender Tree
GenerateRender Tree
LayoutLayout
PaintPaint
ServerHTML
ParseCSS
ParseCSS
GenerateCSSOM Tree
GenerateCSSOM Tree
CSS
5
DOM (Document Object Model)
html
head
title
[text]
body
h1
[text]
input ul
li
li
li
<html>
<head>
<title>sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>title</h1>
<input type="text">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</body>
</html>
<html>
<head>
<title>sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>title</h1>
<input type="text">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</body>
</html>
HTML
6
Dynamic Page via JavaScript
• Adding, Removing, or
Updating DOM nodes via
JavaScript.
• Reflow: Recalculate Layout
for parts of the Render
Tree.
• Repaint: Update parts of
the Screen.
ParseHTMLParseHTML
GenerateDOM TreeGenerateDOM Tree
GenerateRender Tree
GenerateRender Tree
LayoutLayout
PaintPaint
JavaScript
Change DOM Tree
7
DOM Manipulation
• DOM API
• Two-Way Data Binding
• Virtual DOM
• Incremental DOM
8
DOM API
• Problems
• DOM can be changed from anywhere.
→ So to speak, Global Variables.
• Difficult to understand the relationship JavaScript and HTML.
�
Low Maintainable
<input type="text" id="in_el">
<div id="out_el"></div>
<input type="text" id="in_el">
<div id="out_el"></div>
HTML
window.onload = function() {
var inputEl = document.getElementById('in_el');
var outputEl = document.getElementById('out_el');
inputEl.onkeyup = function() {
outputEl.innerText = inputEl.value;
};
};
window.onload = function() {
var inputEl = document.getElementById('in_el');
var outputEl = document.getElementById('out_el');
inputEl.onkeyup = function() {
outputEl.innerText = inputEl.value;
};
};
JavaScript
9
Client-Side Frameworks
• jQuery can develop interactive pages, but it is not
maintainable.
• We need framework that can manage large complex
application.
• Many Client-Side Frameworks has been born in last few
years.
• AngularJS, Backbone, Ember, ExtJS, Knockout, Elm, React,
Cycle.js, Vue.js, Aurelia, Mithril
10
Frameworks/Libraries to pick up this time
• AngularJS
• All-in-One Web Application Framework developed by Google.
• Many Features: Data Binding, Directive, DI, Routing, Security, Test, etc.
• Angular 2 has been developed in order to solve the problems of AngularJS 1.x.
• React
• UI Building Library developed by Facebook.
• Using Virtual DOM for DOM Manipulation, JSX for Writing Templates.
• Create the new Concepts such as Flux, CSS in JS.
• Incremental DOM
• DOM Manipulation Library developed by Google.
• It has been developed in order to solve the problems of Virtual DOM.
11
Role of each Frameworks/Libraries
Incremental DOM
AngularJSReact
Virtual DOMLibrary for
DOM Manipulation
Library for
UI building
Framework for
Client-Side
Web Application
12
AngularJS 1.x
• Two-Way Data Binding
• Automatic synchronization of data between the model and DOM
• If Model was changed, updates DOM.
• If DOM was changed, updates Model.
<input type="text" ng-model="value">
<div>{{value}}</div>
<input type="text" ng-model="value">
<div>{{value}}</div>
HTML
$scope.value
input
ng-model=“value”
{{value}}
DOM
Model �
�
13
Two-Way Data Binding (Binding Phase)
1. Parse HTML and find binding
targets.
2. Generate $watch expressions
for each binding target.
14
DOM
Model
� $watch
� $watch
� $watch
Two-Way Data Binding (Runtime Phase)
1. Change DOM element via user
operation.
2. Update Model via DOM event.
3. Evaluate all $watch
expressions.
4. If there is change in a
model, update DOM element.
5. Repeat Step 3, 4 until all
changes stabilize.
DOM
Model
� $watch
� $watch
� $watch
15Dirty Checking
Problem of Dirty Checking
• $watch expression is created for each binding target.
• All $watch expressions are evaluated every time DOM event
fired.
�
• If you built a complex page (e.g. with > 2000 bindings),
its rendering speed will be slow.
16
Improvement by Angular 2
• Tree of Components
• Change Detection Strategy
• Immutable Objects
• Observable Objects
• 100,000checks / < 10msec
17
React (Virtual DOM)
• React updates the whole UI in the application every time
somewhere in model was changed.
• Using Virtual DOM generated from Model.
• Virtual DOM
• It is not an actual DOM object.
• It is a plain JavaScript object that represents a real DOM
object tree.
• Efficiently Re-rendering by applying the diff generated
from Virtual DOM.
18
Virtual DOM (First Rendering)
Virtual DOMModel
19
Real DOM
RenderCreate
Virtual DOM (Update)Virtual DOMModel
20
Real DOM
previous
current
PatchDiff
Apply
Create
Create
Problem of Virtual DOM
• Higher Memory Use
• React generates a new Virtual DOM tree every time of re-
rendering.
21
Incremental DOM
• The approach of Incremental DOM is similar to Virtual DOM.
• Walk along the Virtual DOM Tree and Read DOM Tree to figure out
changes.
• If there is no change: Do nothing.
• If there is: Generate diff and apply it to the Real DOM.
• Reduce Memory Use.
• Not as fast as other libraries. (due to access Real DOM)
22
Incremental DOM
23
Patch
Create
In-Memory DOMModel Real DOM
Meta
Meta
MetaMeta
Meta
Compare
Compare
Compare
Compare
Diff Diff
Apply
Benchmarks
24※ https://auth0.com/blog/2016/01/07/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
Depends on your application…
Template Engine for Incremental DOM
• Incremental DOM is a low level library.
• You can choose to use templating language.
• Closure Templates
• Client and Server Side Template Engine developed by Google.
• Language-Neutral, Secure, Typing.
• JSX
• Template Engine used in React.
• JavaScript syntax extension that looks similar to XML.
• Use babel-plugin-incremental-dom.
25
Conclusion
• Incremental DOM has less Memory usage than Virtual DOM.
• But I think the benefits are not so large.
• If you are using Closure-Templates in Client-Side,
Incremental DOM is a good choice.
26
ARCHITECTURE
27
Change of Web Application Architecture
• Component
• Role of Server-Side and Client-Side
• Flux
28
Component
• DOM Tree can be represented as
Component Tree
• Component
• JavaScript -> Class
• HTML -> JSX
• CSS -> CSS in JS
• Pros of Component
• Readable
• Reusable (in the project)
• Maintainable29
Class
30
class HelloWorld {
constructor(name) {
this.name = name;
}
getMessage() {
return "Hello, " + this.name;
}
}
class HelloWorld {
constructor(name) {
this.name = name;
}
getMessage() {
return "Hello, " + this.name;
}
}
class HelloWorld {
name:string;
constructor(name:string) {
this.name = name;
}
getMessage():string {
return "Hello, " + this.name;
}
}
class HelloWorld {
name:string;
constructor(name:string) {
this.name = name;
}
getMessage():string {
return "Hello, " + this.name;
}
}
ECMAScript 2015 TypeScript
You must use a transpiler.
(babel, closure-compiler, etc.)
JSX
• JavaScript syntax extension that
looks similar to XML.
• Benefits
• Concise
• Familiar Syntax
• Balanced opening and closing tags.
• ECMAScript 2015 and TypeScript
has Template Strings.
31
class App extends Component {
render() {
return <div>
<Header></Header>
<div className={container}>
{this.props.children}
</div>
</div>;
}
}
class App extends Component {
render() {
return <div>
<Header></Header>
<div className={container}>
{this.props.children}
</div>
</div>;
}
}
JSX
CSS in JS
• Problems with CSS at scale
• Global Namespace
• Dependencies
• Dead Code Elimination
• Minification
• Sharing Constants
• Non-deterministic Resolution
• Isolation
32※ https://speakerdeck.com/vjeux/react-css-in-js
const styles = {
button: {
backgroundColor: '#ff0000',
width: '320px',
padding: '20px',
borderRadius: '5px',
border: 'none',
outline: 'none'
}
};
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={styles.button}>
Click me!
</button>
</Block>
);
}
}
const styles = {
button: {
backgroundColor: '#ff0000',
width: '320px',
padding: '20px',
borderRadius: '5px',
border: 'none',
outline: 'none'
}
};
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={styles.button}>
Click me!
</button>
</Block>
);
}
}
JSX
CSS Modules
• Problems of CSS in JS
• No support for pseudo-elements, pseudo-classes, media-queries and animations.
• No CSS prefix support.
• CSS Modules
• Local Naming
• Composition
• Sharing Between Files
• Single Responsibility Modules
33
import button from './Button.css';
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={button}>
Click me!
</button>
</Block>
);
}
}
import button from './Button.css';
class Button extends Component {
render() {
return (
<Block textAlign="center">
<button style={button}>
Click me!
</button>
</Block>
);
}
}
JSX
WebPack
• Bundler for Modules
• Can load parts such as CommonJs, AMD, ES6 modules, CSS, Images,
JSON, Coffeescript, LESS, ...
• Can create multiple chunks.
• Dependencies are resolved.
• Preprocess (e.g. Babel, JSX, CSS Module, etc.)
• We may not require build tools such as Grunt, Gulp.
34
Role of Server-Side and Client-Side
• Server-Side MVC / Client-Side MVC
• Single Page Application
• Server-Side Rendering
• Universal JavaScript
35
Server-Side MVC / Client-Side MVC
36
Model
Controller
View
Browser
Model
Model
Controller
View
Browser
DOM
Manipulation
Client
Server
Client
Server
RequestResponse
RequestResponse
Single Page Application (SPA)
• SPA has ability to re-rendering UI without requiring a
server to retrieve HTML.
• SPA needs a Client-Side routing that allows you to
navigate around a web page, using the HTML5 history API.
• SPA offers native application like experience.
37
Server-Side Rendering
• Problem of Client-Side Rendering
• First Rendering
• SEO
• Preview
• Render the Client-Side Application on Server-Side when a first Request.
• Implementation of Server-Side Rendering
• Use Node.js
• Use JavaScript Engine each platform (Nashorn, go-duktape, etc.)
• Use PhantomJS (Headless Browser)
38
Universal (Isomorphic) JavaScript
• Sharing code between Server and Client.
• Pros
• Reuse code.
• Server-Side Rendering.
• Cons
• Be limited Server-Side Platform.
• Application may be complex.
• Singleton problem.
• Can’t run parts of code on server.
39
Flux
• Flux is the Application
Architecture for Client-Side Web
Application.
• Flux ensures a unidirectional flow
of data between a system’s
components.
• Flux Implementations.
• Facebook Flux, Flummox, Redux, Reflux,
Freezer, flumpt
40※ http://www.infoq.com/news/2014/05/facebook-mvc-flux
MVC does not scale?
An Implementation of Flux (Redux)
41
ActionActionAction
Reducer
Reducer
Reducer
Store
Dispatch
Store
CurrentNew
CreateApply
Event
View (Component Tree)
Role of classes in Redux
• Action
• Payloads of information
that send data from user
input to the store.
• Like a Command-Class in
Command-Pattern.
• Reducer
• Change Application’s State
in response to Action.
42
• Store
• Holds Application state.
• All application state is
stored as a single object.
• View
• Re-rendering templates
using the Store.
Pros of Redux (Flux)
• Readable
• Clear role of each class
• One-Way Data Flow
• Debuggable
• Redux DevTools
• History of every State and Action Payload.
• Rollback
• Testable
• Store only has state.
• Reducer is pure and doesn’t have any side effects.
• High Maintainability!
43
Conclusion
• Web applications are increasingly complex.
We need some new development process.
• Front-End Development keeps changing fast.
• Browsers Improvement
• ECMAScript/AltJS Improvement
• Frameworks Improvement
• We should keep Learning!
44