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

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

8. JAVASCRIPT
TECHNICALLY
DOESN’T EXIST…

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!

13. JAVASCRIPT ABUSE IS
RAMPANT…

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:

27. https://featuretests.io/
WHAT ABOUT FEATURE TESTING?

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/

38. 350 BULLET POINTS
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.

41. THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM