KEMBAR78
Building Universal Web Apps with React ForwardJS 2017 | PDF
EG
Uploaded byElyse Kolker Gordon
961 views

Building Universal Web Apps with React ForwardJS 2017

The document discusses building universal web applications using React, highlighting the benefits of isomorphic (universal) applications, such as improved SEO and perceived performance. It outlines the architecture required, including server-side rendering, Redux, and React Router, alongside various code snippets and configurations. Additionally, it addresses challenges and tradeoffs in developing a universal app and provides resources for further learning.

Downloaded 19 times
1 / 123
2 / 123
3 / 123
4 / 123
5 / 123
6 / 123
7 / 123
8 / 123
9 / 123
10 / 123
11 / 123
12 / 123
13 / 123
14 / 123
15 / 123
16 / 123
17 / 123
18 / 123
19 / 123
20 / 123
21 / 123
22 / 123
23 / 123
24 / 123
25 / 123
26 / 123
27 / 123
28 / 123
29 / 123
30 / 123
31 / 123
32 / 123
33 / 123
34 / 123
35 / 123
36 / 123
37 / 123
38 / 123
39 / 123
40 / 123
41 / 123
42 / 123
43 / 123
44 / 123
45 / 123
46 / 123
47 / 123
48 / 123
49 / 123
50 / 123
51 / 123
52 / 123
53 / 123
54 / 123
55 / 123
56 / 123
57 / 123
58 / 123
59 / 123
60 / 123
61 / 123
62 / 123
63 / 123
64 / 123
65 / 123
66 / 123
67 / 123
68 / 123
69 / 123
70 / 123
71 / 123
72 / 123
73 / 123
74 / 123
75 / 123
76 / 123
77 / 123
78 / 123
79 / 123
80 / 123
81 / 123
82 / 123
83 / 123
84 / 123
85 / 123
86 / 123
87 / 123
88 / 123
89 / 123
90 / 123
91 / 123
92 / 123
93 / 123
94 / 123
95 / 123
96 / 123
97 / 123
98 / 123
99 / 123
100 / 123
101 / 123
102 / 123
103 / 123
104 / 123
105 / 123
106 / 123
107 / 123
108 / 123
109 / 123
110 / 123
111 / 123
112 / 123
113 / 123
114 / 123
115 / 123
116 / 123
117 / 123
118 / 123
119 / 123
120 / 123
121 / 123
122 / 123
123 / 123
Building Universal Web Apps with React Elyse Kolker Gordon Twitter: @sfdrummerjs, Github: @elyseko Web Lead, Vevo Code: bit.ly/universal-app-react
Get it 40% off! bit.ly/isomorphicdevjs Code: ctwforwjs17 Win a free ebook: http://bit.ly/2m0pCiP
Universal or Isomorphic?
Write code once, run it in two environments (node & browser).
Overview of Universal/Isomorphic Web Apps Why would you want to build an universal web app Universal App Architecture Challenges and Tradeoffs Topics:
Overview: What is a Universal App?
Server-side rendered applications Overview
Server-side rendered applications Overview
Server-side rendered applications Overview
Server-side rendered applications Overview
Server-side rendered applications Overview
Server-side rendered applications Overview
Single Page Application (SPA) Overview
Single Page Application (SPA) Overview
Single Page Application (SPA) Overview
Single Page Application (SPA) Overview
Single Page Application (SPA) Overview
Why not both? Overview
Overview
Overview
Overview
Overview
Overview
Overview
Overview
Overview
Why build it?
#1 SEO Getting your website (or cat video) to rank the highest can make or break your success as a business. Why build it?
#2 Perceived Performance Users should think the site is fast. This means showing content (not loading spinners) as soon as possible. Why build it?
Everything is JavaScript! Most of your code will run on both the server and the browser. #3 Maintenance and Developer benefits Why build it?
Universal App Architecture
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
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
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
Architecture
Architecture
Node + Express Architecture
Webpack Architecture
Why webpack? NPM packages ES6/ES7 with babel CSS in your browser bundle Advanced features Architecture: webpack
Architecture: webpack
Architecture: webpack Code
Architecture: webpack Code Parser
Architecture: webpack Code Parser Transforms
Architecture: webpack Code Parser Transforms Compiled App Code
Architecture: wepack "scripts": {
 "build:browser": "webpack",
 "prestart": "npm run build:browser",
 "start": "node src/server.js"
 } package.json
