W I T H R E A C TI S O M O R P H I C R E N D E R I N G
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
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 TAT S
0
550
1100
1650
2200
October 2012 October 2013 October 2014 October 2015
All Top 100
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 TAT S
Nov 2010
0
350
700
1050
1400
Scripts Images
– 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/
SEO suffers in many single-page apps
A B R I G H T E R F U T U R E
I S O M O R P H I C R E N D E R I N G
Source: http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
L U M P E N R A D I O W E B 2 . 0
https://github.com/jhabdas/lumpenradio-com
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
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
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.
habd.as