Node.js Node.js Interactive Europe 2016, 24 Sep 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ECMAScript 6 is so 2015! Meet ES2016

Description

ECMAScript 6 is so 2015! Meet ES2016

Last year we read a lot about ES6, or ES2015. Some have started using it using Babel or other tools, and browsers have started implementing it. But what about the new stuff happening this year? What about ES2016 (and further)? And how can you keep up to date by understanding the spec and it’s different stages?

A

Hello, ah hi welcome everybody, um so let me see here yes hi, so my presentation is about es2016 I'm, Paul, fake and I work at booking.com, where I'm a front-end developer and I'm as front-end as it gets, because I rarely do something with no GS just use grunt, sometimes but I'm not here to talk about no GS I'm here to talk about Eggman script sticks well, seven I mean sorry. um I also run a meetup group called an elation or five, which is mostly here in Amsterdam, but also around the rest of the Netherlands.

A

But you are here to listen about Eggman scripts and as Brendan Eich said it Eggman script was always and I want a trade name that sounded like a skin disease.

A

Which actually meant that he didn't like the name but he'll? He liked the rest of it. So how's Ekman script formed it's. It's there's a bunch of mostly old white people, sitting in a room talking about the process. I'll talk about specifications and making it making it happen for all browsers, and they do it in in five different stages. They do have a stage 0, which is strawman.

A

It's it's all the ideas that people submit and are reviewed in their tc39 meetings, which then leads to a formally accepted proposal in stage 1 goes to stage 2, which then has a draft of the syntax and semantics after that, after the spec text is complete and has at least two implementations behind the flag like in no GS or in chrome, and then it's finished, it's ready for its standard and it passes the unit tests.

A

When it's finished, it means that it can become if it can come into the next yearly iteration of ACMA's ripped now, we've all been working for with acumen script. Six for while now so I thought. Let's do a talk about iconic script, seven or 2016, which was a good idea only. It only came with two new things, so this means that my talk would be done within two minutes, but I'll get on to that later, so Agron script, SiC 2016 or as I like to call it in a day-to-day basis.

A

Agron script, six, seven tradition: the action script, 2016 language specification. So that's how it's called now, I, don't know why well I know why. But, however, we cannot get into it. So there's two things in what I said: there are two things and one of the things in a cue script. 2016 is the exponentiation operator.

A

It's interesting! It's this! Okay! So that's was first well, it's it's it's! This and people might know it from different languages. It's it's basically a better way to do method. Powell you can make squared like this or you can do. You can also do star star equals and then it does doesn't like this. So it's good it's! It looks a little bit cleaner and well that's that's! Basically it it's not a big improvement. It's it's just something!

A

It is supported in in edge and in chrome at the moment, it's it's in a technical preview on Safari and it's in OGS behind the harmony flag.

A

So edges it's interesting because edge is currently really up to date with all the all the ecumene scripts stuff.

A

So if you want to test something out, you can almost always test an edge, so the second thing is also not a very big thing. It's caller eight a prototype that includes which basically means that you, if you want to see something in array, you use a to do it here like this, and now you can do it with that includes.

A

There are some some some minor differences between the two like index off. You couldn't look for not a number inside of a side of array which includes you can another difference is that you couldn't find undefined value if it's, if it wasn't array like this, but some people think well. Why includes why not contains contains makes a lot more sense.

A

It's well because mootools mootools has a thing that they they like to extend the prototypes and they created something called array the prototype that contains- and it basically did something were something that wasn't supposed to be doing.

A

You can learn two things from this one is you should never extend your your prototype if you're using something for a web browser, because otherwise you will get problems with specifications and the other thing is if you're big enough like mootools and the specification will just bend around you.

A

So I read: a prototype includes works on every modern browser and nodejs.

A

So yeah, that's my talk just kidding, I'm! Oh! Thank you. Thank you. Oh I'll, give you a little sneak preview of Ahmed script, 268 edition which, what what's coming next year in ActionScript Oh, not really because the things I'm going to talk about are in stage four, which means that it's completes this. The text, the the spec text, is ready enough implementations, but it has happened in the past that it was removed from that stage just before.

A

Just before the the final specification was released, which actually also happened with the last time when async was supposed to be in less iteration.

A

So this is everything that it that's in stage four at the moment, the moment I wrote this, which was I think last week, so maybe something has changed in the meantime, it's objective values and objective entries, its string that string padding is objects that get their own property descriptors and the async functions and I believe that's it now. There's also trailing commas in function. Parameters, listen calls I will go through these.

A

These five things and explain a bit on how it works and why it's cool, and if you want to look into it yourself, you can go to a get up page for them from tc39 there's. These finished proposals documents where you can find all the links to d to all the proposals, so objective values and objective entries, which I already always thought it was already in there. But apparently it wasn't.

A

We did have objective keys. So say you have an object. You could want to get all the keys from HTG. The object are keys and you get an array of keys. Make sense, object those values. It's the same thing. Only you get two values. It's not really that's hard to understand object. That entries gives you a multi-dimensional array with the key, really key value pair.

A

So yeah, that's useful. If you want to look through everything and do something like this.

A

It's supported in an edge, it's supported in I, think chrome 54, which is probably the next version of the version after that Firefox the technical preview of Safari and notes and behind harmony flags again so string the padding. Is it too early to make the left bad joke?

A

Okay, oh I'll, just don't do it string the padding, it's yeah, it's you can add something in front of a string or after a string you can do it with pet start and pad, and it's not that left or right because of right-to-left languages, which then screws up the syntax a bit so bad start add something to the start of the string bed and add something to the end of the string. So in the first case it adds zeros to the start of the string.

