SlideShare a Scribd company logo

Ecma6 in the wild

•
•
Codecamp Romania
Codecamp Romania

The document discusses ECMAScript 6 (ES6), the next version of JavaScript. It summarizes the new features in ES6 like classes, block scope, arrow functions, and spread/rest operators. It describes the speaker's experience using ES6 in a project since December 2014 by transpiling ES6 code to ES5 using Babel. Key challenges discussed are the learning curve to adopt new syntax and convincing teammates. Features currently used in the project are listed as arrow functions, let, template strings, and default parameters. The document concludes by noting the need to keep adapting to new standards released annually and resources for learning more about ES6 and ES7.

Related slideshows

Running Through Typescript
Running Through TypescriptRunning Through Typescript
Running Through Typescript
 
.NET compiler platform codename Roslyn
.NET compiler platform codename Roslyn.NET compiler platform codename Roslyn
.NET compiler platform codename Roslyn
 
Adopting language server for apache camel feedback from a java/Eclipse plugi...
Adopting language server for apache camel feedback from a java/Eclipse plugi...Adopting language server for apache camel feedback from a java/Eclipse plugi...
Adopting language server for apache camel feedback from a java/Eclipse plugi...
 
1 of 28
Download to read offline
Ecma6 in the wild
ECMAScript 6 in the Wild Tudor.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 Babel Browserify Transform 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.
Ecma6 in the wild
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

More Related Content

Ecma6 in the wild

  • 2. ECMAScript 6 in the Wild Tudor.Panescu@cynny.com CodeCamp, 25.04.15, Iasi, Romania
  • 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
  • 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
  • 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