Universal JS Applications with React
Report
Thanh Trần TrọngFollow
May. 11, 2017•0 likes•459 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Universal JS Applications with React
May. 11, 2017•0 likes•459 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
Quick intro into Universal JS Application.
Thanh Trần TrọngFollow
Recommended
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
React server side rendering performanceNick Dreckshage
Introduction to MongoDBChun-Kai Wang
AngularJS Deep Dives (NYC GDG Apr 2013)Nitya Narasimhan
JS Chicago Meetup 2/23/16 - Redux & RoutesNick Dreckshage
React.js in real world apps. Emanuele DelBono
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)
- A BRIEF HISTORY OF WEB APPS 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
- A BRIEF HISTORY OF WEB APPS 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
- A BRIEF HISTORY OF WEB APPS 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('*')
- SERVER - EXPRESS UNIVERSAL RENDERER MIDDLEWARE /*...*/ server.get('*', (req, res, next) => { /* ... */ match({ routes, location }, (error, redirectLocation, renderProps) => { /* 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) }) }) }) //end server.get('*')
- SERVER - EXPRESS UNIVERSAL RENDERER MIDDLEWARE 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 }
- SERVER - EXPRESS UNIVERSAL RENDERER MIDDLEWARE /*...*/ server.get('*', (req, res, next) => { /* ... */ match({ routes, location }, (error, redirectLocation, renderProps) => { /* handle error & redirectLocation... */ function getReduxPromise() { /*...*/ } getReduxPromise().then(()=> { let reduxState = escape(JSON.stringify(store.getState())) let html = ReactDOMServer.renderToString( <Provider store={store}> { <RouterContext {...renderProps}/> } </Provider> ) // always render the index template res.render('index', { html, reduxState, /*...*/ }) }) .catch((err)=> { next(err) }) }) }) //end server.get('*')
- 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(( <Provider store={store}> { createRoutes(browserHistory) } </Provider> ), document.getElementById('root'))
- DEMO
- UNIVERSAL JS APPLICATION WE HAVE SOLVED: 👍 SEO 👍 First meaningful paint 👍 no-script 👍 Code reuse
- WAIT. THERE’S MORE
- NEXT.JS INTRODUCING
- IN 2 MINUTES LET’S CREATE A UNIVERSAL APP
- Q&A
- 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