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.
MOORE VS. MAY
Everything’s faster and better – we can fix that!
Chris Heilmann @codepo8, Halfstackconf, London, Nov 2015
Moore’s Law:
(﴾paraphrased)﴿
Computers get faster,
better, cheaper and
are more available
every two years.
May’s Law:
(﴾paraphrased)﴿
Software efficiency halves every
18 months, compensating
Moore’s law.
https://www.flickr.com/photos/56218409@N03/19216130670
WE MOVE FAST AND RUN IN CIRCLES
We’re all
about the
Moore…
(﴾and we keep wanting
more)﴿
WE WORK WITH AMAZING HARDWARE…
WE WORK WITH GREAT CONNECTIVITY…
WE GET PAID WELL – FOR A JOB WE LIKE
https://www.flickr.com/photos/31317832@N05/4326186183
WE WORK WITH AMAZING BROWSERS
BROWSERS THAT
GIVE OUR USERS
FUNCTIONALITY WE
DON’T EVER USE BUT
THEY APPRECIATE…
BROWSER DO AN
INCREDIBLE AMOUNT
OF WORK FOR US…
• Display of all kind of media content
• Fix minor mistakes in our code
• ...
So how come we
made the web all
about May’s law?
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THE WEB IS IN A
SORRY STATE…
• The median page’s tim...
"https://www.flickr.com/photos/80835334@N07/14860543478
WAITING ISN’T FUN…
https://www.flickr.com/photos/37996646802@N01/16637071998
HOW DOES THIS HAPPEN?
https://www.flickr.com/photos/38497891@N04/4151566643
WE LIVE IN A HYPE FUELLED ENVIRONMENT
WE KEEP PROJECTING…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON ...
OR, ACTUALLY…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON THE WE...
🐴💩
TIME TO GET REAL…
US
OUR
ASSUMED
AUDIENCE
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN...
AS DEVELOPERS, WE
ARE ASKED TO DO
THE IMPOSSIBLE…
• Make it work the same in every
browser
• Make it easy to maintain and ...
WHAT DOES THIS CODE DO?
https://www.flickr.com/photos/73645804@N00/2473052504
JUST FIND THE RIGHT
BRICKS AND ASSEMBLE
SOMETHING GREAT!
https://www.flickr.com/photos/27429206@N02/4290544535
THE AMAZING TECH OF
TODAY IS THE RUBBISH OF
TOMORROW…
I CURRENTLY WORK
WITH A CLEANUP
CREW…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code...
A simple way to detect how old
a part of our massive site is
checking which version of
jQuery was used in that part
of it....
WE BREAK THE WEB
FOR THE SAKE OF
DEVELOPER
CONVENIENCE…
https://www.flickr.com/photos/56844027@N05/5634567317
WE SHOULD WORRY A LOT
MORE ABOUT COST…
COST FOR
DEVELOPERS…
• Learning new frameworks
• Re-‐learning frameworks
• Debugging frameworks
• Setting up developer
env...
WAITING FOR NPM TO FINISH INSTALLING…
THE REAL
IMPORTANT BIT IS
THE COST FOR OUR
USERS…
• Time to load / execute
• Bandwidth used
• CPU usage
• Frame rate (﴾60 ...
THE JAVASCRIPT
LEARNING PROCESS
HAS ALWAYS BEEN
INTERESTING…
• Use view source to see what
others are doing…
• Copy and pa...
THIS, OF COURSE,
WAS WRONG AND
WE GOT MORE
PROFESSIONAL…
• Search for a solution on
Stackoverflow
• Copy and paste the bit...
WE ARE RUNNING OUT OF
BOTH EXCUSES…
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿
http://kangax.github.io/compat-table/es6/
NUMBERS!
Current status (﴾October 2015)﴿:
Desktop:
Edge 13: 80%
Firefox 42: 71%
Chrome 47/Opera 34: 63 %
Safari 9: 54% (﴾f...
IT IS STILL THE SIMPLEST,
MOST VERSATILE AND
INVITING LANGUAGE
OUT THERE…
WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Extensible Web Manifesto
• WebGL
• WebAssembly/ASM.js
• PostCS...
https://www.flickr.com/photos/codepo8/2052486550/
PERPETUAL RACE CONDITION
THE VICIOUS
INNOVATION CYCLE…
WE COULD REPLACE
THE OLD WEB…
WE’RE TRYING TO FORCE THINGS…
WITH ES6 WE HAVE
A CLEAN NEW
SLATE…
BURN THE WITCH!
http://www.bennadel.com/blog/2949-‐var-‐for-‐life-‐-‐-‐why-‐let-‐and-‐const-‐don-‐
t-‐interest-‐me-‐in-‐ja...
https://maxwellito.github.io/es6-‐quiz-‐slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-‐quiz-‐slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-‐quiz-‐slides
ES2015 QUIZ TIME…
https://maxwellito.github.io/es6-‐quiz-‐slides
ES2015 QUIZ TIME…
ES2015 QUIZ TIME…
UTF-‐8, BABY…
THE NEW BASELINE
IS HERE!
THE NEW BASELINE
IS HERE!
MAYBE IT IS PRUDENT
TO CALM THE F…
DOWN A BIT!
FREE TIME PROJECTS
USED TO BE ABOUT
FUN AND
EXPERIMENTATION…
http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616...
NOT ABOUT
CUTTHROAT
COMPETITION AND
SELF-‐INFLICTED
COMPLEXITY…
https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source...
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
sc...
https://www.flickr.com/photos/48066826@N02/5034289376
TIME TO CALM DOWN AND
CONCENTRATE ON THE
BROKEN THINGS…
LENDING A HELPING HAND…
LET’S TURN
COMPETITION
INTO EDUCATION
AND FUN AGAIN!
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
Upcoming SlideShare
Loading in …5
×

Moore vs. May - everything is faster and better: we can fix that

1,707 views

Published on

I am text, you don't read me. More video!

Published in: Data & Analytics

Moore vs. May - everything is faster and better: we can fix that

  1. 1. MOORE VS. MAY Everything’s faster and better – we can fix that! Chris Heilmann @codepo8, Halfstackconf, London, Nov 2015
  2. 2. Moore’s Law: (﴾paraphrased)﴿ Computers get faster, better, cheaper and are more available every two years.
  3. 3. May’s Law: (﴾paraphrased)﴿ Software efficiency halves every 18 months, compensating Moore’s law.
  4. 4. https://www.flickr.com/photos/56218409@N03/19216130670 WE MOVE FAST AND RUN IN CIRCLES
  5. 5. We’re all about the Moore… (﴾and we keep wanting more)﴿
  6. 6. WE WORK WITH AMAZING HARDWARE…
  7. 7. WE WORK WITH GREAT CONNECTIVITY…
  8. 8. WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/31317832@N05/4326186183
  9. 9. WE WORK WITH AMAZING BROWSERS
  10. 10. BROWSERS THAT GIVE OUR USERS FUNCTIONALITY WE DON’T EVER USE BUT THEY APPRECIATE…
  11. 11. BROWSER DO AN INCREDIBLE AMOUNT OF WORK FOR US… • Display of all kind of media content • Fix minor mistakes in our code • Optimise our code to run smoothly • Provide us with developer tools • Provide us with deep insights what our code does to the computer • Allow us to automate testing in them and debug remotely on devices we don’t even own (﴾using 3rd party services)﴿
  12. 12. So how come we made the web all about May’s law?
  13. 13. http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THE WEB IS IN A SORRY STATE… • The median page’s time to interact is 5.5 seconds, and fully loads in just over 15 seconds. • The median page is 2MB in size and contains 170 resources
  14. 14. "https://www.flickr.com/photos/80835334@N07/14860543478 WAITING ISN’T FUN…
  15. 15. https://www.flickr.com/photos/37996646802@N01/16637071998 HOW DOES THIS HAPPEN?
  16. 16. https://www.flickr.com/photos/38497891@N04/4151566643 WE LIVE IN A HYPE FUELLED ENVIRONMENT
  17. 17. WE KEEP PROJECTING… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
  18. 18. OR, ACTUALLY… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
  19. 19. 🐴💩
  20. 20. TIME TO GET REAL… US OUR ASSUMED AUDIENCE OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
  21. 21. AS DEVELOPERS, WE ARE ASKED TO DO THE IMPOSSIBLE… • Make it work the same in every browser • Make it easy to maintain and we want to control everything • Make sure it is also accessible -‐ I think there’s a law we need to follow • Don’t spent too much time on it -‐ let’s release it now and fix it later! • Use this analytics code you have no clue about -‐ we need to know how people use our products
  22. 22. WHAT DOES THIS CODE DO?
  23. 23. https://www.flickr.com/photos/73645804@N00/2473052504 JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!
  24. 24. https://www.flickr.com/photos/27429206@N02/4290544535 THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW…
  25. 25. I CURRENTLY WORK WITH A CLEANUP CREW… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
  26. 26. A simple way to detect how old a part of our massive site is checking which version of jQuery was used in that part of it. It’s like rings in a tree trunk. https://www.flickr.com/photos/91183364@N08/13916636762 “
  27. 27. WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…
  28. 28. https://www.flickr.com/photos/56844027@N05/5634567317 WE SHOULD WORRY A LOT MORE ABOUT COST…
  29. 29. COST FOR DEVELOPERS… • Learning new frameworks • Re-‐learning frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
  30. 30. WAITING FOR NPM TO FINISH INSTALLING…
  31. 31. THE REAL IMPORTANT BIT IS THE COST FOR OUR USERS… • Time to load / execute • Bandwidth used • CPU usage • Frame rate (﴾60 fps)﴿ • Memory usage • Battery
  32. 32. THE JAVASCRIPT LEARNING PROCESS HAS ALWAYS BEEN INTERESTING… • Use view source to see what others are doing… • Copy and paste the bits that look like they are responsible for some things • Change some numbers around • Run into errors • Blame Internet Explorer
  33. 33. THIS, OF COURSE, WAS WRONG AND WE GOT MORE PROFESSIONAL… • Search for a solution on Stackoverflow • Copy and paste the bits that look like they are responsible for some things • Change some numbers around • Run into errors • Blame JavaScript for being terrible and not a real language • For good measure, blame Internet Explorer.
  34. 34. WE ARE RUNNING OUT OF BOTH EXCUSES…
  35. 35. 1997 2015 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 1997 ECMAScript1 1998 ECMAScript2 1999 ECMAScript3 2005 -‐ 2007 ECMAScript4 -‐ Abandoned 2009 ECMAScript5 2015 ECMAScript6 JAVASCRIPT GREW UP… • 5+ years since ES5 ratification • Significant changes in 15+ years • Backwards compatible • Ratified June 2015 http://www.ecma-‐international.org/publications/standards/Ecma-‐262.htm
  36. 36. SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
  37. 37. NUMBERS! Current status (﴾October 2015)﴿: Desktop: Edge 13: 80% Firefox 42: 71% Chrome 47/Opera 34: 63 % Safari 9: 54% (﴾former 21%!)﴿ Mobile: Android 5.1: 29% iOS9: 54% http://kangax.github.io/compat-table/es6/
  38. 38. IT IS STILL THE SIMPLEST, MOST VERSATILE AND INVITING LANGUAGE OUT THERE…
  39. 39. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
  40. 40. https://www.flickr.com/photos/codepo8/2052486550/ PERPETUAL RACE CONDITION
  41. 41. THE VICIOUS INNOVATION CYCLE…
  42. 42. WE COULD REPLACE THE OLD WEB…
  43. 43. WE’RE TRYING TO FORCE THINGS…
  44. 44. WITH ES6 WE HAVE A CLEAN NEW SLATE…
  45. 45. BURN THE WITCH! http://www.bennadel.com/blog/2949-‐var-‐for-‐life-‐-‐-‐why-‐let-‐and-‐const-‐don-‐ t-‐interest-‐me-‐in-‐javascript.htm
  46. 46. https://maxwellito.github.io/es6-‐quiz-‐slides ES2015 QUIZ TIME…
  47. 47. https://maxwellito.github.io/es6-‐quiz-‐slides ES2015 QUIZ TIME…
  48. 48. https://maxwellito.github.io/es6-‐quiz-‐slides ES2015 QUIZ TIME…
  49. 49. https://maxwellito.github.io/es6-‐quiz-‐slides ES2015 QUIZ TIME…
  50. 50. ES2015 QUIZ TIME…
  51. 51. UTF-‐8, BABY…
  52. 52. THE NEW BASELINE IS HERE!
  53. 53. THE NEW BASELINE IS HERE!
  54. 54. MAYBE IT IS PRUDENT TO CALM THE F… DOWN A BIT!
  55. 55. FREE TIME PROJECTS USED TO BE ABOUT FUN AND EXPERIMENTATION… http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616339
  56. 56. NOT ABOUT CUTTHROAT COMPETITION AND SELF-‐INFLICTED COMPLEXITY… https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascript-‐library
  57. 57. Library Builders map, set & weakmap __proto__ Proxies Symbols Sub7classable built7ins Scalable Apps let, const & block7 scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs JAVASCRIPT CATERS TO DIFFERENT AUDIENCES…
  58. 58. https://www.flickr.com/photos/48066826@N02/5034289376 TIME TO CALM DOWN AND CONCENTRATE ON THE BROKEN THINGS…
  59. 59. LENDING A HELPING HAND…
  60. 60. LET’S TURN COMPETITION INTO EDUCATION AND FUN AGAIN!
  61. 61. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×