Frontend thunderdome

798 views
666 views

Published on

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.

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
798
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Frontend thunderdome

  1. 1. FrontendFrontend ThunderdomeThunderdome Vienna 2015 Théodore BIADALA— Drupal Core JS maintainer — Senior performance engineer @ Tag1Consulting
  2. 2. www.etsy.com/people/BruteForceStudios SMARTPHONE ?SMARTPHONE ?
  3. 3. How smart ? Wifi/data Camera Speaker Color Screen Vibration Phone
  4. 4. TIMEline 1990' : PDAs 1999 : Japan & i-mode 2004 : CyberBank POZ X301 2007 : iPhone 2010 : No more keyboards 2014 : Quad HD (2K)
  5. 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. 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. 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. 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. 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. 10. Devices !Devices !
  11. 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. 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. 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. 14. LG G3 Year : 2014 Android 5.0 CPU : 4 × 2,4 GHz RAM : 2048 MiB Why : « Usual » performance Source : pdadb.net
  15. 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. 16. Chillin'whileChillin'while Chrome'scrashingChrome'scrashing
  17. 17. Why so slow ? RAW Power Garbage collector
  18. 18. Raspberry Pi Zero Year : 2015 CPU : 1 × 1 GHz RAM : 512 MiB Internet of Punny things $5 !$5 !
  19. 19. Browsers !Browsers !
  20. 20. Browsers
  21. 21. Websites !Websites !
  22. 22. Websites REALMOBILE
  23. 23. DATA ! DATA !
  24. 24. Frameworks…Frameworks… FrameworksFrameworks everywhereeverywhere
  25. 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. 26. BrowsingBrowsing With chromeWith chrome
  27. 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. 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. 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. 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. 31. Mobile performance is not an accident
  32. 32. Websites don't kill battery, lazy developers do
  33. 33. Look ! more browsers Even some Proxy browser
  34. 34. Proxy browser ?Proxy browser ?
  35. 35. Proxy browser
  36. 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. 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. 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. 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. 40. Look at China Proxy browsers are important Internet of weak things Remember
  41. 41. If you want to browse your site from your arm-phone don'tuseangular,react,orember
  42. 42. FrontendFrontend renderingrendering only looksonly looks cool fromcool from the insidethe inside
  43. 43. npmjs.com/package/jquarry Same tools, smaller footprint
  44. 44. Questions ? Théodore BIADALA @nod_ theodore@biadala.net

×