Building Universal Web Apps With React

ForwardJS 2017 - An overview of isomorphic architecture, including why you would want to build your app this way and what some of the challenges are.

Transcript

1. Building Universal Web Apps with React Elyse Kolker Gordon Twitter: @sfdrummerjs, Github: @elyseko Web Lead, Vevo Code: bit.ly/universal-app-react
2. Get it 40% off! bit.ly/isomorphicdevjs Code: ctwforwjs17 Win a free ebook: http://bit.ly/2m0pCiP
3. Universal or Isomorphic?
4. Write code once, run it in two environments (node & browser).
5. Overview of Universal/Isomorphic Web Apps Why would you want to build an universal web app Universal App Architecture Challenges and Tradeoffs Topics:
6. Overview: What is a Universal App?
7. Server-side rendered applications Overview
8. Server-side rendered applications Overview
9. Server-side rendered applications Overview
10. Server-side rendered applications Overview
11. Server-side rendered applications Overview
12. Server-side rendered applications Overview
13. Single Page Application (SPA) Overview
14. Single Page Application (SPA) Overview
15. Single Page Application (SPA) Overview
16. Single Page Application (SPA) Overview
17. Single Page Application (SPA) Overview
18. Why not both? Overview
19. Overview
20. Overview
21. Overview
22. Overview
23. Overview
24. Overview
25. Overview
26. Overview
27. Why build it?
28. #1 SEO Getting your website (or cat video) to rank the highest can make or break your success as a business. Why build it?
29. #2 Perceived Performance Users should think the site is fast. This means showing content (not loading spinners) as soon as possible. Why build it?
30. Everything is JavaScript! Most of your code will run on both the server and the browser. #3 Maintenance and Developer benefits Why build it?
31. Universal App Architecture
32. In this section Technologies required to build an universal app Loading a single page of the app in the isomorphic flow Architecture Code: bit.ly/universal-app-react
33. In this section Technologies required to build an universal app Loading a single page of the app in the isomorphic flow Architecture Code: bit.ly/universal-app-react
34. In this section Technologies required to build an universal app Loading a single page of the app in the isomorphic flow Architecture Code: bit.ly/universal-app-react
35. Architecture
36. Architecture
37. Node + Express Architecture
38. Webpack Architecture
39. Why webpack? NPM packages ES6/ES7 with babel CSS in your browser bundle Advanced features Architecture: webpack
40. Architecture: webpack
41. Architecture: webpack Code
42. Architecture: webpack Code Parser
43. Architecture: webpack Code Parser Transforms
44. Architecture: webpack Code Parser Transforms Compiled App Code
45. Architecture: wepack "scripts": {
 "build:browser": "webpack",
 "prestart": "npm run build:browser",
 "start": "node src/server.js"
 } package.json
