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.
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, 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.
WE’RE SMACK IN THE
MIDDLE OF THIS…
• We live in a market driven by hype
• We work with amazing hardware
• We work with gre...
CONVENIENCE
BREEDS MORE
CONVENIENCE
• Browsers aren’t good enough
• Development environments are not
predictive and do our...
CONVENIENCE
BREEDS ARROGANCE
• We are not the people who use our
products
• This is the web -‐ you don’t know your
users a...
On the web,
Moore’s law is
tricky to
apply…
THE WEB IS AN
AMAZING IDEA AND
OFFER…
• Access to information world-‐wide,
24⨉7
• Independent of hardware, software,
abili...
ONE PERSON’S
BEAUTY IS ANOTHER
ONE’S WORRY…
• It is hard to build software and
interfaces for the unknown
• Open distribut...
THE NEXT USERS ARE
NOT THOSE WHO
COMPLAIN THE WEB
IS NOT AS GOOD AS
NATIVE APPS…
https://vimeo.com/139312920
https://bruce...
THE NEXT CHALLENGE IS
NOT IN COFFEE SHOPS IN
THE SILICON VALLEY…
We’ve done a
great job applying
May’s law on the
web…
🕗15 SECONDS
🕗15 SECONDS
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THE TIME WE HAVE TO WAIT FOR
THE AVERAGE...
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THAT’S A PRETTY
TERRIBLE STATE OF
THE WEB.
• The med...
WHAT TO DO?
WE HAVE THE
TECHNOLOGY!
WE CAN PATCH IT!
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://instantarticles.fb.com/
Facebook: Instant Articles
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://www.ampproject.org/
Google:Accelerated Mobile Pages (﴾AMP)﴿
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://www.apple.com/news/
Apple News
OPEN, BUT KIND OF CLOSED…
WE’RE NOT APPLYING TECHNOLOGY
IN A WEB FRIENDLY FORMAT…
WHAT DOES THIS CODE DO?
JAVASCRIPT ABUSE IS
RAMPANT…
3MB OF BLOCKING
JAVASCRIPT BEFORE
THE FIRST WORD
APPEARS ON THE
PAGE!
WHAT THE HELL
HAPPENED HERE?
AS DEVELOPERS, WE
ARE ASKED TO DO
THE IMPOSSIBLE…
• Make it work the same in every
browser
• Make it easy to maintain and
...
THE ANSWER IS
ALWAYS JAVASCRIPT
• Javascript is too powerful for its
own good.
• Almost everything that goes
wrong can be ...
WE USE CODE WE
DON’T UNDERSTAND
TO FIX ISSUES WE
DON’T HAVE…
• Learning libraries and
frameworks beyond “hello
world” cost...
DEVELOPER
CONVENIENCE,
PRODUCTIVITY &
EFFICIENCY…
#FFD700
IS DEPENDENCY HELL
A PROBLEM OF THE
TOO PRIVILEGED?
https://www.youtube.com/watch?v=PA139CERNbc
Stephan Bönnemann (﴾JSConf...
SHOULD WE BUILD
EVERYTHING FROM
SCRATCH?
OLD ISSUES, NOW IN
THE NEXT LANGUAGE…
TWITTER DISCUSSIONS
CONTROL OVER
WHAT IS HAPPENING
IN THE BROWSER
#FFD700
REPLACING BUILT-‐IN
FUNCTIONALITY
FOR THE SAKE OF
CONTROL…
IF WE BUILD CLIENT-‐
SIDE SOLUTIONS WE
DON’T CONTROL
WHERE OUR CODE
RUNS.
HOMEWORK / SNEAK
PREVIEW OF GREAT
INSIGHTS…
PAUL LEWIS
@AEROTWIST
THE DOM IS SLOW?
ANALYSING
BROWSER RESULTS…
npm install -‐g bigrig
github.com/GoogleChrome/big-‐rig
github.com/GoogleChrome/node-‐big-‐rig
It’s part of my life I won’t get
back. Like they’re murdering me,
but just a little … with this really
tiny knife -‐ Henry...
SIMPLY BECAUSE WE CAN FIX ANYTHING WITH
JAVASCRIPT DOES NOT MEAN WE SHOULD!
AVOIDING COMPLEXITY
BUT IT IS THE
PROFESSIONAL
WAY!
https://egghead.io/series/how-‐to-‐
write-‐an-‐open-‐source-‐javascript-‐
library
WE MADE JAVASCRIPT
COMPLEX AND KIND OF
SCARY…
WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Extensible Web Manifesto
• WebGL
• WebAssembly/ASM.js
• PostCS...
• We work around browser issues
• We make web standards of
tomorrow work today.
• We build solutions to clean up
others an...
NSFW
THAT’S COOL -‐
GO NUTS AND
PLAY WITH ANY
TECHNOLOGY
YOU WANT…
FRAMEWORKS
ARE GREAT…
• They are fun to use -‐ achieve a
lot very quickly
• You build complex apps in a
matter of minutes
...
…BUT THEY ALSO
COME WITH
DEVELOPER COST
• Learning new frameworks
• Re-‐learning new frameworks
• Debugging frameworks
• S...
AND WE SHOULD
CONSIDER THE
EFFECTS WE HAVE
ON OUR END
USERS…
• Time to load / execute
• Bandwidth used
• CPU usage
• Frame...
WHAT ABOUT USERS
OF OLD BROWSERS
LIKE IE8 -‐ WE CAN’T
LEAVE THOSE
BEHIND!
#FFD700
WE ALREADY DID.
LATELY I WORKED
EXCLUSIVELY IN
FIXING ONE MASSIVE
ISSUE OF THE WEB…
I REALISED THAT WE MESSED UP -‐ BADLY…
IT IS 2015 -‐ AND IT IS STILL ABOUT BROWSERS?
THE VICIOUS
INNOVATION CYCLE…
THE VICIOUS
INNOVATION CYCLE…
TRUST ISSUES AND
GETTING THE JOB
DONE…
WEB DEVELOPERS AND BROWSER MAKERS
SHOULD BE FRIENDS, NOT COMPETITORS
LET’S TALK ABOUT SOME GREAT
THINGS HAPPENING RIGHT NOW…
OUT OF THE BOX BROWSER
DO NOT SUCK ANY LONGER!
COMPATIBILITY IS ON
EVERY BROWSER
MAKER’S RADAR…
OUR DEBUGGING
ENVIRONMENT ROCKS
AND GETS BETTER ALL
THE TIME…
MONOPOLIES FALL
AND SURPRISES
HAPPEN…
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
this IS COMPLICATED *** ***
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
SAVING KEYSTROKES
• Arrow functions as a short-hand version of an
anonymous function.
• Block-level scope using let instead of var makes
var...
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
sc...
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...
THE PROBLEM: FOR
NON-‐SUPPORTING
BROWSERS, ES6
FEATURES ARE
SYNTAX ERRORS…
THE SOLUTION: TRANSPILING INTO ES5…
https://babeljs.io
• Converts ES6 to older versions on the server or the client
• In u...
✘ Extra step between writing code
and running it in the browser.
✘ We don’t run or debug the code
we write.
✘ We hope the ...
https://featuretests.io/
WHAT ABOUT FEATURE TESTING?
✘ It is an extra step that might be
costly
✘ We can only do it client-‐side
✘ We can get false positives -‐
experimental f...
YOU CAN USE AN
ABSTRACTION,
FRAMEWORK OR
LIBRARY THAT HAS
SIMILAR FEATURES…
THE ES6
CONUNDRUM…
• We can’t use it safely in the wild
• We can use TypeScript or transpile it
• We can feature test for ...
YOU CAN HELP
MAKE THIS BETTER!
BE ACTIVE!
If you use JavaScript in an
environment you control,
please use ES6 and feed
back your experiences to
the brows...
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...
WITH ES6 WE HAVE
A CLEAN NEW
SLATE…
(﴾AND YOU CAN’T BLAME IE ANY MORE)﴿
SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-‐es2015/
350 BULLET POINTS
https://babeljs.io/docs/learn-‐es2015/
READ THE
EXCELLENT BOOK
EXPLORING ES6
FOR FREE
(﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿
http://exploringjs.com/es6/
LET’S ANALYSE AND
CLEAN UP.
PUT THE WEB ON A
DIET.
ONE OUTDATED
LIBRARY AT A TIME…
http://dev.modern.ie/tools/staticscan/
...
PLEASE, GO AND
MAKE A BETTER
WEB!
• Analyse the speed of your products
and improve it by simplifying them:
webpagetest.org...
YOU MAKE THE WEB,
LET US HEAR WHAT
YOU NEED…
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
Upcoming SlideShare
Loading in …5
×

Of innovation and impatience - Future Decoded 2015

1,846 views

Published on

It is easy to think what we have as developers is what people use and that lead us to make the web bloated.

Published in: Automotive

Of innovation and impatience - Future Decoded 2015

  1. 1. Of innovation and impatience Chris Heilmann @codepo8, Future Decoded, 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. WE’RE SMACK IN THE MIDDLE OF THIS… • We live in a market driven by hype • We work with amazing hardware • We work with great internet connectivity • We get paid very well and assume everybody else is, too.
  5. 5. CONVENIENCE BREEDS MORE CONVENIENCE • Browsers aren’t good enough • Development environments are not predictive and do our work for us • Languages are confusing • We should have to write less code and achieve more Instead of celebrating how lucky we are, we complain…
  6. 6. CONVENIENCE BREEDS ARROGANCE • We are not the people who use our products • This is the web -‐ you don’t know your users and you can not tell them what to use • We can’t assume that people upgrade all the time
  7. 7. On the web, Moore’s law is tricky to apply…
  8. 8. THE WEB IS AN AMAZING IDEA AND OFFER… • Access to information world-‐wide, 24⨉7 • Independent of hardware, software, ability, or geographical location • A read/write medium, everybody is invited to become a creator and not just a consumer
  9. 9. ONE PERSON’S BEAUTY IS ANOTHER ONE’S WORRY… • It is hard to build software and interfaces for the unknown • Open distribution, caching and availability of source code is anathema to content providers wanting to protect their content.
  10. 10. THE NEXT USERS ARE NOT THOSE WHO COMPLAIN THE WEB IS NOT AS GOOD AS NATIVE APPS… https://vimeo.com/139312920 https://brucelawson.github.io/talks/2015/velocity Bruce Lawson at SOTB 2015
  11. 11. THE NEXT CHALLENGE IS NOT IN COFFEE SHOPS IN THE SILICON VALLEY…
  12. 12. We’ve done a great job applying May’s law on the web…
  13. 13. 🕗15 SECONDS
  14. 14. 🕗15 SECONDS http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THE TIME WE HAVE TO WAIT FOR THE AVERAGE PAGE TO FULLY LOAD…
  15. 15. http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THAT’S A PRETTY TERRIBLE STATE OF THE WEB. • 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 • Most sites fail to take advantage of core image optimisation techniques • A lot is down to advertising and third party includes (﴾social buttons)﴿
  16. 16. WHAT TO DO?
  17. 17. WE HAVE THE TECHNOLOGY! WE CAN PATCH IT!
  18. 18. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://instantarticles.fb.com/ Facebook: Instant Articles
  19. 19. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://www.ampproject.org/ Google:Accelerated Mobile Pages (﴾AMP)﴿
  20. 20. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://www.apple.com/news/ Apple News
  21. 21. OPEN, BUT KIND OF CLOSED…
  22. 22. WE’RE NOT APPLYING TECHNOLOGY IN A WEB FRIENDLY FORMAT…
  23. 23. WHAT DOES THIS CODE DO?
  24. 24. JAVASCRIPT ABUSE IS RAMPANT…
  25. 25. 3MB OF BLOCKING JAVASCRIPT BEFORE THE FIRST WORD APPEARS ON THE PAGE!
  26. 26. WHAT THE HELL HAPPENED HERE?
  27. 27. 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!
  28. 28. THE ANSWER IS ALWAYS JAVASCRIPT • Javascript is too powerful for its own good. • Almost everything that goes wrong can be controlled and to a degree fixed with JavaScript • This leads to people relying on libraries and frameworks
  29. 29. WE USE CODE WE DON’T UNDERSTAND TO FIX ISSUES WE DON’T HAVE… • Learning libraries and frameworks beyond “hello world” costs time and money. • Time you don’t spend on looking at optimising your code • In essence, we value developer convenience over user experience.
  30. 30. DEVELOPER CONVENIENCE, PRODUCTIVITY & EFFICIENCY… #FFD700
  31. 31. IS DEPENDENCY HELL A PROBLEM OF THE TOO PRIVILEGED? https://www.youtube.com/watch?v=PA139CERNbc Stephan Bönnemann (﴾JSConfEU 2015)﴿: Dependency Hell Just Froze Over
  32. 32. SHOULD WE BUILD EVERYTHING FROM SCRATCH?
  33. 33. OLD ISSUES, NOW IN THE NEXT LANGUAGE…
  34. 34. TWITTER DISCUSSIONS
  35. 35. CONTROL OVER WHAT IS HAPPENING IN THE BROWSER #FFD700
  36. 36. REPLACING BUILT-‐IN FUNCTIONALITY FOR THE SAKE OF CONTROL…
  37. 37. IF WE BUILD CLIENT-‐ SIDE SOLUTIONS WE DON’T CONTROL WHERE OUR CODE RUNS.
  38. 38. HOMEWORK / SNEAK PREVIEW OF GREAT INSIGHTS… PAUL LEWIS @AEROTWIST
  39. 39. THE DOM IS SLOW?
  40. 40. ANALYSING BROWSER RESULTS… npm install -‐g bigrig github.com/GoogleChrome/big-‐rig github.com/GoogleChrome/node-‐big-‐rig
  41. 41. It’s part of my life I won’t get back. Like they’re murdering me, but just a little … with this really tiny knife -‐ Henry Rollins
  42. 42. SIMPLY BECAUSE WE CAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN WE SHOULD!
  43. 43. AVOIDING COMPLEXITY
  44. 44. BUT IT IS THE PROFESSIONAL WAY! https://egghead.io/series/how-‐to-‐ write-‐an-‐open-‐source-‐javascript-‐ library
  45. 45. WE MADE JAVASCRIPT COMPLEX AND KIND OF SCARY…
  46. 46. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
  47. 47. • We work around browser issues • We make web standards of tomorrow work today. • We build solutions to clean up others and make them smaller • And each of those comes with a “don’t use in production” label. BUILDING LIBRARIES AND FRAMEWORKS THAT MAGICALLY FIX THINGS HAS BECOME FASHIONABLE…
  48. 48. NSFW
  49. 49. THAT’S COOL -‐ GO NUTS AND PLAY WITH ANY TECHNOLOGY YOU WANT…
  50. 50. FRAMEWORKS ARE GREAT… • They are fun to use -‐ achieve a lot very quickly • You build complex apps in a matter of minutes • They work around pesky browser bugs • They are good on your CV
  51. 51. …BUT THEY ALSO COME WITH DEVELOPER COST • Learning new frameworks • Re-‐learning new frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
  52. 52. AND WE SHOULD CONSIDER THE EFFECTS WE HAVE ON OUR END USERS… • Time to load / execute • Bandwidth used • CPU usage • Frame rate (﴾60 fps)﴿ • Memory usage • Battery hunger
  53. 53. WHAT ABOUT USERS OF OLD BROWSERS LIKE IE8 -‐ WE CAN’T LEAVE THOSE BEHIND! #FFD700
  54. 54. WE ALREADY DID.
  55. 55. LATELY I WORKED EXCLUSIVELY IN FIXING ONE MASSIVE ISSUE OF THE WEB…
  56. 56. I REALISED THAT WE MESSED UP -‐ BADLY…
  57. 57. IT IS 2015 -‐ AND IT IS STILL ABOUT BROWSERS?
  58. 58. THE VICIOUS INNOVATION CYCLE…
  59. 59. THE VICIOUS INNOVATION CYCLE…
  60. 60. TRUST ISSUES AND GETTING THE JOB DONE…
  61. 61. WEB DEVELOPERS AND BROWSER MAKERS SHOULD BE FRIENDS, NOT COMPETITORS
  62. 62. LET’S TALK ABOUT SOME GREAT THINGS HAPPENING RIGHT NOW…
  63. 63. OUT OF THE BOX BROWSER DO NOT SUCK ANY LONGER!
  64. 64. COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…
  65. 65. OUR DEBUGGING ENVIRONMENT ROCKS AND GETS BETTER ALL THE TIME…
  66. 66. MONOPOLIES FALL AND SURPRISES HAPPEN…
  67. 67. 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 EVOLVES…
  68. 68. 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 …NOW WE HAVE ES6! • 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
  69. 69. this IS COMPLICATED *** ***
  70. 70. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  71. 71. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  72. 72. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  73. 73. SAVING KEYSTROKES
  74. 74. • Arrow functions as a short-hand version of an anonymous function. • Block-level scope using let instead of var makes variables scoped to a block (if, for, while, etc.) • Classes to encapsulate and extend code. • Constants using the const keyword. • Default parameters for functions like foo(bar = 3, baz = 2) • Destructuring to assign values from arrays or objects into variables. • Generators that create iterators using function* and the yield keyword. • Map, a Dictionary type object that can be used to store key/value pairs. and Set as a collection object to store a list of data values. • Modules as a way of organizing and loading code. • Promises for async operations avoiding callback hell • Rest parameters instead of using arguments to access functions arguments. • Template Strings to build up string values including multi-line strings. ES6 COMES WITH SO MUCH GOODNESS, TECHNICALLY IT HAS TO BE FATTENING…
  75. 75. 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 ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
  76. 76. SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
  77. 77. 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/
  78. 78. THE PROBLEM: FOR NON-‐SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
  79. 79. THE SOLUTION: TRANSPILING INTO ES5… https://babeljs.io • Converts ES6 to older versions on the server or the client • In use by Facebook and many others • Used in editors and tool chains
  80. 80. ✘ Extra step between writing code and running it in the browser. ✘ We don’t run or debug the code we write. ✘ We hope the transpiler creates efficient code ✘ We create a lot of code ✘ Browsers that support ES6 will never get any. THE PROBLEMS WITH TRANSPILING:
  81. 81. https://featuretests.io/ WHAT ABOUT FEATURE TESTING?
  82. 82. ✘ It is an extra step that might be costly ✘ We can only do it client-‐side ✘ We can get false positives -‐ experimental features might be implemented in a rudimentary fashion ✘ We have to keep your feature tests up-‐to-‐date and extend them as needed -‐ support for one feature doesn’t mean support for another. THE PROBLEMS WITH FEATURE TESTING:
  83. 83. YOU CAN USE AN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
  84. 84. THE ES6 CONUNDRUM… • We can’t use it safely in the wild • We can use TypeScript or transpile it • We can feature test for it, but that can get complex quickly • Browsers that support it, will not get any ES6 that way (﴾but can use it internally)﴿ • The performance is bad right now (﴾which is a normal thing)﴿. To improve this, we need ES6 to be used in the wild… http://www.sitepoint.com/the-‐es6-‐conundrum/
  85. 85. YOU CAN HELP MAKE THIS BETTER!
  86. 86. BE ACTIVE! If you use JavaScript in an environment you control, please use ES6 and feed back your experiences to the browser creators and the standard bodies.
  87. 87. 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
  88. 88. 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.
  89. 89. WITH ES6 WE HAVE A CLEAN NEW SLATE… (﴾AND YOU CAN’T BLAME IE ANY MORE)﴿
  90. 90. SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-‐es2015/
  91. 91. 350 BULLET POINTS https://babeljs.io/docs/learn-‐es2015/
  92. 92. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
  93. 93. LET’S ANALYSE AND CLEAN UP. PUT THE WEB ON A DIET. ONE OUTDATED LIBRARY AT A TIME… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
  94. 94. PLEASE, GO AND MAKE A BETTER WEB! • Analyse the speed of your products and improve it by simplifying them: webpagetest.org • Stop trying to guess what browser is in use and assume unknown browsers to be good, not terrible. • Keep up to date with what browsers can do: caniuse.com and use it! • File bugs, report issues, talk to us!
  95. 95. YOU MAKE THE WEB, LET US HEAR WHAT YOU NEED…
  96. 96. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×