Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FrontendFrontend
ThunderdomeThunderdome
Vienna 2015
Théodore BIADALA— Drupal Core JS maintainer — Senior performance engin...
www.etsy.com/people/BruteForceStudios
SMARTPHONE ?SMARTPHONE ?
How smart ?
Wifi/data
Camera
Speaker
Color Screen
Vibration
Phone
TIMEline
1990' : PDAs
1999 : Japan & i-mode
2004 : CyberBank POZ X301
2007 : iPhone
2010 : No more keyboards
2014 : Quad H...
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 : Tomi...
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 : TomiAho...
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 20...
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%...
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
Windo...
Devices !Devices !
Google Nexus S
Year : 2011
Cyanogen Android 4.4.4
CPU : 1 × 1 GHz
RAM : 512 MiB
Why : Slow & Old
Source : pdadb.net
Iphone 4
Year : 2010
IOS 6.1.3
CPU : 1 × 800 MHz
RAM : 512 MiB
Why : Compare to Nexus S
Source : pdadb.net
Wiko Sunset 2
Year : 2015
Android 4.4.2
CPU : 2 × 1,3 GHz
RAM : 512 MHz
Why : Cheapest in the store
Source : lesnumeriques...
LG G3
Year : 2014
Android 5.0
CPU : 4 × 2,4 GHz
RAM : 2048 MiB
Why : « Usual » performance
Source : pdadb.net
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 450...
Chillin'whileChillin'while
Chrome'scrashingChrome'scrashing
Why so slow ?
RAW Power Garbage collector
Raspberry Pi Zero
Year : 2015
CPU : 1 × 1 GHz
RAM : 512 MiB
Internet of Punny things
$5 !$5 !
Browsers !Browsers !
Browsers
Websites !Websites !
Websites
REALMOBILE
DATA !
DATA !
Frameworks…Frameworks…
FrameworksFrameworks
everywhereeverywhere
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 50...
BrowsingBrowsing
With chromeWith chrome
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 ...
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 ...
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 ...
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 ...
Mobile performance
is not an accident
Websites don't
kill battery, lazy
developers do
Look ! more browsers
Even some Proxy browser
Proxy browser ?Proxy browser ?
Proxy browser
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 ...
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)
Chr...
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 (...
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 (...
Look at China
Proxy browsers are important
Internet of weak things
Remember
If you want to browse your site
from your arm-phone
don'tuseangular,react,orember
FrontendFrontend
renderingrendering
only looksonly looks
cool fromcool from
the insidethe inside
npmjs.com/package/jquarry
Same tools, smaller footprint
Questions ?
Théodore BIADALA
@nod_
theodore@biadala.net
Upcoming SlideShare
Loading in …5
×

Frontend thunderdome

1,172 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
  • Be the first to comment

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

×