frontend thunderdome
TRANSCRIPT
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne
2 colonne3 colonne
smartphones Sold since 2010
Source : TomiAhonen Almanac
3,7 Billions
Smartphone OS Market share
1 ligne 2 ligne 3 ligne 4 ligne0
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
Source : TomiAhonen Almanac
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 50 100 150 200 250 300 350
dromaeo/dom (higher better)
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 100 200 300 400 500 600 700
Angular
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 100 200 300 400 500 600 700
React
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 100 200 300 400 500 600 700
Elm-todomvc
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
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)
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4
Try.discourse.org (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4
Guardian.com (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4
Facebook.com (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
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
1 ligne 2 ligne 3 ligne 4 ligne0
2
4
6
8
10
12
1 colonne2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4
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