frontend thunderdome

Frontend Frontend ThunderdomeThunderdome

Vienna 2015Théodore BIADALA — Drupal Core JS maintainer — Senior performance engineer @ Tag1Consulting

www.etsy.com/people/BruteForceStudios

SMARTPHONE ?SMARTPHONE ?

How smart ?

Wifi/dataCameraSpeaker

Color ScreenVibration

Phone

TIMEline1990' : PDAs

1999 : Japan & i-mode

2004 : CyberBank POZ X301

2007 : iPhone

2010 : No more keyboards

2014 : Quad HD (2K)

1 ligne 2 ligne 3 ligne 4 ligne0

2

4

6

8

10

12

1 colonne

2 colonne3 colonne

smartphones in use end of 2014

Source : TomiAhonen Almanac

2,1 Billions


2

4

6

8

10

12

1 colonne

2 colonne3 colonne

smartphones Sold since 2010


3,7 Billions

Smartphone OS Market share


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

2010 2011 2012 2013 20140%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Others Windows

Bada Blackberry

Symbian IOS

Android



2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

2011 2012 2013 2014

-20%

-10%

0%

10%

20%

30%

40%

50%2 years3 years4 years5 years

Overall Trashing RateOr the fall of Nokia

Based on TomiAhonen Almanac data

Smartphone life expectancy


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

Android

IOS

Windows

Symbian

Blackberry

Bada

12 24 36

3

15

25

39

25

5

In monthsBased on TomiAhonen Almanac data

Devices ! Devices !

Google Nexus S Year : 2011

Cyanogen Android 4.4.4

CPU : 1 × 1 GHz

RAM : 512 MiB

Why : Slow & Old

Source : pdadb.net

Iphone 4 Year : 2010

IOS 6.1.3

CPU : 1 × 800 MHz

RAM : 512 MiB

Why : Compare to Nexus S

Source : pdadb.net

Wiko Sunset 2 Year : 2015

Android 4.4.2

CPU : 2 × 1,3 GHz

RAM : 512 MHz

Why : Cheapest in the store

Source : lesnumeriques.com

LG G3 Year : 2014

Android 5.0

CPU : 4 × 2,4 GHz

RAM : 2048 MiB

Why : « Usual » performance

Source : pdadb.net


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 500 1000 1500 2000 2500 3000 3500 4000 4500

Sunspider (lower better)

0 500 1000 1500 2000 2500 3000 3500 4000 4500

Sunspider (lower better)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 50 100 150 200 250 300 350

dromaeo/dom (higher better)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 500 1000 1500 2000 2500 3000 3500 4000 4500

Octane 2 (higher better)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 10 20 30 40 50 60 70 80

dromaeo/jslib (higher better)

BenchmarkNexus S iPhone4 Wiko G4

Chillin' while Chillin' while Chrome's crashingChrome's crashing

Why so slow ?

RAW Power Garbage collector

Raspberry Pi Zero Year : 2015

CPU : 1 × 1 GHz

RAM : 512 MiB

Internet of Punny things

$5 !$5 !

Browsers ! Browsers !

Browsers

Websites ! Websites !

Websites

REAL MOBILE

DATA ! DATA !

Frameworks…Frameworks…Frameworks Frameworks everywhereeverywhere

Nexus S iPhone4 Wiko G4


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 100 200 300 400 500 600 700

Angular


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 100 200 300 400 500 600 700

React


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 100 200 300 400 500 600 700

Elm-todomvc


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

0 100 200 300 400 500 600 700

jQuery

Frameworks startup time (in ms)

Browsing Browsing With chromeWith chrome


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

Nexus S

iPhone4

Wiko

G3

0 5 10 15 20 25

1.4 MB — 54 requests — 254 KB JS (in seconds)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

Nexus S

iPhone4

Wiko

G3

0 5 10 15 20 25

790 KB — 25 requests — 596 KB JS (in seconds)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

Nexus S

iPhone4

Wiko

G3

0 5 10 15 20 25

952 KB — 72 requests — 109 KB JS (in seconds)


2

4

6

8

10

12

1 colonne

2 colonne

3 colonne

Nexus S

iPhone4

Wiko

G3

0 5 10 15 20 25

1.6 MB — 63 requests — 246 KB JS (in seconds)

Mobile performance is not an accident

Websites don't kill battery, lazy

developers do

Look ! more browsers

Even some Proxy browser

Proxy browser ?Proxy browser ?

Proxy browser

Readwrite.com (in seconds)


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

Safari

0 5 10 15 20 25 30


Try.discourse.org (in seconds)


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

Safari

0 5 10 15 20 25 30


Guardian.com (in seconds)


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

Safari

0 5 10 15 20 25 30


Facebook.com (in seconds)


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

UC (proxy)

Chrome (proxy)

UC

Opera

Android

Firefox

Opera Mini

Chrome

0 5 10 15 20 25 30


2

4

6

8

10

12

1 colonne2 colonne

3 colonne

Safari

0 5 10 15 20 25 30


Look at China

Proxy browsers are important

Internet of weak things

Remember

If you want to browse your site from your arm-phone

don't use angular, react, or ember

Frontend Frontend rendering rendering only looks only looks cool from cool from the insidethe inside

npmjs.com/package/jquarry

Same tools, smaller footprint

Questions ?

Théodore BIADALA

@nod_

[email protected]