Universal JavaScript

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
• View
• Native app

•
•
• Flux
• Redux
• Vuex
• CSS class scope
• CSS module
• web component
• 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

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

Universal JavaScript

More Related Content

What's hot

Similar to Universal JavaScript

Recently uploaded

Universal JavaScript