Date post: | 16-Jan-2017 |
Category: |
Engineering |
Upload: | akihiro-ikezoe |
View: | 1,836 times |
Download: | 0 times |
• 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
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 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
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
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