The ES6 Conundrum - All Things Open 2015
9 likes5,736 views
The document discusses the ES6 (ECMAScript 2015) specification and challenges with adopting it. Some key points: - ES6 provides many new features but poses issues as browsers have varying support levels - Transpiling ES6 to ES5 allows use of new features but adds steps and browsers never get the native code - Feature testing can be used but has limitations and complexity - Options like libraries introduce dependencies rather than using the standard - Widespread testing and use of ES6 is needed to improve support and performance in browsers
The ES6 Conundrum - All Things Open 2015
- 1. THE ES6 CONUNDRUM ADVANCING JAVASCRIPT WITHOUT BREAKING THE WEB CHRIS HEILMANN @CODEPO8 ALL THINGS OPEN 2015
- 2. TODAY, I WANT TO TALK TO YOU ABOUT JAVASCRIPT…
- 3. JAVASCRIPT IS… • An incredibly versatile language • Available web-‐wide and across many platforms • Toolset independent • Forgiving and inviting
- 4. YOU CAN USE JAVASCRIPT • In browsers on the web • On the server • In applications • To access services • As a data format (﴾JSON)﴿ • On hardware • … your turn, surprise me :)﴿
- 5. THE FLEXIBILITY OF JAVASCRIPT MAKES ALL OF THIS POSSIBLE…
- 6. JAVASCRIPT IS IN SUPER HIGH DEMAND! https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
- 7. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
- 9. JAVA IS TO JAVASCRIPT LIKE HAM IS TO HAMSTER
- 10. 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 IT’S BEEN A BUMPY RIDE…
- 11. 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
- 12. INTERMISSION: NOT BREAKING THE WEB IS A GOOD THING!
- 14. 3MB OF BLOCKING JAVASCRIPT BEFORE THE FIRST WORD APPEARS ON THE PAGE!
- 15. WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…
- 16. 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
- 17. 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.
- 18. IF YOU THINK JAVASCRIPT, THINK ESCALATORS.
- 19. EMBRACING ES6 PROMOTES JS FROM A HACK TO A LANGUAGE TO BUILD LARGE PRODUCTS WITH.
- 20. • 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…
- 21. 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
- 22. SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
- 23. 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/
- 24. THE PROBLEM: FOR NON-‐SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
- 25. 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
- 26. ✘ 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:
- 28. ✘ 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:
- 29. YOU CAN USE AN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
- 30. ✘ They makes us dependent on that abstraction ✘ We can’t control possible version clashes in the abstraction layer ✘ Maintainers need to know the abstraction instead of the standard of ES6 PROBLEMS WITH ANY ABSTRACTION
- 31. 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/
- 32. TEST ES6 PERFORMANCE http://kpdecker.github.io/six-‐speed/
- 33. YOU CAN HELP MAKE THIS BETTER!
- 34. 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.
- 35. HELP ES6 BY LOOKING AT ITS UNIT TESTS… https://github.com/tc39/test262 http://test262.ecmascript.org/
- 36. YOU CAN LEARN AND FIX ISSUES. http://es6katas.org
- 37. SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-‐es2015/
- 39. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
- 40. JAVASCRIPT HAD A BUMPY RIDE, AND MANY PREJUDICES PERSIST. OPEN YOUR MIND AND LEARN HOW FAR IT IS COME AND WHAT IT CAN DO FOR YOU.