Front End London: Universal React

Universal JavaScript

@Jack_Franklin, Pusher

Source: GDS Blog, 2013

"Surprisingly, the propor2on of people that have explicitly disabled JavaScript
or use a browser that doesn't support JavaScript, only makes up a small slice of people that don't run JavaScript."

"Progressive enhancement has never been about users who've turned JavaScript
oﬀ, or least it wasn't for me." Jake Archibald, "Progressive Enhancement S:ll Important"

Everyone has JS, right? • On a train / in
a tunnel / etc • HTTP request hangs • Firewalls • ISP is interfering • A browser addon is messing with you • Your CDN is down Stuart Langridge's Flowchart

Think about if this is right for you!

Cu#ng Edge! We're really s*ll at the early stages of
ﬁguring out how this stuﬀ works. Some of the code shown here isn't the easiest, or the APIs aren't that straight forward. This will change as we learn more. Don't expect this to be 100% smooth!

React paved the way

Code and demos: h,ps:/ /github.com/jackfranklin/universal-react- talk/tree/fel

A standard React app: class MyApp extends React.Component { render()
{ ... } } ReactDOM.render( <MyApp />, document.getElementById('app') )

Server side: class MyApp extends React.Component { render() { ...
} } ReactDOM.renderToString(<MyApp />)

// some imports left out to save space import React
from 'react'; import MyApp from './component'; import { renderToString } from 'react-dom/server'; const app = express(); app.get('*', (req, res) => { const markup = renderToString(<MyApp />); res.render('index', { markup }); });

renderToString When your HTML is going to be picked up
by React on the client renderToSta*cMarkup When your HTML is never going to be edited by client-side React

<!DOCTYPE html> <html> <head> <title>My App</title> </head> <body> <p data-reactid=".nbhys48o3k"
data-react-checksum="-1312485142">Hello from React</p> </body> </html>

Going Client side • Shared set of components that are
environment agnos4c • A server rendering step (like we just saw) • A client rendering step • A bundler to generate our client side JavaScript

Agnos&c Components

Webpack

Rendering on the Client

Upda%ng our server template. <body>  <div id="app"><%- markup %></div>  <script src="build.js"></script> </body>

Crea%ng client.js: import React from 'react'; import ReactDOM from 'react-dom';
import MyApp from './component'; ReactDOM.render( <MyApp />, document.getElementById('app') );

Same Components on client and server

npm install --save-dev webpack \ babel-loader \ babel-preset-es2015 \ babel-preset-react
\ babel-yet-another-thing-lol-jk

Create .babelrc { "presets": ["es2015", "react"] }

Create webpack.conﬁg.js var path = require('path'); module.exports = { entry:
path.join(process.cwd(), 'client.js'), output: { path: './public/', filename: 'build.js' }, module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel' } ] } }

Run webpack: (PS: in produc.on we'd minify, etc!) > webpack
Hash: 78c865d5593fe910f823 Version: webpack 1.12.12 Time: 4948ms Asset Size Chunks Chunk Names build.js 690 kB 0 [emitted] main + 160 hidden modules (Tip: webpack -w for con,nuous rebuilds)

An interac*ve component export default class MyApp extends React.Component {
constructor() { super(); this.state = { count: 0 }; } onClick() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <button onClick={this.onClick.bind(this)}>Click Me</button> <p>Count: { this.state.count }</p> </div> ); } }

A read-only experience is way be3er than no experience.

This isn't about giving every user 100% func7onality every 7me.

Rou$ng

react-router The defacto, prac.cally standard rou.ng solu.on for React. h"ps:/
/github.com/rackt/react-router

First we need some more components, star1ng with components/ app.js:
import React from 'react'; export default class AppComponent extends React.Component { render() { return ( <div> <h2>My web 2.0 app</h2> { this.props.children } </div> ); } } this.props.children are the nested routes.

And then components/index.js: import React from 'react'; export default class
IndexComponent extends React.Component { render() { return ( <div> <p>This is the index page</p> </div> ); } }

Deﬁne our routes: import { Route } from 'react-router'; import
React from 'react'; import AppComponent from './components/app'; import IndexComponent from './components/index'; export const routes = ( <Route path="" component={AppComponent}> <Route path="/" component={IndexComponent} /> </Route> );

Match against the URL on the server. Gets a bit
hairy, s-ck with me! React Router server side guide

