Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ecma6 in the wild

373 views

Published on

Ecma6 in the wild

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ecma6 in the wild

  1. 1. ECMAScript 6 in the Wild Tudor.Panescu@cynny.com CodeCamp, 25.04.15, Iasi, Romania
  2. 2. Presentation online
  3. 3. About me
  4. 4. 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
  5. 5. Why? ● Considerable set of new features and improvements ● Backwards-compatible, but unavoidable ● Google, Mozilla, Yahoo!, PayPal, airbnb 6
  6. 6. OOP…? 7
  7. 7. Classes 8
  8. 8. Block scope … … … 9
  9. 9. Arrow functions … … 10
  10. 10. Spread, rest, destructuring 11
  11. 11. And more... ● Tail call optimisation ● Promises ● Proxies ● Generators ● Object literal extensions ● Modules ● const 12
  12. 12. Where? ● New project started in October 2014 ● Frontend with complex logic/ algorithms ● Around 8+ teammates ● Decided to start using ECMA6 around December 13
  13. 13. 14
  14. 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
  15. 15. 16 ECMA6 Code ECMA5 Code Polyfill Babel Browserify Transform BrowserifyESLint Grunt
  16. 16. 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
  17. 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
  18. 18. We try... ● Didn’t change all code to ECMA6 idioms ● Internal workshops ● This presentation ● Suggestions during code review ● Convince, not coerce people 19
  19. 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
  20. 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
  21. 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
  22. 22. www.iasijs.com
  23. 23. Your move.
  24. 24. Grunt/ Browserify/ Babel setup
  25. 25. ECMA7 features ● Object.observe ● Async functions (turbocharged Promises) ● Array comprehension ● Reflection ● SIMD
  26. 26. 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

×