Building Universal Web Apps with React ForwardJS 2017

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

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

Single Page Application (SPA)
Overview

#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?

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

Why webpack?
NPM packages
ES6/ES7 with babel
CSS in your browser bundle
Advanced features
Architecture: webpack

Code Parser

Code Parser Transforms

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" 
},
webpack.config.js

module.exports = { 
...
module: { 
loaders: [ 
{ 
test: /.(jsx|es6)$/, 
exclude: /node_modules|examples/, 
loader: "babel-loader" 
}, 
{ 
test: /.css$/, 
loaders: ['style', 'css'] 
} 
]
webpack.config.js

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

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

 
} 
match(matchOpts, handleMatchResult);
renderView.jsx

 
const matchOpts = { 
routes: routes(), 
location: req.url 
}; 
 
 
} 
renderView.jsx

 
}; 
 
 
} 
const handleMatchResult = (error, redirectLocation, renderProps) =>
{ 
if (!error && !redirectLocation && renderProps) {
// render code
}
}
renderView.jsx
};

View
Actions
Architecture: Redux

View
Actions
Architecture: Redux
Reducers

View
Actions
Store
Architecture: Redux
Reducers

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>
sharedRoutes.jsx

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

item.jsx

const Item = (props) => { 
}; 
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> 
); 
}; 
item.jsx

return ( 
</div> 
{props.name} 
</div> 
${props.price} 
</div> 
</div> 
); 
return ( 
</div> 
{props.name} 
</div> 
${props.price} 
</div> 
</div> 
); 
}; 
}; 
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>
</div> 
); 
}
<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>
</div> 
); 
}
cart.jsx

import cartActions from '../shared/cart-action-creators.es6'; 
 
export class CartComponent extends Component { 
 
static loadData() { 
return [ 
cartActions.getCartItems 
]; 
} 
render() {} 
} 
cart.jsx

export class CartComponent extends Component {}
 
function mapStateToProps(state) {} 
 
function mapDispatchToProps(dispatch) {} 
 
export default connect(mapStateToProps, mapDispatchToProps)
(CartComponent);
cart.jsx

import fetch from 'isomorphic-fetch'; 
 
export const GET_CART_ITEMS = 'GET_CART_ITEMS'; 
 
export function getCartItems() {
cart-action-creators.es6

 
 
export function getCartItems() { 
return (dispatch) => { 
return fetch('http://localhost:3000/api/user/cart', { 
method: 'GET' 
})

 
 
export function getCartItems() { 
return (dispatch) => { 
return fetch('http://localhost:3000/api/user/cart', { 
method: 'GET' 
})
.then((response) => { 
return response.json().then((data) => { 
return dispatch({ 
type: GET_CART_ITEMS, 
data: data.items 
}); 
}); 
})

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

 
return { 
...state, 
}; 
} 
}
 
return { 
...state, 
}; 
} 
}
cart-reducer.es6

HTML output from server
Architecture: Server setup

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

 
Promise.all(promises).then(() => { 
const serverState = store.getState(); 
 
renderView.jsx

 
 
const stringifiedServerState = JSON.stringify(serverState);
 
 
renderView.jsx

 
 
 
 
 
const app = renderToString( 
<Provider store={store}> 
<RouterContext routes={routes} {...renderProps} /> 
</Provider> 
);
renderView.jsx

 
 
 
 
 
</Provider> 
);
 
const html = renderToString( 
<HTML html={app} serverState={stringifiedServerState} /> 
); 
 
 
</Provider> 
);
renderView.jsx

 
 
 
 
 
</Provider> 
);
 
); 
 
return res.send(`<!DOCTYPE html>${html}`);
 
</Provider> 
); 
); 
 
renderView.jsx

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

return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
html.jsx

return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
html.jsx

return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
return ( 
<html lang="en"> 
<head></head> 
<body> 
<div 
__html: ` 
` 
}}/> 
</body> 
</html> 
); 
};
html.jsx

Clicking the button results doesn’t do anything
Architecture: Server Setup

App State available in the browser.

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

Competing envs

if (process.env.BROWSER) { 
// browser only code 
}

Performance

Server Performance Strategies
Only render above the fold content on the server (SEO tradeoff)
Use streams
Caching

Caching

Two Options
In memory caching
CDN/Edge caching
Walmart Labs Server Side Render Cache (Electrode)

Complexity

Building Universal Apps requires you to think about your
application flow in a new way.

Building Universal Web Apps with React ForwardJS 2017

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Building Universal Web Apps with React ForwardJS 2017

Similar to Building Universal Web Apps with React ForwardJS 2017 (20)

Recently uploaded

Recently uploaded (20)

Building Universal Web Apps with React ForwardJS 2017