// our newly defined routes import { routes } from
'./routes'; // match is responsible for matching routes against a URL // RouterContext renders the components in the matched routes import { match, RouterContext } from 'react-router';

app.get('*', (req, res) => { match({ routes, location: req.url },
(error, redirectLocation, renderProps) => { if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { res.render('index', { markup: renderToString(<RouterContext {...renderProps} />) }); } else { res.status(404).send('Not found') } }) });

Let's break that down...

// take our app's routes, and the URL of the
request match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { // error: given if something went wrong matching a route // redirectLocation: returned if the URL matches a redirect // renderProps: given if a route was matched and we can render ... });

if (error) { // if there was an error, 500
with the error message // you might show a custom error HTML page here res.status(500).send(error.message) } else if (redirectLocation) { ... }

... } else if (redirectLocation) { // if we need
to redirect, redirect to the new URL res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { ... }

... } else if (renderProps) { // if we have
renderProps that means we have a match and can render res.render('index', { // RouterContext is React Router's wrapper around our app // and renderProps contains all the info // React Router needs to render our app markup: renderToString(<RouterContext {...renderProps} />) }); } else { ... }

} else { // if we get here, it's not
an error, redirect or match // hence, 404! res.status(404).send('Not found') }

Let's add an about page!

components/about.js: import React from 'react'; export default class AboutComponent extends
React.Component { render() { return <p>Rockstar developer</p>; } }

routes.js: import AppComponent from './components/app'; import IndexComponent from './components/index'; import
AboutComponent from './components/about'; import React from 'react'; import { Route } from 'react-router'; export const routes = ( <Route path="" component={AppComponent}> <Route path="/" component={IndexComponent} /> <Route path="/about" component={AboutComponent} /> </Route> );

And some links... ... render() { return ( <div> <h2>My
web 2.0 app</h2> <Link to="/">Home</Link> <Link to="/about">About</Link> { this.props.children } </div> ); } ...

With no client side bundle, this works perfectly:

Upda%ng the client side: import React from 'react'; import ReactDOM
from 'react-dom'; import { Router, browserHistory } from 'react-router'; import { routes } from './routes'; ReactDOM.render( <Router routes={routes} history={browserHistory} />, document.getElementById('app') ) And then rerun webpack.

Dealing with Data on the server and client

(Caveat: this area is s-ll WIP) Lots of unknowns!

1. We want to be able to fetch data on
the server and/or on the client. 2. If the data is loaded on the server and rendered to the client, we ideally want to avoid making the request again.

React Resolver

code/with-react-resolver has an example. class IndexComponent extends React.Component { render()
{ return ( <div> <p>This is the index page</p> <p>My github repo count: { this.props.github.public_repos }</p> </div> ); } } export default resolve('github', (props) => { return fetch('https://api.github.com/users/jackfranklin').then((data) => { return data.json(); }); })(IndexComponent);

Client: ... import { Resolver } from 'react-resolver'; Resolver.render(() =>
{ return <Router history={browserHistory} routes={routes} /> }, document.getElementById('app'));

Server: import { Resolver } from 'react-resolver'; ... Resolver .resolve(()
=> <RouterContext {...renderProps} />) .then(({ Resolved, data }) => { res.render('index', { markup: renderToString(<Resolved />), data: JSON.stringify(data) }); });

Template: <div id="app"><%- markup %></div> <script>window.__REACT_RESOLVER_PAYLOAD__ = <%- data %></script>
<script src="build.js"></script>

• Update the server side rendering to include window.__REACT_RESOLVER_PAYLOAD__. •
Update the client side rendering to use React Resolver. • All data is resolved on the server, rendered and then used to populate data on the client.

Code and Demos These slides and all the demos are
on GitHub. jackfranklin/universal-react-talk Please send me ques,ons: @Jack_Franklin or jack@pusher.com.

Universal JavaScript is here to stay. The techniques, libraries and
approaches will change over 7me. There's plenty to ﬁgure out in this space! Long term I expect frameworks to do more, and it become even easier for developers to take advantage.

Server side by default?

Further Reading • Universal React on 24ways • How we
built the new gocardless.com • GoCardless.com repo • Universal React Example app

If you dig React I can make you dig it
more! Day long React workshop in London: • 10 June

Thanks! @Jack_Franklin javascriptplayground.com h"p:/ /speakerdeck.com/jackfranklin jack@pusher.com

Front End London: Universal React

Front End London: Universal React

More Decks by Jack Franklin

Other Decks in Technology

Featured

Transcript