The Future is Here: ECMAScript 6 in the Wild
-
Upload
adrian-tudor-panescu -
Category
Software
-
view
95 -
download
3
Transcript of The Future is Here: ECMAScript 6 in the Wild
![Page 1: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/1.jpg)
![Page 4: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/4.jpg)
About me
![Page 5: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/5.jpg)
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
![Page 6: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/6.jpg)
Why?
● Considerable set of new features and improvements
● Backwards-compatible, but unavoidable● Google, Mozilla, Yahoo!, PayPal, airbnb
6
![Page 7: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/7.jpg)
OOP…?
7
![Page 8: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/8.jpg)
Classes
8
![Page 9: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/9.jpg)
Block scope
…
……
9
![Page 10: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/10.jpg)
Arrow functions
…
…
10
![Page 11: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/11.jpg)
Spread, rest, destructuring
11
![Page 12: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/12.jpg)
And more...
● Tail call optimisation● Promises● Proxies● Generators● Object literal extensions● Modules● const
12
![Page 13: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/13.jpg)
Where?
● New project started in October 2014● Frontend with complex logic/ algorithms● Around 8+ teammates● Decided to start using ECMA6 around
December
13
![Page 14: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/14.jpg)
14
![Page 15: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/15.jpg)
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
![Page 16: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/16.jpg)
16
ECMA6 Code ECMA5 Code
Polyfill
BabelBrowserifyTransform
BrowserifyESLint
Grunt
![Page 17: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/17.jpg)
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
![Page 18: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/18.jpg)
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
![Page 19: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/19.jpg)
We try...
● Didn’t change all code to ECMA6 idioms● Internal workshops● This presentation● Suggestions during code review● Convince, not coerce people
19
![Page 20: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/20.jpg)
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
![Page 21: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/21.jpg)
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
![Page 22: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/22.jpg)
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
![Page 24: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/24.jpg)
Your move.
![Page 25: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/25.jpg)
![Page 26: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/26.jpg)
Grunt/ Browserify/ Babel setup
![Page 27: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/27.jpg)
ECMA7 features
● Object.observe● Async functions (turbocharged Promises)● Array comprehension● Reflection● SIMD
![Page 28: The Future is Here: ECMAScript 6 in the Wild](https://reader034.fdocuments.net/reader034/viewer/2022042701/55a66f9a1a28ab615b8b471b/html5/thumbnails/28.jpg)
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