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.

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

6. SEO suffers in many single-page apps
   

   View Slide

7. A B R I G H T E R F U T U R E
   

   View Slide

8. View Slide

9. I S O M O R P H I C
   R E N D E R I N G
   

   View Slide

10. Source: http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
    

    View Slide

11. L U M P E N R A D I O W E B 2 . 0
    https://github.com/jhabdas/lumpenradio-com
    

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

14. 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.
    

    View Slide

15. View Slide

16. habd.as
    

    View Slide