the future is here: ecmascript 6 in the wild
TRANSCRIPT
About me
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
Why?
● Considerable set of new features and improvements
● Backwards-compatible, but unavoidable● Google, Mozilla, Yahoo!, PayPal, airbnb
6
OOP…?
7
Classes
8
Block scope
…
……
9
Arrow functions
…
…
10
Spread, rest, destructuring
11
And more...
● Tail call optimisation● Promises● Proxies● Generators● Object literal extensions● Modules● const
12
Where?
● New project started in October 2014● Frontend with complex logic/ algorithms● Around 8+ teammates● Decided to start using ECMA6 around
December
13
14
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
ECMA6 Code ECMA5 Code
Polyfill
BabelBrowserifyTransform
BrowserifyESLint
Grunt
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
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
We try...
● Didn’t change all code to ECMA6 idioms● Internal workshops● This presentation● Suggestions during code review● Convince, not coerce people
19
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
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
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
Your move.
Grunt/ Browserify/ Babel setup
ECMA7 features
● Object.observe● Async functions (turbocharged Promises)● Array comprehension● Reflection● SIMD
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