�ݺ�ߣ

Universal JavaScript ?
SOHO
(Jerry-Hong)

Universal JavaScript
? Isomorphic JavaScript
? Isomorphic JavaScript Single Page Application
Client Server SPA
? Universal JavaScript Isomorphic JavaScript
? Single Page Application

Single Page Application (SPA)
? (User Experience)
?
? AJAX, Client-Side Render, Client-Side Router
? Gmail, kkbox web player

Server-rendered Server-rendered + AJAX SPA
Load Performance
Dev Effort
User Experence
From: How instagram.com Works

class MyTitle extends Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
React

Vue.component('my-title', {
render(h) {
return (
<h1>Hello World</h1>
);
}
})
Vue 2 (JSX)

Vue.component('my-title', {
template: '<h1>Hello World</h1>'
})
Vue 2

@Component({
selector: 'my-title',
template: '<h1>Hello World</h1>'
})
class MyTitle { }
NG 2

?
?
? Flux
? Redux
? Vuex
? CSS class scope
? CSS module
? web component
? vue style scpoed
? View
? Server-Side Render
? Native app

?
?
? Flux
? Redux
? Vuex
? CSS Class Scope
? CSS module
? web component
? vue style scpoed
? View
? Native app

?
?
? Flux
? Redux
? Vuex
? CSS class scope
? CSS module
? web component
? vue style scpoed
? View
? Native app
.
.
.

3. SEO
4. First Time Loading

- React / Redux

? SPA Server Template Engine
? SPA Function (F)

? SPA Server Client Server
? Function (F)
? request F HTML
? request Client SPA

app
.use(compress())
.use(serve('./static')))
.use(router.routes())
.use(serverRender)
.use(errorBoot)
.listen(process.env.PORT || 8080,
() => {
console.log('listen 3000')
});
Step 1 - Router
? Server Router
API

app
.use(compress())
.use(serverRender)
.use(errorBoot)
() => {
});
Step 1 - Router
? Server Router
API
? Server Render

app
.use(compress())
.use(serverRender)
.use(errorBoot)
() => {
});
Step 1 - Router
? Server Router
API
? Server Render
?

Step 2. AJAX
? SPA ComponentDidMount AJAX
? Server Render ComponentWillMount Render
? Server Render AJAX Response Render

Step 2. AJAX
?
? Server Render
? redux-async-connect
? async-props
? React-Router onEnter API ( )
? universal-router

@fetchData((dispatch, state, routeState, replace) => {
return dispatch(getAllArticle());
})
class Home extends Component {
...
}
// fetchData(...)(Home)

// fetchData.js
export default fetchCall => Component => {
Component.onEnter = (store) =>
(nextState, replace, callback) => {
const result = fetchCall(
store.dispatch,
store.getState(),
nextState,
replace) || Promise.resolve(true);
if(typeof window === 'undefined') {
result.then(() => callback())
.catch((error) => callback(error))
} else {
callback();
}
}
return Component;
}

Step 3.
? Server Render HTML JS
Client Render Client Render

Step 3.
?
? Server Render HTML
? Client Render
(initialState)

Step 4.
? SPA webpack JS
? css-loader
? url-loader
? NodeJS

Step 4.
?
? webpack bundle server code ( )
? js
?
? CSS Module css-modules-require-hook

var nodeExternals =
require('webpack-node-externals');
...
module.exports = {
...
target: 'node',
externals: [nodeExternals()]
...
};
Step 4 - Bundle node
? target node
? webpack-node-
externals
hint: context

Step 5.
? Server Client
? webpack

new webpack.DefinePlugin({
'process.env.BROWSER': true
}))
new webpack.DefinePlugin({
'process.env.BROWSER': false
}))
webpack-server.con?g.js webpack.con?g.js

? MVC View
? HTML
? Universal JavaScript
? Client SPA View

CSS Critical Render Path
? CSS
? Style head CSS
?
? Universal JavaScript

? isomorphic-style-loader
? Render style head
for react-router: https://goo.gl/PYYoLL

CSS Secret Lea Verou
CSS in JS ?
http://www.ituring.com.cn/article/261344

�C Lea Verou, CSS Secret
If all you have is a hammer, everything looks like a nail.

�ݺ�ߣ

Universal JavaScript

More Related Content

Universal JavaScript