Ecma6 in the wild
0 likes235 views
The document discusses ECMAScript 6 (ES6), the next version of JavaScript. It summarizes that ES6 will be released in June 2015 and introduces many new features like classes, block scope, arrow functions, and spread/rest parameters. The author then discusses their experience using ES6 on a project since December 2014 by transpiling ES6 code to ES5 using Babel. They found the transition to have a learning curve but are using features like arrow functions, let, template strings, and default parameters. The document encourages being adaptable to new JavaScript standards being introduced yearly and transitioning to them over time.
Ecma6 in the wild
- 2. ECMAScript 6 in the Wild Tudor.Panescu@cynny.com CodeCamp, 25.04.15, Iasi, Romania
- 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
- 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