module.exports = {
 entry: "./src/main.jsx",
 devtool: "source-map",
 output: {
 path: __dirname + '/ src/',
 filename: "browser.js"
 }, Architecture: webpack webpack.config.js
module.exports = {
 ... Architecture: webpack module: {
 loaders: [
 {
 test: /.(jsx|es6)$/,
 exclude: /node_modules|examples/,
 loader: "babel-loader"
 },
 {
 test: /.css$/,
 loaders: ['style', 'css']
 }
 ] webpack.config.js
React Architecture
Virtual DOM Architecture: React
Virtual DOM Architecture: React
Virtual DOM Architecture: React
Virtual DOM Architecture: React
Architecture: React import ReactDOM from 'react-dom';
 ReactDOM.render( <RootComponent {...props} />, document.getElementById(‘react- content’) );
Architecture: React import { renderToString } from 'react-dom/ server';
 renderToString(<RootComponent {...props} />);
React Router Architecture
Architecture: React Router
Architecture: React Router ReactDOM.render(
 <Router routes={sharedRoutes(store)} history={browserHistory} />,
 document.getElementById('react-content')
 );
Architecture: React RouterrenderView.jsx
import React from 'react';
 import { match, RouterContext } from 'react-router';
 import { routes } from '../shared/sharedRoutes';
 
 export default function renderView(req, res, next) {
 }
 Architecture: React RouterrenderView.jsx
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
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);
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
 };

Redux Architecture
Architecture: Redux
View Architecture: Redux
View Actions Architecture: Redux
View Actions Architecture: Redux Reducers
View Actions Store Architecture: Redux Reducers
View Actions Store Architecture: Redux Reducers
Build the cart Architecture
Architecture: Create the Cart
Architecture: Create the Cart sharedRoutes.jsx
<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
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
Architecture: Create the Cart
Architecture: Create the Cart
Architecture: Create the Cart
Architecture: Create the Cart item.jsx
const Item = (props) => {
 };
 Architecture: Create the Cart item.jsx
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
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
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
Architecture: Create the Cartcart.jsx
render() {
 return (
 <div className="cart main ui segment">
 <div className="ui segment divided items">
 {this.renderItems()}
 </div> </div>
 );
 } Architecture: Create the Cartcart.jsx
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

 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

 
 export class CartComponent extends Component {} 
 function mapStateToProps(state) {}
 
 function mapDispatchToProps(dispatch) {}
 
 export default connect(mapStateToProps, mapDispatchToProps) (CartComponent); Architecture: Create the Cart cart.jsx
import fetch from 'isomorphic-fetch';
 
 export const GET_CART_ITEMS = 'GET_CART_ITEMS';
 
 export function getCartItems() { Architecture: Create the Cart cart-action-creators.es6
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
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
 });
 });
 })
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
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
Server setup Architecture
HTML output from server Architecture: Server setup
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
Architecture: Server setup 
 Promise.all(promises).then(() => {
 const serverState = store.getState();
 
 renderView.jsx
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
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
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
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
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
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
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
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
Clicking the button results doesn’t do anything Architecture: Server Setup
App State available in the browser. Architecture: Server setup
Browser setup Architecture

 const initialState = JSON.parse(window.__SERIALIZED_STATE__);
 const store = initRedux(initialState);
 Architecture: Browser setup

 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);

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

More Related Content

PDF
AtlasCamp 2015: Using add-ons to build add-ons
byAtlassian
 
PDF
Introducing Rendr: Run your Backbone.js apps on the client and server
bySpike Brehm
 
PDF
AtlasCamp 2015: Connect everywhere - Cloud and Server
byAtlassian
 
PDF
AtlasCamp 2015: Web technologies you should be using now
byAtlassian
 
PDF
Hastening React SSR - Web Performance San Diego
byMaxime Najim
 
PDF
SwiftUI and Combine All the Things
byScott Gardner
 
PDF
[FEConf Korea 2017]Angular 컴포넌트 대화법
byJeado Ko
 
PDF
Laravel 8 export data as excel file with example
byKaty Slemon
 
AtlasCamp 2015: Using add-ons to build add-ons
byAtlassian
 
Introducing Rendr: Run your Backbone.js apps on the client and server
bySpike Brehm
 
AtlasCamp 2015: Connect everywhere - Cloud and Server
byAtlassian
 
AtlasCamp 2015: Web technologies you should be using now
byAtlassian
 
Hastening React SSR - Web Performance San Diego
byMaxime Najim
 
SwiftUI and Combine All the Things
byScott Gardner
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
byJeado Ko
 
Laravel 8 export data as excel file with example
byKaty Slemon
 

What's hot

PDF
Getting Started with Combine And SwiftUI
byScott Gardner
 
PDF
MVVM with SwiftUI and Combine
byTai Lun Tseng
 
PDF
Vaadin Components @ Angular U
byJoonas Lehtinen
 
PPTX
React js
byOswald Campesato
 
PDF
Enjoy the vue.js
byTechExeter
 
PDF
Creating lightweight JS Apps w/ Web Components and lit-html
byIlia Idakiev
 
PDF
AngularJS Project Setup step-by- step guide - RapidValue Solutions
byRapidValue
 
PDF
Unlock the next era of UI design with Polymer
byRob Dodson
 
PDF
Web Components & Polymer 1.0 (Webinale Berlin)
byHendrik Ebbers
 
PDF
Building and deploying React applications
byAstrails
 
PDF
The Complementarity of React and Web Components
byAndrew Rota
 
KEY
Introduction to Palm's Mojo SDK
byBrendan Lim
 
PDF
How to Webpack your Django!
byDavid Gibbons
 
PDF
In The Trenches With Tomster, Upgrading Ember.js & Ember Data
byStacy London
 
PDF
The Role of Python in SPAs (Single-Page Applications)
byDavid Gibbons
 
PPTX
Vue business first
byVitalii Ratyshnyi
 
PDF
Vaadin Components
byJoonas Lehtinen
 
PDF
Refactoring Large Web Applications with Backbone.js
byStacy London
 
PDF
Booting up with polymer
byMarcus Hellberg
 
PDF
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
byPhil Leggetter
 
Getting Started with Combine And SwiftUI
byScott Gardner
 
MVVM with SwiftUI and Combine
byTai Lun Tseng
 
Vaadin Components @ Angular U
byJoonas Lehtinen
 
React js
byOswald Campesato
 
Enjoy the vue.js
byTechExeter
 
Creating lightweight JS Apps w/ Web Components and lit-html
byIlia Idakiev
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
byRapidValue
 
Unlock the next era of UI design with Polymer
byRob Dodson
 
Web Components & Polymer 1.0 (Webinale Berlin)
byHendrik Ebbers
 
Building and deploying React applications
byAstrails
 
The Complementarity of React and Web Components
byAndrew Rota
 
Introduction to Palm's Mojo SDK
byBrendan Lim
 
How to Webpack your Django!
byDavid Gibbons
 
In The Trenches With Tomster, Upgrading Ember.js & Ember Data
byStacy London
 
The Role of Python in SPAs (Single-Page Applications)
byDavid Gibbons
 
Vue business first
byVitalii Ratyshnyi
 
Vaadin Components
byJoonas Lehtinen
 
Refactoring Large Web Applications with Backbone.js
byStacy London
 
Booting up with polymer
byMarcus Hellberg
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
byPhil Leggetter
 

Viewers also liked

PDF
React JS and why it's awesome
byAndrew Hull
 
PDF
Quick start with React | DreamLab Academy #2
byDreamLab
 
PDF
React + Redux for Web Developers
byJamal Sinclair O'Garro
 
PDF
Angular 2 vs React. What to chose in 2017?
byTechMagic
 
PPT
React js
byJai Santhosh
 
PPTX
Compare Javascript libraries in Front End Stack
byDeepu S Nath
 
PPTX
Java script framework-roller-coaster
byRyan McColeman
 
PDF
Front End Development: The Important Parts
bySergey Bolshchikov
 
PDF
微博Lamp性能优化之路(2014)
byXinchen Hui
 
PDF
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
byRapidValue
 
PPTX
Introduction to React JS for beginners
byVarun Raj
 
PDF
Mongodb workshop
byHarun Yardımcı
 
PPTX
Javascript Frameworks Comparison
byDeepu S Nath
 
PPTX
MongoDB San Francisco 2013: Basic Sharding in MongoDB presented by Brandon Bl...
byMongoDB
 
PPTX
capitalizacion
bygustavoangel92
 
PDF
Read aloudwhitepaper
bynyia hill
 
PDF
MongoDB Shard Cluster
byAnuchit Chalothorn
 
DOCX
Biosfera ict
byDeynna Morales
 
PPTX
Wikispaces
byerika moreno
 
PPTX
Apresentação1
byana paula amorim
 
React JS and why it's awesome
byAndrew Hull
 
Quick start with React | DreamLab Academy #2
byDreamLab
 
React + Redux for Web Developers
byJamal Sinclair O'Garro
 
Angular 2 vs React. What to chose in 2017?
byTechMagic
 
React js
byJai Santhosh
 
Compare Javascript libraries in Front End Stack
byDeepu S Nath
 
Java script framework-roller-coaster
byRyan McColeman
 
Front End Development: The Important Parts
bySergey Bolshchikov
 
微博Lamp性能优化之路(2014)
byXinchen Hui
 
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
byRapidValue
 
Introduction to React JS for beginners
byVarun Raj
 
Mongodb workshop
byHarun Yardımcı
 
Javascript Frameworks Comparison
byDeepu S Nath
 
MongoDB San Francisco 2013: Basic Sharding in MongoDB presented by Brandon Bl...
byMongoDB
 
capitalizacion
bygustavoangel92
 
Read aloudwhitepaper
bynyia hill
 
MongoDB Shard Cluster
byAnuchit Chalothorn
 
Biosfera ict
byDeynna Morales
 
Wikispaces
byerika moreno
 
Apresentação1
byana paula amorim
 

Similar to Building Universal Web Apps with React ForwardJS 2017

PDF
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
byCodemotion
 
PDF
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
byLuciano Mammino
 
PPTX
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
byMskDotNet Community
 
PDF
ReactJS - frontend web developing reactjs
byducpvcontact
 
PPTX
Dan Persa, Maximilian Fellner - The recipe for scalable frontends - Codemotio...
byCodemotion
 
PDF
React starter-kitでとっとと始めるisomorphic開発
byYoichi Toyota
 
PDF
How we improved performance at Mixbook
byAnton Astashov
 
PDF
Universal JS Applications with React
byThanh Trần Trọng
 
PDF
WordCamp Bucharest 2017
byAlexandra Anghel
 
PDF
Server side rendering with React and Symfony
byIgnacio Martín
 
PDF
Performance and Scalability Art of Isomorphic React Applications
byDenis Izmaylov
 
PDF
Creating a full stack web app with python, npm, webpack and react
byAngela Kristine Juvet Branaes
 
PDF
WordCamp Athens 2017 - Building an E-commerce Progressive Web App with React ...
byAlexandra Anghel
 
PDF
Universal JavaScript - Frontend United Athens 2017
byLuciano Mammino
 
PDF
The Art and Science of Shipping Ember Apps
byJesse Cravens
 
PDF
Creating Hyper Performant Web Apps with React
byJp DeVries
 
PPTX
One code Web, iOS, Android
byArtem Marchenko
 
PPTX
React JS CONCEPT AND DETAILED EXPLANATION
byharshavardhanjuttika
 
PDF
JSFest 2019: Technology agnostic microservices at SPA frontend
byVlad Fedosov
 
PDF
Universal JavaScript
by名辰 洪
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
byCodemotion
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
byLuciano Mammino
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
byMskDotNet Community
 
ReactJS - frontend web developing reactjs
byducpvcontact
 
Dan Persa, Maximilian Fellner - The recipe for scalable frontends - Codemotio...
byCodemotion
 
React starter-kitでとっとと始めるisomorphic開発
byYoichi Toyota
 
How we improved performance at Mixbook
byAnton Astashov
 
Universal JS Applications with React
byThanh Trần Trọng
 
WordCamp Bucharest 2017
byAlexandra Anghel
 
Server side rendering with React and Symfony
byIgnacio Martín
 
Performance and Scalability Art of Isomorphic React Applications
byDenis Izmaylov
 
Creating a full stack web app with python, npm, webpack and react
byAngela Kristine Juvet Branaes
 
WordCamp Athens 2017 - Building an E-commerce Progressive Web App with React ...
byAlexandra Anghel
 
Universal JavaScript - Frontend United Athens 2017
byLuciano Mammino
 
The Art and Science of Shipping Ember Apps
byJesse Cravens
 
Creating Hyper Performant Web Apps with React
byJp DeVries
 
One code Web, iOS, Android
byArtem Marchenko
 
React JS CONCEPT AND DETAILED EXPLANATION
byharshavardhanjuttika
 
JSFest 2019: Technology agnostic microservices at SPA frontend
byVlad Fedosov
 
Universal JavaScript
by名辰 洪
 

Recently uploaded

PPTX
CBD Belgium 2025 - The adventures of a Microsoft 365 Platform Owner.pptx
byJasper Oosterveld
 
PDF
Rivian's Push Notification Sub Stream with Mega Filter by Marcus Kim & Saahil...
byScyllaDB
 
PDF
KV Caching Strategies for Latency-Critical LLM Applications by John Thomson
byScyllaDB
 
PDF
2025 October Patch Tuesday
byIvanti
 
PDF
Beyond Generative AI: Creating Demand for Compute in the 2030s
byReidar Wasenius
 
PDF
What is Google Cloud Platform (GCP)? A 5-Minute Guide for Beginners (2025)
byTeleglobal International
 
PPTX
"Towards React Server Components in Clojure", Roman Liutikov
byFwdays
 
PDF
Unlocking Full-Stack Observability for AIOps: A Precisely Ironstream for Big ...
byPrecisely
 
PDF
A 4-Terminal Approach to Validating Charge Conservation in MOSFET Compact Models
byEalwan Lee
 
PDF
Agentic AI Guide for Enterprise Use-cases
byDebmalya Biswas
 
PDF
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
PDF
The Journey Is The Reward - Apple Maps Travel Companion
byJohn Andrews
 
PDF
Atlantix is an AI-first venture studio, building companies with AI at the core
byadmin625551
 
PPTX
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
PDF
UiPath DevConnect 2025: Introduction to Agentic Automation
byDianaGray10
 
PDF
How to Measure Microsoft 365 Copilot Success and Manage AI Risk: Advanced Str...
byNikki Chapple
 
PDF
Fairness and Bias in AI Ethics and Explainability
byShiwani Gupta
 
PDF
Ethical Initiatives in AI and accountability.pdf
byShiwani Gupta
 
PDF
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
PDF
AGV PROTOCOL BRAND KIT COMPLETE VIEW.pdf
byfagbolade
 
CBD Belgium 2025 - The adventures of a Microsoft 365 Platform Owner.pptx
byJasper Oosterveld
 
Rivian's Push Notification Sub Stream with Mega Filter by Marcus Kim & Saahil...
byScyllaDB
 
KV Caching Strategies for Latency-Critical LLM Applications by John Thomson
byScyllaDB
 
2025 October Patch Tuesday
byIvanti
 
Beyond Generative AI: Creating Demand for Compute in the 2030s
byReidar Wasenius
 
What is Google Cloud Platform (GCP)? A 5-Minute Guide for Beginners (2025)
byTeleglobal International
 
"Towards React Server Components in Clojure", Roman Liutikov
byFwdays
 
Unlocking Full-Stack Observability for AIOps: A Precisely Ironstream for Big ...
byPrecisely
 
A 4-Terminal Approach to Validating Charge Conservation in MOSFET Compact Models
byEalwan Lee
 
Agentic AI Guide for Enterprise Use-cases
byDebmalya Biswas
 
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
The Journey Is The Reward - Apple Maps Travel Companion
byJohn Andrews
 
Atlantix is an AI-first venture studio, building companies with AI at the core
byadmin625551
 
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
UiPath DevConnect 2025: Introduction to Agentic Automation
byDianaGray10
 
How to Measure Microsoft 365 Copilot Success and Manage AI Risk: Advanced Str...
byNikki Chapple
 
Fairness and Bias in AI Ethics and Explainability
byShiwani Gupta
 
Ethical Initiatives in AI and accountability.pdf
byShiwani Gupta
 
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
AGV PROTOCOL BRAND KIT COMPLETE VIEW.pdf
byfagbolade
 

Building Universal Web Apps with React ForwardJS 2017

  • 1.
    Building Universal Web Appswith 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.
  • 4.
    Write code once,run it in two environments (node & browser).
  • 5.
    Overview of Universal/IsomorphicWeb Apps Why would you want to build an universal web app Universal App Architecture Challenges and Tradeoffs Topics:
  • 6.
    Overview: What isa Universal App?
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    #1 SEO Getting yourwebsite (or cat video) to rank the highest can make or break your success as a business. Why build it?
  • 29.
    #2 Perceived Performance Users shouldthink 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.
  • 32.
    In this section Technologiesrequired 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 Technologiesrequired 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 Technologiesrequired to build an universal app Loading a single page of the app in the isomorphic flow Architecture Code: bit.ly/universal-app-react
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
    Why webpack? NPM packages ES6/ES7with babel CSS in your browser bundle Advanced features Architecture: webpack
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
    Architecture: webpack Code ParserTransforms 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.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
    Architecture: React import ReactDOMfrom 'react-dom';
 ReactDOM.render( <RootComponent {...props} />, document.getElementById(‘react- content’) );
  • 54.
    Architecture: React import {renderToString } from 'react-dom/ server';
 renderToString(<RootComponent {...props} />);
  • 55.
  • 56.
  • 57.
    Architecture: React Router ReactDOM.render(
 <Routerroutes={sharedRoutes(store)} history={browserHistory} />,
 document.getElementById('react-content')
 );
  • 58.
  • 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 RouterrenderView.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.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
    Architecture: Create theCart sharedRoutes.jsx
  • 73.
    <Route path="/" component={App}>
 <Routepath="/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 theCart 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.
  • 76.
  • 77.
  • 78.
  • 79.
    const Item =(props) => {
 };
 Architecture: Create the Cart item.jsx
  • 80.
    return (
 <div className="item">
 <divclassName="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">
 <divclassName="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">
 <divclassName="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.
  • 84.
    render() {
 return (
 <divclassName="cart main ui segment">
 <div className="ui segment divided items">
 {this.renderItems()}
 </div> </div>
 );
 } Architecture: Create the Cartcart.jsx
  • 85.
    render() {
 return (
 <divclassName="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 CartComponentextends 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 theCart 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 theCart 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.
  • 94.
    HTML output fromserver Architecture: Server setup
  • 95.
    Architecture: Server setup exportdefault 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 constHTML = (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 constHTML = (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 constHTML = (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 constHTML = (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 buttonresults doesn’t do anything Architecture: Server Setup
  • 106.
    App State availablein the browser. Architecture: Server setup
  • 107.
  • 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.
  • 111.
  • 112.
  • 113.
  • 114.
    Challenges and Tradeoffs if(process.env.BROWSER) {
 // browser only code
 }
  • 115.
  • 116.
    Server Performance Strategies Onlyrender above the fold content on the server (SEO tradeoff) Use streams Caching Challenges and Tradeoffs
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
    Two Options In memorycaching CDN/Edge caching Walmart Labs Server Side Render Cache (Electrode) Challenges and Tradeoffs
  • 122.
  • 123.
    Building Universal Appsrequires you to think about your application flow in a new way.