A

Until the string length is three, you can use multiple strings a longer string. So if you want to add something to note with Jess- and you want to have a length of nine, then it will become J SGS J.

A

That start can also be used without a second parameter, which then adds spaces. It could be very useful for tabular data if you want to have everything right, aligned.

A

Well, that's basically it so it sits behind flex in action in Chrome. Firefox already has it Safari has it in in in the next version, which is I, believe this version and note it doesn't have it yet I'm not sure. Does anyone know if it comes no I haven't heard anything about it yet.

A

Next thing is: I got a property descriptors, so it comes a little bit more interesting here. um So it's you should look at the S, because without the S that was already there, you can good get and property descriptor and not all property. Descriptors.

A

So, for what it does it's, if you have an an object with a symbol or a getter, you can just which get on property descriptors. You can get every everything from that object, which is useful if you want to copy properties into an objects with object at a sign. You could do this, you could do it like this. We just have two objects, and then you can merge them together. Sort of way.

A

The only problem was, if you had a setter or getter you couldn't because object dollar sign doesn't assign setters, getters or symbols we'd get on property descriptor you can could get. For example, in this case the fou and you go, then you got the this setter of the fou inning. You could add it to it.

A

Weight object at a sign, but would object dollar sign as I as you see here, it wouldn't work so.

A

If you use a combination of defined properties and get on property descriptors, it will actually wait what am I looking at sorry, oh yeah. So if you use object, defined properties and you use your target and then add all the property descriptors, it will be copied to the to the target object, which is very useful. If you want to merge the objects to get him. Another use case. Is cloning objects?

A

You can do this with object or create with you can have to use, get prototype off and get a property descriptor saying you will have a clone of the object you wanted to duplicate.

A

This is very no! It's reasonably supported it's it's up. It's in all the next versions of Chrome and Firefox, it's in the technical preview of Safari and it's behind harmony, flex and note: it's not an edge yet they're working on it as I thought, so it's coming soon the async function.

A

This is one that was supposed to be coming in. Yes, 2016.

A

But it's it's now hopefully coming in this next version. It's it's again in stage four, so I'm pretty confident that will come this year, I.

A

Will I won't go into the extreme details of it? I will just explain the basic functionality of async I can do an entire talk just on the async, which was my original idea for this talk, but I will just give you a little bit of a idea.

A

um If you want to do something async, it's very old, very basic version. You can do something with a callback and the timeout I. Guess if you see this, you think well, you can do it a lot easier with promises or something, but this is a very basic version which you can then do something: it's not a pretty. It's not really readable. So yeah, as I said in came promises.

A

Promises made it a little bit easier for to work it, but still it's it's not as readable as you might want it and it misses some functionalities.

A

What did I do yeah so async with async functions. You just prepend function with async you, the the function that returns a promise you when you call it, you say a wait and then just waits for that function to to Reese or other promise to resolve, and then it will continue to do the next line. It's very useful, it's very readable- and this is really really really basics of a way. They're a lot more about it. If you Oh, it can also await another time.

A

If you want to do that and you can it's it locks as how you expect it to lock.

A

One thing you want to know is you want to always catch the errors, because if you read, if you your promise rejects, then it will silently it was silently throw an error. So you will not see it in your console, not sure if that happens in no J's as well, but it does happen in all the browsers, so you want to you want to catch. You want to catch the errors within that promise.

A

Whatever you want to know more about async, it's only foo has an excellent article about it. It's it has a lot of useful resources and how you can use async with generators and everything. So you, if you want to know more about it, you might want to check it out.

A

It's not very well supported. Yet it's, it is an edge. It is in Chrome behind flex, so it has the two implementations they need for for it to become a standards. I haven't heard from any other browsers or note on if they're working on it or if it's coming, but I'm, pretty sure it will come soon unless leaders. Finally, there's a trailing commas in function, parameters, lists and calls they used.

A

There was already you can already add a trailing comma in objects and arrays, but it wasn't possible to do it in functions which is now possible.

A

There are not everyone likes it, but I guess I I'm, not a really big fan of it as well, but it's it's good form. I, don't know where is good for can I want to come. Tell me why it's good for first, you control, maybe something like that copy pasting, I'm I, don't know I, don't like it, but it's it's in there.

A

It's an edge, it's in Safari ten, so also this is probably coming so for the last few minutes, I'll go to the the final, the things that are in in Canada that right now so which could still become a stage four. So before the end of the year, there's sim the J s, the api's and the polyfill which you can use. If you do a lot of calculations, game development, maybe something like that, it's really useful. It's! It increases your calculations extremely well, extremely there's a revision of the to string function.

A

It's not very big I, there's, also not a lot of explanation on what is what the revision is. So I haven't really looked into it yet, but I'm not really sure um yeah they're lifting the template with little restriction, and that's about it. So if you want to see what the status is, you have these two links, the tough one is that if the other one are all the specs, there's there's a lot of information about it.

A

If you want to know what what's supported right now was supported in the future, you can go to note green. It has a great compatibility table. I only learned about it today. So it's it's, it's basically the same tests that are on kangh asks, but it's also adds the denied lis world of note. So it's it's pretty great I said Pony foods great website for resources and to elody is also also has a lot of good articles about acting scripts future they'll. He also has a book about I.

A

Can script six and he's probably he's going to come out with a new book soon, so I'm Paul Vick I work at poking to come. If you want to know more about working a book intercom, you can come to me. I hope you, like the presentation, if you did not like the presentation, I work at Expedia. This is my Twitter handle. This is my auto Twitter handle. This is my email address. If you wanna know this is my ICQ number, you have any questions.