Universal JavaScript with React and Node

Why you should care about isomorphic JavaScript and the benefits of rendering your frontend code on the backend.

https://www.youtube.com/watch?v=CSrDUfinA2Y

Presented at JavaScript Meetup Ljubljana on Oct 22, 2015

Transcript

1. UNIVERSAL JAVASCRIPT WITH REACT & NODE DANE ŠOBA LEAD DEV @ MEGABON.EU
2. UNIVERSAL JAVASCRIPT ▸ Single JS codebase everywhere ▸ Browser + server (+ mobile?) ▸ a.k.a Isomorphic JavaScript
3. WHY UNIVERSAL JAVASCRIPT?
4. EVOLUTION OF WEB APPS
5. IN THE BEGINNING, THERE WAS HTML
6. STATIC HTML ▸ Display HTML Browser Server ▸ Serve HTML
7. SERVERSIDE SCRIPTING ▸ Display HTML Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML
8. LET THERE BE JAVASCRIPT
9. JAVASCRIPT ▸ Display HTML ▸ Manipulate page Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML
10. AJAX ▸ Display HTML ▸ Manipulate page ▸ Retrieve data Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML
11. THEN WE REST-ED
12. APIS ▸ Display HTML ▸ Change page ▸ Retrieve data Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML ▸ Serve data API
13. WEB APPS ▸ Display HTML ▸ Business logic ▸ Templating ▸ Change page ▸ Retrieve data Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML ▸ Serve data API
14. WEB APPS ▸ Display HTML ▸ Business logic ▸ Templating ▸ Change page ▸ Retrieve data Browser Server ▸ Database ▸ Business logic ▸ Templating ▸ Render HTML ▸ Serve data API Code duplication JavaScript PHP/Ruby/Java/…
15. SINGLE PAGE APPS ▸ Render HTML ▸ Business logic ▸ Templating ▸ Change page ▸ Retrieve data Browser Server ▸ Serve JS ▸ Serve data ▸ Database ▸ Business logic API
16. SINGLE PAGE APP BENEFITS ▸ More interactivity ▸ Faster responsiveness ▸ Single JS codebase ▸ No duplication of logic ▸ APIs for data access
17. SINGLE PAGE APP PROBLEMS ▸ Initial page load ▸ Load script -> Load data -> Render ▸ SEO ▸ Mobile ▸ Requires JavaScript
18. UNIVERSAL JAVASCRIPT APPS ▸ Render HTML ▸ Business logic ▸ Templating ▸ Retrieve data ▸ Change page Browser Server ▸ Render HTML ▸ Business logic ▸ Templating ▸ Retrieve data ▸ Serve data ▸ Database ▸ Business logic API app.js
19. WHO’S USING UNIVERSAL JAVASCRIPT? ▸ AirBnB ▸ Facebook ▸ Instagram ▸ Netflix
20. UNIVERSAL JAVASCRIPT IN PRACTICE
21. PRODUCT PLACEMENT MEGABON NEXT ▸ Next version of travel deal website ▸ Highly interactive ▸ Map based ▸ Hotels & flights search ▸ megabon.eu
24. ARCHITECTURE Browser Server app.js API adapters API backend app.js API adapters Routing, rendering, events Routing, rendering renderApp() Renders HTML Fetch data (HTTP) Fetch data (HTTP) Node.js
25. BUILDING BLOCKS ▸ React ▸ Webpack ▸ Routing
26. REACT ▸ Render page in any state ▸ Virtual DOM ▸ Diff changes ▸ Apply to DOM
27. REACT VIRTUAL DOM
28. REACT - SERVERSIDE ▸ Render entire page to static HTML ▸ Reuse rendered HTML in browser ▸ Browser continues where server left off
29. WEBPACK ▸ Build common.js modules for browser ▸ Use require() and modules ▸ npm install modules ▸ Supports node builtin utility apis ▸ Preprocessing code (ES6 to ES5, React JSX, …) ▸ Live reload for dev
31. WEBPACK + NPM PACKAGES ▸ Can use a lot of NPM packages client/server ▸ Can’t use Node system APIs on browser ▸ Can’t use DOM/window dependencies on server ▸ React componentDidLoad for client side code ▸ Wrap client side requires in a ClientSide component not rendered on the server
32. NODE SERVERSIDE ▸ require() app code directly ▸ use JSX loader for React JSX files ▸ modules are shared between requests ▸ watch out for singletons / global / module state ▸ 1 app instance per request
33. NODE SERVERSIDE - SINGLETONS ▸ Avoid singletons ▸ Avoid mutable module state / global state ▸ Requests reuse same modules ▸ Prefer instance state and immutable module state ▸ Object.freeze to ensure immutability
34. ROUTING ▸ App URLs ▸ Data fetching ▸ Link generation ▸ App actions
35. ROUTER.JS ▸ Micro lib used by Ember.js ▸ Nested routes with params and wildcards ▸ Async controllers with promises ▸ Link generation with named routes ▸ Not on NPM ▸ Not used much outside of Ember
36. OTHER JS ROUTERS ▸ Backbone ▸ tied to jQuery, no promises support ▸ ReactRouter ▸ No link generation (hardcoded strings) ▸ Cherytree ▸ New, very similar to ember router, React friendly
37. SERVERSIDE RENDERING ▸ Handle all app urls with router.js ▸ App controller loads data ▸ API requests go to localhost ▸ React page rendered to HTML ▸ Some API data rendered to HTML
38. CLIENTSIDE RENDERING ▸ App controller loads data ▸ API requests go to API server ▸ Continue from server HTML ▸ Render entire page on change ▸ Single-page app ▸ pushState for url changes
39. EXPERIENCES ▸ Serverside rendering code is relatively simple ▸ routing & rendering ▸ Handling serverside redirects ▸ Handling cookies ▸ Debug app code in browser 95% of the time ▸ APIs handle business logic
40. UNIVERSAL JAVASCRIPT TODAY & FUTURE
41. UNIVERSAL JAVASCRIPT TODAY ▸ Lack of mature full-stack solutions ▸ Rendr (AirBnB, Backbone based) ▸ Meteor.js ▸ Roll your own with React ▸ isomorphic.net
42. UNIVERSAL JAVASCRIPT TODAY ▸ Useful for highly interactive SPAs with SEO ▸ Promising, but not a silver bullet (yet?)
43. UNIVERSAL JAVASCRIPT FUTURE ▸ Ember server side rendering ▸ Angular 2.0 server side rendering ▸ Meteor.js ▸ React - community libs
44. QUESTIONS?
45. EXTRAS
46. API ADAPTERS ▸ API adapters wrap calls to API backend ▸ app.apis.session.currentUser() ▸ app.apis.deals.offer(id) ▸ returns promises ▸ SuperAgent for HTTP ▸ can enhance with caching, error handling, etc.
47. I18N.JS - SINGLETON ▸ Lib for rails-style translations ▸ singleton shared between requests ▸ requests use different locales var i18n = require("./i18n"); i18n.locale = req.locale;
48. I18N.JS - SINGLETON WORKAROUND ▸ Delete the module cache before require delete require.cache[require.resolve("./i18n")]; var i18n = require("./i18n"); i18n.locale = req.locale;