The document presents an overview of ECMAScript 6 (ES6), which was set to be released in June 2015 and introduces significant new features and improvements to JavaScript. The author discusses how ES6 is being integrated into projects using transpilers like Babel, highlighting a transition that comes with a learning curve and necessitates adaptability to future standards. Resources for further learning and updates on additional ECMAScript features are also provided.

2. ECMAScript 6 in the Wild
Tudor.Panescu@cynny.com
CodeCamp, 25.04.15, Iasi, Romania

3. Presentation online

4. About me

5. What?
● ECMAScript 6 (Harmony) will be behind the
next major version of JavaScript
● To be released in June, 2015
● ECMA5 was released in 2009
● Fun fact: ECMA6 features were initially
planned for ECMA4
5

6. Why?
● Considerable set of new features and
improvements
● Backwards-compatible, but unavoidable
● Google, Mozilla, Yahoo!, PayPal, airbnb
6

7. OOP…?
7

8. Classes
8

9. Block scope
…
…
…
9

10. Arrow functions
…
…
10

11. Spread, rest, destructuring
11

12. And more...
● Tail call optimisation
● Promises
● Proxies
● Generators
● Object literal extensions
● Modules
● const
12

13. Where?
● New project started in October 2014
● Frontend with complex logic/ algorithms
● Around 8+ teammates
● Decided to start using ECMA6 around
December
13

14. 14

15. How?
● Transpilers: convert ES6 code to valid ES5
● Babel (née 6to5), Traceur, Closure
● Chosen the one with:
○ most new features implemented
○ most useful features implemented
● Fortunately easy choice, Babel: babeljs.io
15

16. 16
ECMA6 Code ECMA5 Code
Polyfill
Babel
Browserify
Transform
BrowserifyESLint
Grunt

17. So simple?
● Lucky because of existing Grunt/ Browserify
setup
● Nevertheless, Babel is very easy to integrate
in any workflow
● JSHint: replaced with ESLint
● JSDoc: not working...
17

18. Are we human?
● Considerable learning curve
● Old habits die hard
○ Crockford: “let is the new var”
○ See “===” vs “==”
● “This doesn’t look like JavaScript anymore!”
○ See the Class syntax
○ “This is ugly!”: arrows, spread
18

19. We try...
● Didn’t change all code to ECMA6 idioms
● Internal workshops
● This presentation
● Suggestions during code review
● Convince, not coerce people
19

20. Features we use
● Arrow functions
○ More concise callbacks
○ Got rid of .bind() and other synonyms
● let
● Template strings
● Default parameter values
● for … of
● TODO: classes
20

21. To ∞ and ECMA7
● ECMA6 is nice
● ECMA6 is unavoidable
● We need to start being more adaptable:
○ One new standard specification per year
○ Babel already includes ECMA7 features
● Transition is not easy, but it becomes harder
with time
21

22. Resources
● http://kangax.github.io/compat-table/es6/
● http://es6-features.org/
● https://github.com/addyosmani/es6-tools
● https://github.com/addyosmani/es6-equivalents-in-es5
● https://babeljs.io/repl/
22

23. www.iasijs.com

24. Your move.

26. Grunt/ Browserify/ Babel setup

27. ECMA7 features
● Object.observe
● Async functions (turbocharged Promises)
● Array comprehension
● Reflection
● SIMD

28. ECMA vs. ECMAScript
● ECMA is a standardisation body
○ ECMA-334 - C# language specification
○ ECMA-367 – Eiffel programming language
○ ECMA-404 - JSON
○ ECMA-408 - Dart programming language
● ECMA-262 - ECMAScript Language
Specification, now at 6th
(7th
?) edition
○ ECMA6 for brevity