Using Isomorphic JavaScript
with ReactJS in your next Project
Why & How
By Kristin Baumann
Slide 2
Slide 2 text
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
[email protected]
www.kristin-baumann.com
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Combination of
Classic Web Application &
Single-Page Application:
1st Request
Client Server
App
Full HTML
Big JS
Subsequent
Requests
JS Node.js
Isomorphic Application
Slide 8
Slide 8 text
> 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
Slide 9
Slide 9 text
• ”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
... 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
Slide 12
Slide 12 text
... 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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Node JS application
• With Express JS
• server.js
1
Slide 15
Slide 15 text
Serverside Rendering with React
• with ReactDOMServer.renderToString()
• server.js
• template.js
2
Slide 16
Slide 16 text
Clientside Rendering
• with ReactDOM.render()
• client.js
3
Slide 17
Slide 17 text
> 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
Slide 18
Slide 18 text
• client.js - Rehydrate on client
• template.js – Hand over to client in window object
• server.js - Convert state to string
Preserving the app state
Slide 19
Slide 19 text
> 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: