@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 

No content

No content

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 

No content

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 

const router = new Router(on => { on('*', async (state, next) => { const component = await next(); return component && {component}; }); on('/login', async () => ); }); 

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? 

No content

HOW IT ACTUALLY WORKS 

No content

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(); res.status(200).send(`\n${html}`); } catch (err) { next(err); } }); server.listen(port, () => {}); 

DEMO TIME 

@CPHFRONT ⎯ @KSMANDERSEN