Frontend Thunderdome. Vienna 2015 Théodore BIADALA Drupal Core JS maintainer Senior performance Tag1Consulting

Transcription

1 Frontend Thunderdome Vienna 15 Théodore BIADALA Drupal Core JS maintainer Senior performance Tag1Consulting

2 SMARTPHONE?

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

4 TIMEline 199' : PDAs 1999 : Japan & i-mode : CyberBank POZ X31 7 : iphone 1 : No more keyboards 1 : Quad HD (K)

5 1 smartphones in use end of 1 colonne 1 ligne,1 Billions ligne 3 ligne ligne Source : TomiAhonen Almanac

6 1 smartphones Sold since 1 colonne 3,7 Billions 1 ligne ligne 3 ligne ligne Source : TomiAhonen Almanac

7 Smartphone OS Market share 1% 1 9% % 7% colonne % 5% 1 ligne ligne 3 ligne ligne Others Windows Bada Blackberry 3% Symbian IOS % Android % 1% % 1 Source : TomiAhonen Almanac

8 Overall Trashing Rate Or the fall of Nokia 1 5% years 3 years years 5 years % 3% colonne % 1% 11 1 ligne ligne 3 ligne 13 ligne 1 % -1% -% Based on TomiAhonen Almanac data

9 Smartphone life expectancy Android IOS Windows 5 colonne Symbian 39 5 Blackberry Bada 1 ligne 5 ligne In months 3 ligne ligne 3 Based on TomiAhonen Almanac data

10 Devices!

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

12 Iphone Year : 1 IOS.1.3 CPU : 1 MHz RAM : 5 MiB Why : Compare to Nexus S Source : pdadb.net

13 Wiko Sunset Year : 15 Android.. CPU : 1,3 GHz RAM : 5 MHz Why : Cheapest in the store Source : lesnumeriques.com

14 LG G3 Year : 1 Android 5. CPU :, GHz RAM : MiB Why : «Usual» performance Source : pdadb.net

15 Benchmark Nexus S iphone Wiko G Sunspider (lower (lower better) Sunspider better) 1 dromaeo/dom (higher better) 1 colonne colonne 1 ligne ligne 3 ligne ligne 1 ligne ligne 3 ligne ligne Octane (higher better) colonne 1 ligne ligne 3 ligne ligne 1 1 colonne 5 dromaeo/jslib (higher better) ligne ligne 3 ligne ligne

16 Chillin' while Chrome's crashing

17 Why so slow? RAW Power Garbage collector

18 Raspberry Pi Zero! 5 $ Year : 15 CPU : 1 1 GHz RAM : 5 MiB Internet of Punny things

19 Browsers!

20 Browsers

21 Websites!

22 Websites REAL MOBILE

23 ! A T DA

24 Frameworks Frameworks everywhere

25 Frameworks startup time (in ms) Nexus S iphone Wiko G Angular 1 colonne 1 ligne ligne 3 ligne ligne 1 1 ligne ligne 3 ligne ligne jquery 1 Elm-todomvc 1 colonne colonne 1 ligne ligne 3 ligne ligne colonne React ligne ligne 3 ligne ligne

26 Browsing With chrome

27 1. MB 5 requests 5 KB JS (in seconds) 1 Nexus S colonne iphone 1 ligne ligne 3 ligne ligne Wiko G

28 79 KB 5 requests 59 KB JS (in seconds) 1 Nexus S colonne iphone 1 ligne ligne 3 ligne ligne Wiko G

29 95 KB 7 requests 19 KB JS (in seconds) 1 Nexus S colonne iphone 1 ligne ligne 3 ligne ligne Wiko G

30 1. MB 3 requests KB JS (in seconds) 1 Nexus S colonne iphone 1 ligne ligne 3 ligne ligne Wiko G

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?

35 Proxy browser

36 Readwrite.com (in seconds) 1 Nexus S Chrome 1 Opera Mini colonne Firefox Android 1 ligne ligne 3 ligne ligne Opera Mini Android 1 ligne ligne 3 ligne ligne UC UC Chrome (proxy) Chrome (proxy) UC (proxy) UC (proxy) colonne 1 ligne ligne 3 ligne ligne Safari G colonne Firefox Opera 5 Wiko Chrome Opera iphone Chrome Opera Mini colonne Firefox Android 1 ligne ligne 3 ligne ligne Opera UC Chrome (proxy) UC (proxy)

37 Try.discourse.org (in seconds) 1 Chrome 1 Opera Mini colonne Firefox Android 1 ligne ligne 3 ligne ligne Nexus S Opera Mini Android 1 ligne ligne 3 ligne ligne UC UC Chrome (proxy) Chrome (proxy) UC (proxy) UC (proxy) colonne 1 ligne ligne 3 ligne ligne Safari G colonne Firefox Opera 5 Wiko Chrome Opera iphone Chrome Opera Mini colonne Firefox Android 1 ligne ligne 3 ligne ligne Opera UC Chrome (proxy) UC (proxy)

38 Guardian.com (in seconds) 1 Nexus S Chrome Opera Mini Firefox Firefox Android 1 ligne ligne 3 ligne ligne Opera Opera UC UC Chrome (proxy) Chrome (proxy) UC (proxy) UC (proxy) colonne ligne ligne 3 ligne ligne Firefox 15 colonne Opera Mini colonne 1 Chrome 1 G colonne Opera Mini colonne Android 1 ligne ligne 3 ligne ligne Wiko Chrome 1 colonne iphone Android 1 ligne ligne 3 ligne ligne Safari Opera UC Chrome (proxy) UC (proxy)

39 Facebook.com (in seconds) 1 Nexus S Chrome Opera Mini Firefox Firefox Android 1 ligne ligne 3 ligne ligne Opera Opera UC UC Chrome (proxy) Chrome (proxy) UC (proxy) UC (proxy) colonne Firefox 1 ligne ligne 3 ligne ligne Opera Mini colonne colonne 1 Chrome 1 G Opera Mini colonne colonne Android 1 ligne ligne 3 ligne ligne Wiko Chrome 1 colonne iphone Android 1 ligne ligne 3 ligne ligne Safari Opera UC Chrome (proxy) UC (proxy)

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

41 If you want to browse your site from your arm-phone don't use angular, react, or ember

42 Frontend rendering only looks cool from the inside

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

44 Questions? Théodore