Getting started in ES6

ES2015 - also known by its street name ES6 - is finally here! The information (blog posts, tutorials, ...) out there is overwhelming, but what do you really need to know to get started with these new features? We go over some basics of the new features and highlight new tools like transpilers.

Transcript

2. Hello! My name is Jens. I’m @diskwriter on twitter. Getting started with ES6 HELLO!
3. Getting started with ES6 a.k.a. ES2015 ES6 HELLO!
4. Getting started with ES6 ES6, why does it matter? FIRST THINGS FIRST
5. Ecma International, Founded in 1961, is a standardisation organisation. If you don’t know what that means: You can (kinda) compare them to that other very well known standardisation organisation: The World Wide Web Consortium (W3C). What they (the W3C) do for HTML and CSS, ECMA does for ECMAScript. Getting started with ES6 What is ECMA? FIRST THINGS FIRST
6. Getting started with ES6 What about ECMA-262 and TC39? FIRST THINGS FIRST ECMA-262: Standard that defines the ECMAScript2015 general purpose programming language. (Also other standards like ECMA-402 -internalization- and ECMA-290 -components-) TC39: (or Technical Committee 39): Committee made up of big players on the web. (All major browsers have people there, also large websites and libraries like jQuery)
7. Getting started with ES6 FIRST THINGS FIRST Scope: Standardisation of the general purpose, cross platform, vendor- neutral programming language ECMAScript. This includes the language syntax, semantics, and libraries and complementary technologies that support the language. What this means:
 TC39 is responsible for maintaining, updating and testing the standard of the ECMAScript programming language.
