Le document, présenté par Théodore Biadala lors d'un événement en 2015, traite de l'évolution des smartphones depuis les années 1990, mettant en lumière les batailles entre différents systèmes d'exploitation et la performance des appareils. Il inclut des statistiques sur l'utilisation des smartphones et des données comparatives sur la performance de divers modèles. Les défis de la performance mobile et l'importance du développement web optimisé pour les appareils mobiles sont également abordés.

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