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

Isomorphic Rendering with React

Josh Habdas
November 10, 2015

Isomorphic Rendering with React

Making the case for isomorphism on the Web, and how to do it with React. includes link to example isomorphic app on GitHub.

Josh Habdas

November 10, 2015
Tweet

More Decks by Josh Habdas

Other Decks in Technology

Transcript

  1. W I T H R E A C T I

    S O M O R P H I C R E N D E R I N G
  2. A N A LY Z I N G 1 0

    Y E A R S O F A J A X … 2005 2006 2010 2012 2013 2014 2015 Prototype jQuery Backbone Chaplin Rendr React Aurelia
  3. AV E R A G E T R A N

    S F E R S I Z E ( K B ) O F A L L R E S P O N S E S F O R A S I N G L E W E B S I T E H T T P A R C H I V E S TA T S 0 550 1100 1650 2200 October 2012 October 2013 October 2014 October 2015 All Top 100
  4. AV E R A G E B Y T E

    S P E R PA G E B Y C O N T E N T T Y P E 2 0 1 0 T H R U 2 0 1 5 H T T P A R C H I V E S TA T S Nov 2010 0 350 700 1050 1400 Scripts Images
  5. – C R A I G B U C K

    L E R “We’re killing the Web!” Source: http://www.sitepoint.com/2mb-web-pages-whos-blame/
  6. I S O M O R P H I C

    R E N D E R I N G
  7. L U M P E N R A D I

    O W E B 2 . 0 https://github.com/jhabdas/lumpenradio-com
  8. H O W I T W O R K S

    • Express handles HTTP request • Hands off to React Routing • React views hydrated using Alt + Iso • Derived data HTTP requests occur server-side • Required style rules gathered and inlined • Interactive page in less than 1s
  9. F I R S T H T T P R

    E S P O N S E U N O P T I M I Z E D 1 7 6 K B PAY L O A D
  10. C O N T E N T PA G E

    T I M I N G S Connection Speed Time To Interactive Regular 2G (250 Kbps) ~3 Seconds Good 2G (450 Kbps) ~1.6 Seconds Good 3G (1 Mbps) ~0.5 Seconds Regular 4G (4 Mbps) ~0.4 Seconds Lte ~0.2 Seconds Using iPhone LTE hotspot in Chicago after passing through a Wi-Fi extender to simulate a router in a home, hitting a DO droplet in New York.