ECMAScript 6 in the WildTudor.Panescu@cynny.com

CodeCamp, 25.04.15, Iasi, Romania

Presentation online

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

www.iasijs.com

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