46. module.exports = {
 entry: "./src/main.jsx",
 devtool: "source-map",
 output: {
 path: __dirname + '/ src/',
 filename: "browser.js"
 }, Architecture: webpack webpack.config.js
47. module.exports = {
 ... Architecture: webpack module: {
 loaders: [
 {
 test: /\.(jsx|es6)$/,
 exclude: /node_modules|examples/,
 loader: "babel-loader"
 },
 {
 test: /\.css$/,
 loaders: ['style', 'css']
 }
 ] webpack.config.js
48. React Architecture
49. Virtual DOM Architecture: React
50. Virtual DOM Architecture: React
51. Virtual DOM Architecture: React
52. Virtual DOM Architecture: React
53. Architecture: React import ReactDOM from 'react-dom';
 ReactDOM.render( <RootComponent {...props} />, document.getElementById(‘react- content’) );
54. Architecture: React import { renderToString } from 'react-dom/ server';
 renderToString(<RootComponent {...props} />);
55. React Router Architecture
56. Architecture: React Router
57. Architecture: React Router ReactDOM.render(
 <Router routes={sharedRoutes(store)} history={browserHistory} />,
 document.getElementById('react-content')
 );
58. Architecture: React Router renderView.jsx
59. import React from 'react';
 import { match, RouterContext } from 'react-router';
 import { routes } from '../shared/sharedRoutes';
 
 export default function renderView(req, res, next) {
 }
 Architecture: React Router renderView.jsx
60. import React from 'react';
 import { match, RouterContext } from 'react-router';
 import { routes } from '../shared/sharedRoutes';
 
 export default function renderView(req, res, next) {
 }
 Architecture: React Router match(matchOpts, handleMatchResult); renderView.jsx
61. import React from 'react';
 import { match, RouterContext } from 'react-router';
 import { routes } from '../shared/sharedRoutes';
 
 export default function renderView(req, res, next) {
 const matchOpts = {
 routes: routes(),
 location: req.url
 };
 
 
 }
 Architecture: React Router match(matchOpts, handleMatchResult); renderView.jsx match(matchOpts, handleMatchResult);
62. import React from 'react';
 import { match, RouterContext } from 'react-router';
 import { routes } from '../shared/sharedRoutes';
 
 export default function renderView(req, res, next) {
 const matchOpts = {
 routes: routes(),
 location: req.url
 };
 
 
 }
 Architecture: React Router const handleMatchResult = (error, redirectLocation, renderProps) => {
 if (!error && !redirectLocation && renderProps) { // render code } } match(matchOpts, handleMatchResult); renderView.jsx match(matchOpts, handleMatchResult); const matchOpts = {
 routes: routes(),
 location: req.url
 };

63. Redux Architecture
64. Architecture: Redux
65. View Architecture: Redux
66. View Actions Architecture: Redux
67. View Actions Architecture: Redux Reducers
68. View Actions Store Architecture: Redux Reducers
69. View Actions Store Architecture: Redux Reducers
70. Build the cart Architecture
71. Architecture: Create the Cart
72. Architecture: Create the Cart sharedRoutes.jsx
73. <Route path="/" component={App}>
 <Route path="/cart" component={Cart} />
 <Route path="/cart/payment" component={Payment} />
 <Route path="/products" component={Products} />
 <Route path="/profile" component={Profile} />
 <Route path="/login" component={Login} />
 </Route> Architecture: Create the Cart sharedRoutes.jsx
74. Architecture: Create the Cart export const routes = () => { } <Route path="/" component={App}>
 <Route path="/cart" component={Cart} />
 <Route path="/cart/payment" component={Payment} />
 <Route path="/products" component={Products} />
 <Route path="/profile" component={Profile} />
 <Route path="/login" component={Login} />
 </Route> sharedRoutes.jsx
75. Architecture: Create the Cart
76. Architecture: Create the Cart
77. Architecture: Create the Cart
78. Architecture: Create the Cart item.jsx
79. const Item = (props) => {
 };
 Architecture: Create the Cart item.jsx
80. return (
 <div className="item">
 <div className="ui tiny image">
 <img src={props.thumbnail} alt="cart" />
 </div>
 <div className="middle aligned content">
 {props.name}
 </div>
 <div className="right aligned content">
 ${props.price}
 </div>
 </div>
 );
 const Item = (props) => {
 };
 Architecture: Create the Cart item.jsx
81. return (
 <div className="item">
 <div className="ui tiny image">
 <img src={props.thumbnail} alt="cart" />
 </div>
 <div className="middle aligned content">
 {props.name}
 </div>
 <div className="right aligned content">
 ${props.price}
 </div>
 </div>
 );
 const Item = (props) => {
 };
 Architecture: Create the Cart item.jsx
82. return (
 <div className="item">
 <div className="ui tiny image">
 <img src={props.thumbnail} alt="cart" />
 </div>
 <div className="middle aligned content">
 {props.name}
 </div>
 <div className="right aligned content">
 ${props.price}
 </div>
 </div>
 );
 return (
 <div className="item">
 <div className="ui tiny image">
 <img src={props.thumbnail} alt="cart" />
 </div>
 <div className="middle aligned content">
 {props.name}
 </div>
 <div className="right aligned content">
 ${props.price}
 </div>
 </div>
 );
 const Item = (props) => {
 };
 const Item = (props) => {
 };
 Architecture: Create the Cart item.jsx
83. Architecture: Create the Cart cart.jsx
84. render() {
 return (
 <div className="cart main ui segment">
 <div className="ui segment divided items">
 {this.renderItems()}
 </div> </div>
 );
 } Architecture: Create the Cart cart.jsx
85. render() {
 return (
 <div className="cart main ui segment">
 <div className="ui segment divided items">
 {this.renderItems()}
 </div> </div>
 );
 } Architecture: Create the Cart <div className="ui right rail">
 <div className="ui segment">
 <span>Total: </span><span>${this.getTotal()}</span>
 <button onClick={this.proceedToCheckout} className="ui positive basic button">
 Checkout
 </button>
 </div> </div> render() {
 return (
 <div className="cart main ui segment">
 <div className="ui segment divided items">
 {this.renderItems()}
 </div> </div>
 );
 } cart.jsx
86. 
 import cartActions from '../shared/cart-action-creators.es6';
 
 export class CartComponent extends Component {
 
 static loadData() {
 return [
 cartActions.getCartItems
 ];
 }
 render() {}
 }
 Architecture: Create the Cart cart.jsx
87. 
 
 export class CartComponent extends Component {} 
 function mapStateToProps(state) {}
 
 function mapDispatchToProps(dispatch) {}
 
 export default connect(mapStateToProps, mapDispatchToProps) (CartComponent); Architecture: Create the Cart cart.jsx
88. import fetch from 'isomorphic-fetch';
 
 export const GET_CART_ITEMS = 'GET_CART_ITEMS';
 
 export function getCartItems() { Architecture: Create the Cart cart-action-creators.es6
89. import fetch from 'isomorphic-fetch';
 
 export const GET_CART_ITEMS = 'GET_CART_ITEMS';
 
 export function getCartItems() {
 return (dispatch) => {
 return fetch('http://localhost:3000/api/user/cart', {
 method: 'GET'
 }) Architecture: Create the Cart cart-action-creators.es6
90. import fetch from 'isomorphic-fetch';
 
 export const GET_CART_ITEMS = 'GET_CART_ITEMS';
 
 export function getCartItems() {
 return (dispatch) => {
 return fetch('http://localhost:3000/api/user/cart', {
 method: 'GET'
 }) Architecture: Create the Cart cart-action-creators.es6 .then((response) => {
 return response.json().then((data) => {
 return dispatch({
 type: GET_CART_ITEMS,
 data: data.items
 });
 });
 })
91. Architecture: Create the Cart import { GET_CART_ITEMS } from './cart-action-creators.es6';
 
 export default function cart(state = {}, action) {
 switch (action.type) {
 case GET_CART_ITEMS:
 return {
 ...state,
 items: action.data
 };
 }
 } cart-reducer.es6
92. Architecture: Create the Cart import { GET_CART_ITEMS } from './cart-action-creators.es6';
 
 export default function cart(state = {}, action) {
 switch (action.type) {
 case GET_CART_ITEMS:
 return {
 ...state,
 items: action.data
 };
 }
 } import { GET_CART_ITEMS } from './cart-action-creators.es6';
 
 export default function cart(state = {}, action) {
 switch (action.type) {
 case GET_CART_ITEMS:
 return {
 ...state,
 items: action.data
 };
 }
 } cart-reducer.es6
93. Server setup Architecture
94. HTML output from server Architecture: Server setup
95. Architecture: Server setup export default function renderView(req, res, next) {
 const matchOpts = {};
 const handleMatchResult = (error, redirectLocation, renderProps) => {
 if (!error && !redirectLocation && renderProps) {
 const store = initRedux();
 let actions = renderProps.components.map((component) => {
 // return actions from loadData() on each component
 }); renderView.jsx
96. Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 renderView.jsx
97. Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 const stringifiedServerState = JSON.stringify(serverState); 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 renderView.jsx
98. Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 const stringifiedServerState = JSON.stringify(serverState); 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 
 const app = renderToString(
 <Provider store={store}>
 <RouterContext routes={routes} {...renderProps} />
 </Provider>
 ); const stringifiedServerState = JSON.stringify(serverState); renderView.jsx
99. Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 const stringifiedServerState = JSON.stringify(serverState); 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 
 const app = renderToString(
 <Provider store={store}>
 <RouterContext routes={routes} {...renderProps} />
 </Provider>
 ); const stringifiedServerState = JSON.stringify(serverState); 
 const html = renderToString(
 <HTML html={app} serverState={stringifiedServerState} />
 );
 
 
 const app = renderToString(
 <Provider store={store}>
 <RouterContext routes={routes} {...renderProps} />
 </Provider>
 ); renderView.jsx
100. Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 const stringifiedServerState = JSON.stringify(serverState); 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 
 const app = renderToString(
 <Provider store={store}>
 <RouterContext routes={routes} {...renderProps} />
 </Provider>
 ); const stringifiedServerState = JSON.stringify(serverState); 
 const html = renderToString(
 <HTML html={app} serverState={stringifiedServerState} />
 );
 
 return res.send(`<!DOCTYPE html>${html}`); 
 const app = renderToString(
 <Provider store={store}>
 <RouterContext routes={routes} {...renderProps} />
 </Provider>
 ); 
 const html = renderToString(
 <HTML html={app} serverState={stringifiedServerState} />
 );
 
 renderView.jsx
101. Architecture: Server setup const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; html.jsx
102. Architecture: Server setup const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; html.jsx
103. Architecture: Server setup const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; html.jsx
104. Architecture: Server setup const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; const HTML = (props) => {
 return (
 <html lang="en">
 <head></head>
 <body>
 <div
 id="react-content"
 dangerouslySetInnerHTML={{ __html: props.html }}/>
 <script dangerouslySetInnerHTML={{
 __html: `
 window.__SERIALIZED_STATE__ =
 JSON.stringify(${props.serverState})
 `
 }}/>
 <script type="application/javascript" src="/browser.js" />
 </body>
 </html>
 );
 }; html.jsx
105. Clicking the button results doesn’t do anything Architecture: Server Setup
106. App State available in the browser. Architecture: Server setup
107. Browser setup Architecture
108. 
 const initialState = JSON.parse(window.__SERIALIZED_STATE__);
 const store = initRedux(initialState);
 Architecture: Browser setup
109. 
 const initialState = JSON.parse(window.__SERIALIZED_STATE__);
 const store = initRedux(initialState);
 Architecture: Browser setup 
 function init() {
 ReactDOM.render(
 <Provider store={store}>
 <Router routes={sharedRoutes(store)} history={browserHistory} />
 </Provider>, document.getElementById('react-content'));
 }
 
 init(); 
 const initialState = JSON.parse(window.__SERIALIZED_STATE__);
 const store = initRedux(initialState);

110. Architecture: Browser setup
111. Challenges and Tradeoffs
112. Competing envs Challenges and Tradeoffs
113. Challenges and Tradeoffs
114. Challenges and Tradeoffs if (process.env.BROWSER) {
 // browser only code
 }
115. Performance Challenges and Tradeoffs
116. Server Performance Strategies Only render above the fold content on the server (SEO tradeoff) Use streams Caching Challenges and Tradeoffs
117. Caching Challenges and Tradeoffs
118. Challenges and Tradeoffs
119. Challenges and Tradeoffs
120. Challenges and Tradeoffs
121. Two Options In memory caching CDN/Edge caching Walmart Labs Server Side Render Cache (Electrode) Challenges and Tradeoffs
122. Complexity Challenges and Tradeoffs
123. Building Universal Apps requires you to think about your application flow in a new way.