What?
Isomorphic (or universal) JavaScript applications are
applications that can run both client-side (browser)
and server-side.
Slide 3
Slide 3 text
What?
Server
Client Client-Server
Content rendered on the server with
some amount of client-side rendering.
AJAX requests from client.
Slide 4
Slide 4 text
What?
Client-Server with SPAs
Content largely rendered on client with
initial UI shell rendered on server.
Data retrieved mostly via AJAX requests.
Diagram taken from: https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
Slide 5
Slide 5 text
What?
Hybrid (Isomorphic)
Client and server use the
same codebase. Can be
rendered on both.
Data retrieved mostly via
AJAX requests.
Diagram taken from: https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
Slide 6
Slide 6 text
When?
2011 - Charlie Robbins
2013 - Spike Brehm
2015 - Michael Jackson *
* not this Michael Jackson
Slide 7
Slide 7 text
Universal vs. Isomorphic
Isomorphic - corresponding or similar in form and relations.
Universal - applicable to all cases.
Functional isomorphism - seamlessly switching between server
and client side rendering.
Technical isomorphism (universal JS) - same app logic code used
in the browser and server - routing, XHR. Basically - abstractions.
Slide 8
Slide 8 text
Why?
• To enable SEO for Single Page Applications.
• To improve performance.
• To make the application accessible in legacy browsers.
• Potentially improve code maintainability.
Slide 9
Slide 9 text
Why?
Benchmarks:
https://medium.com/@asyncmax/why-youll-always-need-isomorphic-javascript-bd310596d203
https://frontendne.co.uk/talks/isomorphic-react-the-benefits-pitfalls-and-work-arounds
Up to 40% improvement.
Less requests until first meaningful paint.
Slide 10
Slide 10 text
How?
• Execute JavaScript on server
• HTML parsing & DOM
• Dealing with HTTP requests
• URL routing
• Module loaders
• Responsiveness
Abstractions! And more abstractions!
Slide 11
Slide 11 text
Progressive enhancement
1. Server renders content.
2. Browser loads JS, parses it and executes.
3. JavaScript hijacks links and takes over navigation.
Slide 12
Slide 12 text
Progressive enhancement
Slide 13
Slide 13 text
Pros & cons
The good:
• SEO
• Performance
• Maintainability
• Make legacy browsers
suck less…
• Progressive enhancement
The bad:
• Adds complexity
Slide 14
Slide 14 text
It’s all cool & stuff, but why
bother?
• Asana (Luna, now React)
• Airbnb (Rendr)
• Coursera
• Netflix (React)
• Drupal 8 (wait, what?!)
• Mazda