Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Hello! My name is Jens. I’m @diskwriter on twitter. Getting started with ES6 HELLO!

Slide 3

Slide 3 text

Getting started with ES6 a.k.a. ES2015 ES6 HELLO!

Slide 4

Slide 4 text

Getting started with ES6 ES6, why does it matter? FIRST THINGS FIRST

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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?)

Slide 9

Slide 9 text

Getting started with ES6 FIRST THINGS FIRST Most famous implementations of this standard are JavaScript & ActionScript (Runs on the flash platfom)

Slide 10

Slide 10 text

Getting started with ES6 ES6 brings new features to JavaScript. FIRST THINGS FIRST

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Getting started with ES6 Block scoped vs. function scoped WHAT’S NEW?

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Getting started with ES6 Arrow functions WHAT’S NEW?

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

Getting started with ES6 WHAT’S NEW? Now what does that look like? A Promise can be instantiated via new Promise();

Slide 20

Slide 20 text

Getting started with ES6 WHAT’S NEW?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Getting started with ES6 Template literals WHAT’S NEW?

Slide 23

Slide 23 text

Getting started with ES6 WHAT’S NEW? Template literals, identified by the back-tick ` (or grave accent), allow for string interpolation and multiline strings.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Getting started with ES6 WHAT’S NEW? For…of returns the values in the array.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Getting started with ES6 Classes WHAT’S NEW? Really short segment on classes: mainly because I’m not completely convinced about their syntax yet.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

Getting started with ES6 What do you need? GETTING STARTED, FOR REAL NOW

Slide 30

Slide 30 text

Getting started with ES6 Absolutely nothing! GETTING STARTED, FOR REAL NOW * * You actually do need some stuff. Sorry for doing that.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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?

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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?

Slide 36

Slide 36 text

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!

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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)

Slide 39

Slide 39 text

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 - …

Slide 40

Slide 40 text

Getting started with ES6 We’re hiring! WHAT WILL THE FUTURE BRING? ( http://www.kunstmaan.be/jobs )

Slide 41

Slide 41 text

Getting started with ES6 Thanks! THANKS!