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