Universal JS Applications with React

REACTJS
UNIVERSAL JS APPLICATION WITH
05/2017

ABOUT ME
TRẦN TRỌNG THANH
▸ CTO & Co-founder NauStud.io
▸ 4 years with ActionScript, ex-Pycorian ;)
▸ 5 years with JavaScript
▸ Have worked with ReactJS, Angular 2, and learning VueJS
▸ SaigonJS FB group curator (bit.ly/saigonjs)
▸ Contact: Twitter/Facebook/Github /trongthanh
Nau is hiring! 😎❤☕

UNIVERSAL JS APPLICATION WITH REACTJS
A BRIEF HISTORY OF WEB APPS
▸ 1992 - Static HTML
▸ 1993 - Server side rendered HTML (CGI protocol)
▸ 1995 - LiveScript (a.k.a JavaScript) in Netscape Nav 2.0
▸ 1997 - Dynamic HTML, Internet Explorer 4
▸ 2005 - AJAX web apps
▸ 2010-ish - JS frameworks and Single page apps (SPA)

WHY SPA?
▸ Instant responses on the UI*
▸ No page refresh, allows page transitions
▸ Less overheads at server side
▸ App-like experience
▸ Foundation for Hybrid mobile apps
▸ More emphasis at Front End, enables back-end-less

THE ACHILLES’ HILL OF SPA (2015 A.D.)
😞 SEO
😞 First meaningful paint
😞 no-script
<!doctype html>
<html lang="en">
<head>
<title>My Awesome Single Page App</title>
<meta charset="utf-8">
<meta name="viewport" content="...">
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<div id="root" style="height: 100%"></div>
<script src="bundle.js"></script>
</body>
</html>
* Code sample from react-redux-starter-kit

OBVIOUS SOLUTION?
Render content HTML at server-side
MORE PROBLEMS?
😞 Duplicated rendering logic at server side
😞 Double work of template maintenance
😞 Flash of updated content
😞 All the relief of SPA for backend is gone

THE RISE OF  
UNIVERSAL JAVASCRIPT
APPLICATIONS

WHAT IS A
UNIVERSAL JS APPLICATION?
▸ Used to be called Isomorphic JS Applications
▸ There are portions of JS run on both client and server
(hence universal / isomorphic)
▸ Server-side rendered HTML
▸ Server-enabled History Push State

TRADITIONAL SPA WITH REDUX ARCHITECTURE

UNIVERSAL JS APP WITH REDUX ARCHITECTURE

CODE WALKTHROUGH
UNIVERSAL REACT APP
Based from a simple Universal Redux template

UNIVERSAL - CONTAINER COMPONENT
/*...*/
import { connect } from 'react-redux'
import { loadQuestionDetail } from 'actions/questions'
import { browserHistory } from 'react-router'
class Question extends Component {
static fetchData({ store, params, history }) {
let { id } = params
return store.dispatch(loadQuestionDetail({ id, history }))
}
componentDidMount() {
let { id } = this.props.params
this.props.loadQuestionDetail({ id, history: browserHistory })
}
render() {
return (<div> {/* stuff... */}</div>)
}
}
/*...*/
export default connect(mapStateToProps, { loadQuestionDetail })(Question)

SERVER - EXPRESS UNIVERSAL RENDERER MIDDLEWARE
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { useRouterHistory, RouterContext, match } from 'react-router'
import { createMemoryHistory, useQueries } from 'history'
import configureStore from 'store/configureStore'
import createRoutes from 'routes/index'
import { Provider } from 'react-redux'
server.get('*', (req, res, next) => {
let history = useRouterHistory(useQueries(createMemoryHistory))()
let store = configureStore()
let routes = createRoutes(history)
let location = history.createLocation(req.url)
match({ routes, location }, (error, redirectLocation, renderProps) => {
/* cont... */
})
}) //end server.get('*')

/*...*/
/* ... */
/* handle error & redirectLocation... */
function getReduxPromise() { /*...*/ }
getReduxPromise().then(()=> {
let reduxState = escape(JSON.stringify(store.getState()))
let html = ReactDOMServer.renderToString(
<Provider store={store}>
{ <RouterContext {...renderProps}/> }
</Provider>
)
let metaHeader = Helmet.rewind()
// always render the index template
res.render('index', { metaHeader, html, reduxState, scriptSrcs, styleSrc })
})
.catch((err)=> {
Helmet.rewind()
next(err)
})
})

function getReduxPromise() {
let { query, params } = renderProps
let comp = renderProps.components[renderProps.components.length - 1].WrappedComponent
let promise = comp.fetchData ?
comp.fetchData({ query, params, store, history }) :
Promise.resolve()
return promise
}

/*...*/
/* ... */
/* handle error & redirectLocation... */
function getReduxPromise() { /*...*/ }
getReduxPromise().then(()=> {
let reduxState = escape(JSON.stringify(store.getState()))
let html = ReactDOMServer.renderToString(
{ <RouterContext {...renderProps}/> }
</Provider>
)
// always render the index template
res.render('index', { html, reduxState, /*...*/ })
})
.catch((err)=> {
next(err)
})
})

SERVER - EXPRESS INDEX TEMPLATE
<!DOCTYPE html>
<html>
<head>
<%# metaHeader and stylesheet stuff, omit for clarity...%>
</head>
<body>
<div id="root"><%- html %></div>
<script type="text/javascript" charset="utf-8">
window.__REDUX_STATE__ = '<%= reduxState %>';
</script>
<% scriptSrcs.forEach(function(src){ %>
<script src="<%= src %>"></script>
<% }) %>
</body>
</html>

CLIENT - REACT APP.JS
/*...*/
import ReactDOM from 'react-dom'
import { browserHistory } from 'react-router'
import { Provider } from 'react-redux'
import createRoutes from 'routes/index'
import configureStore from 'store/configureStore'
let initialState = {}
if (window.__REDUX_STATE__) {
try {
initialState = JSON.parse(unescape(__REDUX_STATE__))
} catch (e) {
/*catch error*/
}
}
const store = configureStore(initialState)
ReactDOM.render((
{ createRoutes(browserHistory) }
</Provider>
), document.getElementById('root'))

UNIVERSAL JS APPLICATION
WE HAVE SOLVED:
👍 SEO
👍 First meaningful paint
👍 no-script
👍 Code reuse

IN 2 MINUTES
LET’S CREATE A UNIVERSAL APP

READ MORE
REFERENCES
▸ https://medium.com/@mjackson/universal-javascript-4761051b7ae9
▸ https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-
applications-2bdffbcc1fa0
▸ https://github.com/mz026/universal-redux-template
▸ https://github.com/erikras/react-redux-universal-hot-example
▸ https://learnnextjs.com

Universal JS Applications with React

More Related Content

What's hot (20)

Similar to Universal JS Applications with React (20)

Recently uploaded (20)

Universal JS Applications with React