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

Universally Isomorphic JavaScript

Universally Isomorphic JavaScript

Frontend NE

August 03, 2017
Tweet

More Decks by Frontend NE

Other Decks in Technology

Transcript

  1. What? Server Client Client-Server Content rendered on the server with


    some amount of client-side rendering. AJAX requests from client.
  2. 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
  3. 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
  4. When? 2011 - Charlie Robbins 2013 - Spike Brehm 2015

    - Michael Jackson * * not this Michael Jackson
  5. 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.
  6. Why? • To enable SEO for Single Page Applications. •

    To improve performance. • To make the application accessible in legacy browsers. • Potentially improve code maintainability.
  7. How? • Execute JavaScript on server • HTML parsing &

    DOM • Dealing with HTTP requests • URL routing • Module loaders • Responsiveness Abstractions! And more abstractions!
  8. Progressive enhancement 1. Server renders content. 2. Browser loads JS,

    parses it and executes. 3. JavaScript hijacks links and takes over navigation.
  9. Pros & cons The good: • SEO • Performance •

    Maintainability • Make legacy browsers 
 suck less… • Progressive enhancement The bad: • Adds complexity
  10. It’s all cool & stuff, but why bother? • Asana

    (Luna, now React) • Airbnb (Rendr) • Coursera • Netflix (React) • Drupal 8 (wait, what?!) • Mazda
  11. Tools & frameworks Routing: • React router • Angular router

    • Director HTTP Requests: • Axios • isomorphic-fetch • Superagent