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.

Can we make es6 the baseline of the “modern web”? - BrazilJS 2105

4,866 views

Published on

My keynote for BrazilJS discussing the issues with ES6 and the need for developer participation and use.

Published in: Education

Can we make es6 the baseline of the “modern web”? - BrazilJS 2105

  1. 1. CAN WE MAKE ES6 THE BASELINE OF THE “MODERN WEB”? CHRIS HEILMANN (@CODEPO8), BRAZILJS 2015
  2. 2. IN MOST BANDS, THE BASS PLAYER IS A VERY IMPORTANT PART, THAT NOBODY GIVES ENOUGH CREDIT.
  3. 3. THE BASS BRINGS THE DRIVE, IT MOVES THE SONG FORWARD, KEEPS IT IN RHYTHM AND TIGHT…
  4. 4. MANY BANDS I ADMIRE ARE BASS-DRIVEN… (MOTORHEAD, FAITH NO MORE, RED HOT CHILLI PEPPERS, PRONG, SACRED REICH, CLUTCH, NINE INCH NAILS, PRIMUS…)
  5. 5. AND YET, WHEN IT COMES TO ROCKSTARS AND THE ONES THAT GET MOST OF THE CREDIT, IT’S THE FRONTMEN AND SINGERS…
  6. 6. THESE ALSO BURN OUT FAR TOO OFTEN AND MOVE ON TO LESS SUCCESSFUL SOLO CAREERS.
  7. 7. MOST BASS PLAYERS ARE DEDICATED TO KEEPING THE BAND TOGETHER.
  8. 8. THEY ARE ALSO THE ONES WITH THE BEST CONNECTIONS TO OTHER BANDS.
  9. 9. BRUCE CODDINGTON @BRUCECODDINGTON
  10. 10. GITHUB SHIRT JS STICKER
  11. 11. Bruce is an ex-rockstar wannabe that stumbled across web development over a decade ago. He loves writing JavaScript, trying new frameworks, and using other people’s good ideas to make his life easier … He is currently the Chief Operating Officer for a small finance company so all of his coding is officially for fun. https://nejsconf.com/2015/brucecoddington/
  12. 12. THIS ROCKS!
  13. 13. IT SHOULDN’T BE ABOUT WHO IS BANGING THE DRUM THE LOUDEST…
  14. 14. OR SCREAMS THE LOUDEST AND IS ANGRY ABOUT EVERYTHING…
  15. 15. Bruce is an ex-rockstar wannabe that stumbled across web development over a decade ago. He loves writing JavaScript, trying new frameworks, and using other people’s good ideas to make his life easier … He is currently the Chief Operating Officer for a small finance company so all of his coding is officially for fun. https://nejsconf.com/2015/brucecoddington/
  16. 16. Bruce is an ex-rockstar wannabe that stumbled across web development over a decade ago. He loves writing JavaScript, trying new frameworks, and using other people’s good ideas to make his life easier … He is currently the Chief Operating Officer for a small finance company so all of his coding is officially for fun. https://nejsconf.com/2015/brucecoddington/
  17. 17. Bruce is an ex-rockstar wannabe that stumbled across web development over a decade ago. He loves writing JavaScript, trying new frameworks, and using other people’s good ideas to make his life easier … He is currently the Chief Operating Officer for a small finance company so all of his coding is officially for fun. https://nejsconf.com/2015/brucecoddington/
  18. 18. Bruce is an ex-rockstar wannabe that stumbled across web development over a decade ago. He loves writing JavaScript, trying new frameworks, and using other people’s good ideas to make his life easier … He is currently the Chief Operating Officer for a small finance company so all of his coding is officially for fun. https://nejsconf.com/2015/brucecoddington/
  19. 19. I AM TIRED OF THE FIGHTS AND AGGRESSIVE FANS…
  20. 20. THERE ARE A FEW THINGS ABOUT THE WEB THAT CAN’T BE CHANGED… 'use strict'; const web = 1;
  21. 21. THE WEB IS DESIGNED TO WORK INDEPENDENT OF HARDWARE, SOFTWARE, ABILITY OR LOCATION.
  22. 22. NATIVE, MORE DEFINED ENVIRONMENTS CAN INNOVATE FASTER, AS THEY CONTROL THE USER.
  23. 23. THERE’LL ALWAYS BE BROWSER FRAGMENTATION
  24. 24. OUR JOB IS TO DELIVER CONTENT AND FUNCTIONALITY TO END USERS. WE ARE THERE FOR THEM. NOT THEY FOR US. ?
  25. 25. http://www.w3.org/TR/html-design-principles/#priority-of-constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once. “ PRIORITIES OF CONSTITUENCIES…
  26. 26. THIS IS A TALL ORDER, AND WE HAVE TO FIND A WAY TO DEAL WITH THIS.
  27. 27. THE MAIN THING THAT DEMANDED CHANGE (AND CAUSED A LOT OF DRAMA) IS THE RISE OF MOBILE.
  28. 28. ON MOBILE, THE DECK IS STACKED AGAINST THE WEB…
  29. 29. ON MOBILE, THE DECK IS STACKED AGAINST THE WEB… • Browsers are hard-wired and update with operating systems • Hardware creators, service providers and even third party vendors fork and release their own unholy versions of the OS and the browser. • The more you control the experience, the more competitive you are.
  30. 30. TO COMPETE ON MOBILE, WE NEED OUR WEB TECHNOLOGY STACK TO IMPROVE.
  31. 31. THE NEEDS FOR JAVASCRIPT HAVE CHANGED OVER THE YEARS. WE NEED TIRES WITH MORE GRIP FOR THE CHANGED WEB.
  32. 32. IT IS IMPOSSIBLE, OR AT LEAST VERY DANGEROUS TO DO SO TO A MOVING CAR…
  33. 33. THIS IS WHY A LOT OF DISCUSSION ABOUT WEB INNOVATION ASSUMES DEFINED ENVIRONMENTS… • Many innovative ideas are experimental in one browser for a long time • Some features rely on pre- processing, post-processing or compilation • Some features even rely on conversion to binary formats • A lot of great innovation happens on the server side in node environments.
  34. 34. THERE IS NOTHING WRONG WITH THAT. BUT WE NEED TO FIND A WAY TO MOVE THE WHOLE WEB FORWARD.
  35. 35. TODAY YOU WILL HEAR A LOT ABOUT NEW IDEAS, NEW INNOVATIONS AND NEW APPROACHES TO SOLVE OUR PROBLEMS.
  36. 36. ONE OF THE MOST PROMISING AND IMPORTANT TO ME IS ES6.
  37. 37. • 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…
  38. 38. 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
  39. 39. SUPPORT IS ENCOURAGING, BUT ALSO PATCHY http://kangax.github.io/compat-table/es6/
  40. 40. THE PROBLEM: FOR NON-SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
  41. 41. THE SOLUTION: TRANSPILING INTO ES5… https://babeljs.io
  42. 42. ✘ It adds an extra step in between writing code and running it in the browser - probably the thing that made the web grow as fast as it did. ✘ We don’t run or debug the code we write. ✘ We’re at the mercy of the transpiler to create efficient code ✘ We create probably much more code than We need ✘ Browsers that support ES6 will never get any. THE PROBLEMS WITH TRANSPILING:
  43. 43. https://featuretests.io/ WHAT ABOUT FEATURE TESTING?
  44. 44. ✘ 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:
  45. 45. YOU CAN USE AN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
  46. 46. ✘ They makes us dependent on that abstraction ✘ We can’t control possible version clashes in the abstraction layer - if the creators choose to make a new version completely different all our code needs changing ✘ Maintainers need to know the abstraction instead of the standard of ES6 PROBLEMS WITH ANY ABSTRACTION
  47. 47. CONTROVERSIAL STATEMENT FOLLOWING!
  48. 48. WE ALL KNOW THE DOM IS SLOW, TERRIBLE AND TO BLAME FOR ALL OUR PROBLEMS. https://www.youtube.com/watch?v=Y2Y0U-2qJMs http://ejohn.org/blog/the-dom-is-a-mess/
  49. 49. WE ALL KNOW THE DOM IS SLOW, TERRIBLE AND TO BLAME FOR ALL OUR PROBLEMS. DID WE ALLOW IT TO STAY THAT WAY AND STILL BE A PROBLEM AS WE ABSTRACTED ITS ISSUES AWAY?
  50. 50. 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…
  51. 51. BUT THERE’S ALSO GOOD NEWS!
  52. 52. THINGS YOU LEARN WHEN YOU WRITE A NEW JS ENGINE https://channel9.msdn.com/events/WebPlatformSummit/2015/Chakra-The- JavaScript-Engine-that-powers-Microsoft-Edge @BTERLSON @GAURAVSETH
  53. 53. THINGS YOU LEARN WHEN YOU WRITE A NEW JS ENGINE ✘ Only a third of the top 3000 sites can benefit from JS inlining. Reason is lots of scripts instead of concatenation. ✘ You need to optimise a lot of JS in the engine (length reading on every iteration of for loops!) ✘ Outdated libraries are still very much in use and clash with new JS features (mootools breaking with array.contains(), zepto disliking array constructors) ✓ Minification is used a lot on the web and optimising for uglify.js code is a big win
  54. 54. THINGS I LEARNED WORKING FOR BROWSER MAKERS ✓ It is a constant race not to break the web - every mistake web developers make needs to get catered for. ✓ The pressure is immense. Instead of pushing for an interoperable web, browsers are constantly compared and expected to be different. ✓ When implementing standards, we find a lot of problems and feed them back. That’s why a score of 100% in feature tests makes no sense. ✓ Most speed increases are based on analysing and fixing developer mistakes/sloppiness.
  55. 55. ONE PROBLEM ES6 DOESN’T HAVE THAT A LOT OF OTHER INNOVATION HAS IS THAT SAFARI IOS IS ON BOARD… http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/
  56. 56. WE NEED YOU TO HELP US FIX THIS ISSUE. LET’S MAKE A BASELINE A REALITY.
  57. 57. HELP ES6 BY LOOKING AT ITS UNIT TESTS… https://github.com/tc39/test262 http://test262.ecmascript.org/
  58. 58. YOU CAN LEARN AND FIX ISSUES. http://es6katas.org
  59. 59. CHECK BACK PERIODICALLY ON SUPPORT http://kangax.github.io/compat-table/es6/
  60. 60. TEST ES6 PERFORMANCE http://kpdecker.github.io/six-speed/
  61. 61. THE GREAT THING ABOUT JAVASCRIPT IS THAT IT IS A VERY FLEXIBLE LANGUAGE USED IN MANY ENVIRONMENTS…
  62. 62. ES6 SHOULD NOT BE A FUTURE PROMISE BY BROWSER VENDORS, PLATFORM OWNERS, OR LIBRARY CREATORS. IT IS UP TO US TO CATCH THAT CARROT AND EAT IT.
  63. 63. TRY TO USE AS MUCH ES6 AS YOU CAN - EVEN IN THE CLIENT • Feature test for a few things that do make a lot of sense - promises for example. • Get to play with template strings inside <template> elements - you are already in a non-poly-fillable world then. • Run tests, feed back what works and what doesn’t • This kind of research is never a waste, and it means you learn by doing.
  64. 64. IN DEFINED ENVIRONMENTS GO CRAZY AND TEST AS MUCH AS YOU CAN. • Node solutions, browser extensions, in-browser functionality are all great opportunities to knock out kinks of the standard. • You control the environment and no browser support isn’t a problem for you. • Any issue found here can speed up adaptation on the client - better to find it now than when it is too late.
  65. 65. ABOVE ALL, FIND SOME LOVE FOR INNOVATION
  66. 66. YOU ARE A CREATOR OF THE NEXT WEB! • The web became the success it is because people like you cared for it - there was not one company to tell the world how to use it. • This is important and should be cherished by all involved. • Help it stay that way, by supporting those pushing it forward and using what is on offer • Features get prioritised when they are in use by developers - so, see what you can do to give back real data using new and innovative technology in real products.
  67. 67. THANK YOU! CHRIS HEILMANN @CODEPO8 Stick and Carrot: Alan O’Rourke https://www.flickr.com/photos/33524159@N00/17233999165 Stick, Carrot and heart: opensourceway https://www.flickr.com/photos/47691521@N07/5537457133/ Changing tire: Afroswede https://www.flickr.com/photos/51035768826@N01/1172892 Speeding Car: amira_a https://www.flickr.com/photos/46646401@N06/6778014952 Rocks: Tambako the Jaguar https://www.flickr.com/photos/8070463@N03/5143889969/ Drummers: abbilder https://www.flickr.com/photos/21617436@N00/8770084959/ Screaming singer: Photohunny https://www.flickr.com/photos/43122725@N07/5981736281/ Screaming at fight: martingarri https://www.flickr.com/photos/38001453@N00/6191907945 Raygun: miss_rogue https://www.flickr.com/photos/92544710@N00/190255724 Tired Dog: Mini D https://www.flickr.com/photos/24963327@N00/14934721105 Fix: Deborah Fitchett https://www.flickr.com/photos/31320962@N05/4374565545 Card Deck: waitscm https://www.flickr.com/photos/78341140@N00/6245359243/

×