Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic JavaScript with ReactJS

Isomorphic JavaScript with ReactJS

C2dc413b54db210547885a5adc437e68?s=128

Kristin Baumann

April 20, 2017
Tweet

Transcript

  1. Using Isomorphic JavaScript with ReactJS in your next Project Why

    & How By Kristin Baumann
  2. Kristin Baumann > Bachelor in Computational Visualistics > Data Vis

    Developer in Sydney, AU > Senior Frontend Developer at NFQ in Ho Chi Minh City, VN > Product Design & Prototyping Manager at HomeToGo in Berlin @kristin_baumann mail@kristin-baumann.com www.kristin-baumann.com
  3. What are Isomorphic JavaScript apps? > Applications that share the

    same JS code between browser client and web application server > Next evolutionary step in advancement of JS
  4. 1st + Subsequent Requests Full HTML Small JS Client Server

    JS PHP, Ruby, Java, ... Application Slow page transitions (full page reload) SEO friendly, optimised initial page load Classic Web Application
  5. 1st + Subsequent Requests Full HTML Small JS Client Server

    JS PHP, Ruby, Java, ... Application Slow page transitions (full page reload) SEO friendly, optimised initial page load with AJAX Classic Web Application AJAX App
  6. Single Page Application Slow initial page load, not SEO friendly

    1st Request Empty HTML Big JS Client Server JS PHP, Ruby, Java, ... Application Subsequent Requests High responsiveness on page transitions
  7. Combination of Classic Web Application & Single-Page Application: 1st Request

    Client Server App Full HTML Big JS Subsequent Requests JS Node.js Isomorphic Application
  8. > Fast initial page load > No blank page >

    Good setup for SEO > Easily indexable by search engines > Optimised page transitions within SPA > No expensive roundtrip to server > Single UI code base > No duplication of efforts & better maintainability > Clear separation of responsibility between FE & BE engineers • Performance • SEO • Responsiveness • Stable Development Advantages of Isomorphic JS
  9. • ”There are only two hard things in Computer Science:

    cache invalidation and naming things.” - Phil Karlton • Isomorphic JavaScript • Universal JavaScript • vs. Mapping between browser and server functionality JS runs on browsers, servers, mobile & embedded devices A B D C A B D C Naming
  10. Building Isomorphic JS apps with React JS © Geek And

    Poke
  11. ... only minimal bits. ... the entire application. How much

    do client and server share? View Templates View Logic Routing Logic Models Controllers Few Abstractions Many Duplications Many Abstractions No Duplications Isomorphic JS as a Spectrum
  12. ... only minimal bits. ... the entire application. How much

    do client and server share? View Templates View Logic Routing Logic Models Controllers Few Abstractions Many Duplications Many Abstractions No Duplications https://github.com/kristinbaumann Let the code talk! Isomorphic JS as a Spectrum
  13. 1st Request Browser Full HTML JS loaded async Server NodeJS

    application (express, hapi, ...) React - renders shared component as string - builds full HTML page with - component string (Serverside Rendering) - React mount node + script to React bundle (for Clientside Rendering) Subsequent Requests within SPA 1 2 3 Sharing the View Layer - Process
  14. Node JS application • With Express JS • server.js 1

  15. Serverside Rendering with React • with ReactDOMServer.renderToString() • server.js •

    template.js 2
  16. Clientside Rendering • with ReactDOM.render() • client.js 3

  17. > Serverside renderToString() and clientside render() should not differ! >

    Check for equality with data-react-checksum: > In case of differences: Rerendering of the DOM, causing bad performance Client picks up where the server left off
  18. • client.js - Rehydrate on client • template.js – Hand

    over to client in window object • server.js - Convert state to string Preserving the app state
  19. > Routing (e.g. with React Router) > Handling & Fetching

    Data (e.g. with Redux) > Local Storage & Cookies > Transpiling & Bundling (e.g. with Webpack) There is more to consider... https://github.com/kristinbaumann Code Examples:
  20. Questions? @kristin_baumann mail@kristin-baumann.com www.kristin-baumann.com @kristinbaumann