Isomorphic JavaScript with ReactJS

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