Isomorphic Web Apps with React

Transcript

1. @CPHFRONT ⎯ @KSMANDERSEN
2. ISOMORPHIC WEB APPS
3. IN THE BEGINNING
4. AND THUS JAVASCRIPT WAS BORN
5. THE CRAZY ENGINEERS @ GOOGLE
6. LET'S RUN JAVASCRIPT ON SERVERS
7. ISOMORPHIC WEB APPS
8. UNIVERSAL WEB APPS
9. 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
12. CLIENT-SIDE RENDERING > Rendering done client-side takes load away from the server > Consecutive page navigation is very fast > Fancy interactions, animations and rainbows
13. 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)
14. 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
16. WHY IS REACT GREAT FOR ISOMORPHIC WEB APPS?
17. COMPONENTS COMPONENTS COMPONENTS
18. THE VIRTUAL DOM
19. await Router.dispatch({ path: req.path, query: req.query, context }, (state, component) => { data.body = ReactDOM.renderToString(component); });
20. DE-COUPLED ROUTING
21. const router = new Router(on => { on('*', async (state, next) => { const component = await next(); return component && <App context={state.context}>{component}</App>; }); on('/login', async () => <LoginPage />); });
22. EXPRESS.JS
23. const server = global.server = express(); server.get('*', async (req, res, next) => { res.status(200).send(`Hello World`); });
24. GREAT HOW DO I GET STARTED?
26. HOW IT ACTUALLY WORKS
28. 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, () => {});
29. DEMO TIME
30. @CPHFRONT ⎯ @KSMANDERSEN