The year is 2015, in the wasteland that is the internet frontend community, Decoupled Drupal is all the rage. China, India and the African continent are releasing an army of juggernaut armed with cheap or "outdated" hardware onto the internet. Clients wants single page apps, fancy JS frontend, app-level experience for their next coporate social media extranet, better known as the "corporate cat picture library". This developer stuck in the methane refinery of web development will pit juggernauts against client's obnoxious wishes in… The Frontend Thunderdome. This talk is about putting reality back into the current mass hysteria around full js frontend. It features 5 years old hardware, angular, ember, performance and graphs.

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