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

2. www.etsy.com/people/BruteForceStudios
SMARTPHONE ?SMARTPHONE ?

3. How smart ?
Wifi/data
Camera
Speaker
Color Screen
Vibration
Phone

4. TIMEline
1990' : PDAs
1999 : Japan & i-mode
2004 : CyberBank POZ X301
2007 : iPhone
2010 : No more keyboards
2014 : Quad HD (2K)

5. 1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
smartphones in use end of 2014
Source : TomiAhonenAlmanac
2,1 Billions

6. 1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
smartphones Sold since 2010
Source : TomiAhonenAlmanac
3,7 Billions

7. Smartphone OS Market share
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
2010 2011 2012 2013 2014
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Others Windows
Bada Blackberry
Symbian IOS
Android
Source : TomiAhonenAlmanac

8. 1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
2011 2012 2013 2014
-20%
-10%
0%
10%
20%
30%
40%
50%
2years
3years
4years
5years
Overall Trashing Rate
Or the fall of Nokia
Based on TomiAhonenAlmanac data

9. Smartphone life expectancy
1 ligne 2 ligne 3 ligne 4 ligne
0
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
Inmonths
Based on TomiAhonenAlmanac data

10. Devices !Devices !

11. Google Nexus S
Year : 2011
Cyanogen Android 4.4.4
CPU : 1 × 1 GHz
RAM : 512 MiB
Why : Slow & Old
Source : pdadb.net

12. Iphone 4
Year : 2010
IOS 6.1.3
CPU : 1 × 800 MHz
RAM : 512 MiB
Why : Compare to Nexus S
Source : pdadb.net

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

14. LG G3
Year : 2014
Android 5.0
CPU : 4 × 2,4 GHz
RAM : 2048 MiB
Why : « Usual » performance
Source : pdadb.net

15. 1 ligne 2 ligne 3 ligne 4 ligne
0
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(lowerbetter)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 50 100 150 200 250 300 350
dromaeo/dom(higherbetter)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 500 1000 1500 2000 2500 3000 3500 4000 4500
Octane2(higherbetter)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
0 10 20 30 40 50 60 70 80
dromaeo/jslib(higherbetter)
BenchmarkNexus S iPhone4 Wiko G4

16. Chillin'whileChillin'while
Chrome'scrashingChrome'scrashing

17. Why so slow ?
RAW Power Garbage collector

18. Raspberry Pi Zero
Year : 2015
CPU : 1 × 1 GHz
RAM : 512 MiB
Internet of Punny things
$5 !$5 !

19. Browsers !Browsers !

20. Browsers

21. Websites !Websites !

22. Websites
REALMOBILE

23. DATA !
DATA !

24. Frameworks…Frameworks…
FrameworksFrameworks
everywhereeverywhere

25. Nexus S iPhone4 Wiko G4
1 ligne 2 ligne 3 ligne 4 ligne
0
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 ligne
0
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 ligne
0
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 ligne
0
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)

26. BrowsingBrowsing
With chromeWith chrome

27. 1 ligne 2 ligne 3 ligne 4 ligne
0
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)

28. 1 ligne 2 ligne 3 ligne 4 ligne
0
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)

29. 1 ligne 2 ligne 3 ligne 4 ligne
0
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)

30. 1 ligne 2 ligne 3 ligne 4 ligne
0
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)

31. Mobile performance
is not an accident

32. Websites don't
kill battery, lazy
developers do

33. Look ! more browsers
Even some Proxy browser

34. Proxy browser ?Proxy browser ?

35. Proxy browser

36. Readwrite.com (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4

37. Try.discourse.org (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4

38. Guardian.com (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4

39. Facebook.com (in seconds)
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 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 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
Safari
0 5 10 15 20 25 30
Nexus S iPhone4 Wiko G4

40. Look at China
Proxy browsers are important
Internet of weak things
Remember

41. If you want to browse your site
from your arm-phone
don'tuseangular,react,orember

42. FrontendFrontend
renderingrendering
only looksonly looks
cool fromcool from
the insidethe inside

43. npmjs.com/package/jquarry
Same tools, smaller footprint

44. Questions ?
Théodore BIADALA
@nod_
theodore@biadala.net