Isomorphic Web Apps with React

@CPHFRONT ⎯ @KSMANDERSEN

ISOMORPHIC WEB APPS

IN THE BEGINNING

AND THUS JAVASCRIPT WAS BORN

THE CRAZY ENGINEERS @ GOOGLE

LET'S RUN JAVASCRIPT ON SERVERS

ISOMORPHIC WEB APPS

UNIVERSAL WEB APPS

WHAT IT IS > An app that runs both on
the server and the client > Rendering can be done both by the server and the browser > The apps share at least 90% of the same code

CLIENT-SIDE RENDERING > Rendering done client-side takes load away from
the server > Consecutive page navigation is very fast > Fancy interactions, animations and rainbows

SERVER-SIDE RENDERING > More load on the server for rendering
> Page content visible to bots, search engines and crazy people > The initial page load is faster (no app to boot client- side)

ISOMORPHIC RENDERING > The best of both worlds > Fast
initial page load (server-side rendering) > Consecutive page loads are very fast (client-side rendering) > Page content visible for bots, search engines and crazy people

WHY IS REACT GREAT FOR ISOMORPHIC WEB APPS?

COMPONENTS COMPONENTS COMPONENTS

THE VIRTUAL DOM

await Router.dispatch({ path: req.path, query: req.query, context }, (state, component)
=> { data.body = ReactDOM.renderToString(component); });

DE-COUPLED ROUTING

EXPRESS.JS

const server = global.server = express(); server.get('*', async (req, res,
next) => { res.status(200).send(`Hello World`); });

GREAT HOW DO I GET STARTED?

HOW IT ACTUALLY WORKS

SERVER.JS const server = global.server = express(); server.get('*', async (req,
res, next) => { try { const data = { title: '', description: '', css: [], body: '', entry: assets.main.js }; const context = { insertCss: styles => data.css.push(styles._getCss()), ... }; await Router.dispatch({ path: req.path, query: req.query, context }, (state, component) => { data.body = ReactDOM.renderToString(component); data.css = css.join(''); }); const html = ReactDOM.renderToStaticMarkup(<Html {...data} />); res.status(200).send(`<!doctype html>\n${html}`); } catch (err) { next(err); } }); server.listen(port, () => {});

DEMO TIME

@CPHFRONT ⎯ @KSMANDERSEN

Isomorphic Web Apps with React

Isomorphic Web Apps with React

Kristian Andersen

More Decks by Kristian Andersen

Other Decks in Programming

Featured

Transcript

@CPHFRONT ⎯ @KSMANDERSEN