Universally Isomorphic JavaScript

Transcript

1. Universally Isomorphic JavaScript Kaspars Žarinovs
2. What? Isomorphic (or universal) JavaScript applications are applications that can run both client-side (browser) and server-side.
3. What? Server Client Client-Server Content rendered on the server with
 some amount of client-side rendering. AJAX requests from client.
4. 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
5. 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
6. When? 2011 - Charlie Robbins 2013 - Spike Brehm 2015 - Michael Jackson * * not this Michael Jackson
7. 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.
8. Why? • To enable SEO for Single Page Applications. • To improve performance. • To make the application accessible in legacy browsers. • Potentially improve code maintainability.
9. 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.
10. How? • Execute JavaScript on server • HTML parsing & DOM • Dealing with HTTP requests • URL routing • Module loaders • Responsiveness Abstractions! And more abstractions!
11. Progressive enhancement 1. Server renders content. 2. Browser loads JS, parses it and executes. 3. JavaScript hijacks links and takes over navigation.
12. Progressive enhancement
13. Pros & cons The good: • SEO • Performance • Maintainability • Make legacy browsers 
 suck less… • Progressive enhancement The bad: • Adds complexity
14. It’s all cool & stuff, but why bother? • Asana (Luna, now React) • Airbnb (Rendr) • Coursera • Netflix (React) • Drupal 8 (wait, what?!) • Mazda
15. Tools & frameworks Frameworks (rendering): • ReactDOM • Angular Universal • Rendr • Meteor • Next.js
16. Tools & frameworks Routing: • React router • Angular router • Director HTTP Requests: • Axios • isomorphic-fetch • Superagent
17. Tools & frameworks Build tools: • universal-webpack Module loaders: • Browserify • Babel + browserify (ES6)
18. https://twitter.com/kaspars_z https://github.com/kasparszarinovs Demo: https://github.com/kasparszarinovs/universal-js-demo-fene https://kaspars.me/