8. Getting started with ES6 FIRST THINGS FIRST ECMAScript is a language specification: In computing, a programming language specification (or standard or definition) is a documentation artifact that defines a programming language so that users and implementors can agree on what programs in that language mean. ECMAScript is a language specification, it is a set of rules that define a programming language. (What should this thing do, and how do I implement it?)
9. Getting started with ES6 FIRST THINGS FIRST Most famous implementations of this standard are JavaScript & ActionScript (Runs on the flash platfom)
10. Getting started with ES6 ES6 brings new features to JavaScript. FIRST THINGS FIRST
11. Getting started with ES6 So… What’s new? WHAT’S NEW? I will only give a short overview over these new features, as there are tons of tutorials out there that will probably explain it better. I’m just here to help you get started. Once you know how to get started, you are good to go with these tutorials.
12. Getting started with ES6 Let & const WHAT’S NEW? Let’s (hehe) start with an easy one: let is roughly the same thing as a var like you know it today. The difference is that a let is block-scoped, while a var is function scoped. const is also block scoped, but creates a constant. A variable whose value can not be changed.
13. Getting started with ES6 Block scoped vs. function scoped WHAT’S NEW?
14. Getting started with ES6 WHAT’S NEW? The situation as we know it. Both vars have a function scope. Which means they are know within fn from the moment they are initialized. They are not know outside of fn.
15. Getting started with ES6 WHAT’S NEW? The new situation: const is defined on the scope of the function and acts the same way as the var it was before. Let however is defined on the block scope of the for loop; it is only known inside of that for loop. Be careful when adapting old code. There are some pitfalls with the new way of scoping. Other items that have a block scope are for example if’s.
16. Getting started with ES6 Arrow functions WHAT’S NEW?
17. Getting started with ES6 WHAT’S NEW? On top: the ES5 way, at the bottom the ES6 arrow functions. Apart from being less verbose than the es5 way, arrow functions take ‘this’ from their surroundings (this is called lexical). This means you can stop storing the ‘this’ in variables because the function handler creates a new scope etc. other lexical variables are: arguments, super, this & new.target.
18. Getting started with ES6 Promises WHAT’S NEW? Straight from MDN: A Promise represents an operation that hasn't completed yet, but is expected in the future. So basically, a placeholder for the result of an operation. You can register callbacks with the promise to be notified once the promise has been completed.
19. Getting started with ES6 WHAT’S NEW? Now what does that look like? A Promise can be instantiated via new Promise();
20. Getting started with ES6 WHAT’S NEW?
21. Getting started with ES6 WHAT’S NEW? A Promise is always one of these 3 states: Pending: The initial state of a Promise Fulfilled: The operation was completed successfully Rejected: The operation has failed
22. Getting started with ES6 Template literals WHAT’S NEW?
23. Getting started with ES6 WHAT’S NEW? Template literals, identified by the back-tick ` (or grave accent), allow for string interpolation and multiline strings.
24. Getting started with ES6 for … of WHAT’S NEW? We already had a forEach method on arrays, and could use the for … in in ES5; however, for…in returns the index of a value in an array, and not the value itself.
25. Getting started with ES6 WHAT’S NEW? For…of returns the values in the array.
26. Getting started with ES6 WHAT’S NEW? Destructuring (extracting data from data stored in objects and arrays), and the new entries() method on arrays allows you to also get the index of the value.
27. Getting started with ES6 Classes WHAT’S NEW? Really short segment on classes: mainly because I’m not completely convinced about their syntax yet.
28. Getting started with ES6 WHAT’S NEW? Classes are basically just a more convenient syntax for constructor functions that already existed in ES5 You can only define functions in a class.
29. Getting started with ES6 What do you need? GETTING STARTED, FOR REAL NOW
30. Getting started with ES6 Absolutely nothing! GETTING STARTED, FOR REAL NOW * * You actually do need some stuff. Sorry for doing that.
31. Getting started with ES6 One JavaScript GETTING STARTED, FOR REAL NOW Why would I do something like that to you? Mainly because there is out-of-the-box support for ES6. Another reason is One javascript. It is the philosophy on how ES6 was integrated in JavaScript. One JavaScript means that all existing ES5 features are also valid ES6 code. ES6 is merely a superset of ES5. (You’ve all already written valid ES6 code! Good job ;) ) This is a necessity because of the nature of the web platform, where versioning javascript would be a major issue. However, this does not allow you to fix some of JavaScript’s quirks
32. Getting started with ES6 It’s not all bad. GETTING STARTED, FOR REAL NOW One JavaScript still means that new ES6 features are actually new. If you’ve used the ‘use strict’; statement you might have noticed that some keywords had been reserved for ES6. (Like let and promise and const…) What do you need to use them, and how well are they supported out-of-the-box?
33. Getting started with ES6 GETTING STARTED, FOR REAL NOW ES6 support table by @kangax: http://kangax.github.io/compat-table/es6/ Things to note from this support table: - No support for IE6-9 (ever). And poor support from IE10-11. Edge is doing really well. - Considering ES6 was only officially released in June, support isn’t that bad.
34. Getting started with ES6 GETTING STARTED, FOR REAL NOW Enabling ES6 support in Chrome: To be able to use ES6 features in Chrome, you should enable the harmony flag. You can do so by going to the following url: chrome://flags/#enable-javascript-harmony and clicking the ‘enable’ button. Enabling ES6 support in Edge: Can be enabled by turning on ‘Experimental JavaScript features’ in about:flags.
35. Getting started with ES6 Transpilers GETTING STARTED, FOR REAL NOW You’ve seen them in the support table. Now what are transpilers? And why would I use one?
36. Getting started with ES6 GETTING STARTED, FOR REAL NOW What is a transpiler? A transpiler compiles source code to source code You use a transpiler to “transpile” ES6 code to ES5 code. Since a lot of ES6 features are syntax improvements on ES5, you can rewrite them in ES5. (For example: let will become var again. Using different names to imitate the block scoping.) Promises do fallbacks to libraries like Q. There are also things that can not be transpiled. Keep that in mind!
37. Getting started with ES6 Babel GETTING STARTED, FOR REAL NOW ( https://babeljs.io/ ) Babel is a transpiler. We’ll be covering this one since it covers the most features at the moment. There are 3 main ways to use it: - You can just include it in your browser like you would any other javascript library. (Only use this for testing, slow); - Install it as a standalone npm module to use it on the command line. - Integrate it in your build system. (Gulp, Grunt, Webpack, …); - There’s also a REPL available where you can use it in browser on their website.
38. Getting started with ES6 Great sources GETTING STARTED, FOR REAL NOW Some websites you definitely want to check out when starting in es6: http://exploringjs.com/es6/index.html (Read the book, really) http://babeljs.io/docs/learn-es2015/ (Great, short intro) http://www.html5rocks.com/en/tutorials/es6/promises/ (Really great explanation of promises) https://davidwalsh.name/ (Has a lot of useful blogposts)
39. Getting started with ES6 What’s next? WHAT WILL THE FUTURE BRING? What does the future hold? - Yearly releases! (Good hopes that browser will be able to keep up…) - ES2016 - async/await - Observables - …
40. Getting started with ES6 We’re hiring! WHAT WILL THE FUTURE BRING? ( http://www.kunstmaan.be/jobs )
41. Getting started with ES6 Thanks! THANKS!