ES 2015: The next javascript version today
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48924 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Revision controlScripting languageJava appletSoftware developerGoodness of fitIndependence (probability theory)VideoconferencingSoftware developerECosAuthorizationScripting languageInformation extractionWave packetPlastikkarteJSONXMLUMLComputer animation
01:12
Programming languageVisual systemSoftware developerVisualization (computer graphics)Web browserTerm (mathematics)WeightPresentation of a groupProgramming languageRight angleScripting languageComputer programmingOperator (mathematics)Java applet
03:30
Software developerPlanningBitComputer animation
04:30
Software developerLarge eddy simulationRevision controlElectric currentSoftware engineeringPresentation of a groupDrum memoryRevision controlRight angleProcess (computing)ExpressionJava appletLatent heatPlanningScripting languageWeb browserComputer animation
06:04
Block (periodic table)Software developerSoftware engineeringBlock (periodic table)Functional programmingVarianceWeb browserLine (geometry)Scripting languageCASE <Informatik>CodeForestRight angleLie groupRange (statistics)Computer animation
08:03
Software developerBlock (periodic table)Interior (topology)Logical constantRight angleBlock (periodic table)Acoustic shadowFunctional programmingLogical constantRevision controlPlastikkarteAreaDeclarative programmingError messageData structureBitComputer animation
08:57
Video game consoleSoftware developerData structureComplex (psychology)Variable (mathematics)TwitterFunction (mathematics)Configuration spaceZugangsverfahrenArray data structureFunctional programmingCategory of beingBitMultilaterationConfiguration spaceSystem callObject-oriented programmingPattern matchingComplex (psychology)Data structureRevision controlVariable (mathematics)Type theoryRight angleSequenceCodecCASE <Informatik>Figurate numberQuantum stateSineSign (mathematics)Line (geometry)Computer animation
12:26
Parameter (computer programming)Default (computer science)Software developerEvent horizonEstimatorVideo game consoleVariable (mathematics)Software engineeringNumberFunction (mathematics)System callDefault (computer science)Parameter (computer programming)Event horizonVariable (mathematics)Functional programmingDot productNumberServer (computing)Web 2.0Inheritance (object-oriented programming)Key (cryptography)Web serviceTemplate (C++)WordSeries (mathematics)Range (statistics)Right angleRevision controlComputer animation
13:46
Template (C++)File formatString (computer science)Software developerAssembly languageRevision controlString (computer science)Template (C++)File formatRight angleCodeExpressionVariable (mathematics)Subject indexingScripting languageCASE <Informatik>Total S.A.Sign (mathematics)Computer animation
14:54
Software developerSoftware engineeringRight angleComputer animation
15:49
Software developerIndian Remote SensingSpacetimeMaizeSign (mathematics)FrequencyRight angleOrder (biology)MereologyDrop (liquid)Physical lawComputer animation
17:54
Software developerSocial classObject-oriented programmingFunction (mathematics)PrototypeSocial classScripting languageFunctional programmingMultiplication signInstance (computer science)Parameter (computer programming)Type theoryCodePrototypeWordComputer animation
19:59
Constructor (object-oriented programming)Social classSoftware developerCategory of beingConstructor (object-oriented programming)Parameter (computer programming)WordCategory of beingSet (mathematics)C sharpException handlingFunctional programmingRight angleComputer animation
21:14
Social classInheritance (object-oriented programming)Software developerConstructor (object-oriented programming)System callSocial classCategory of beingInheritance (object-oriented programming)Parameter (computer programming)C sharpConstructor (object-oriented programming)Message passingFunction (mathematics)Insertion lossPopulation densityComputer animation
22:29
Inheritance (object-oriented programming)LogicSystem callFunction (mathematics)Software developerFunctional programmingInheritance (object-oriented programming)Function (mathematics)Line (geometry)VirtualizationC sharpLogische ProgrammierspracheVariety (linguistics)
23:21
WeightFunction (mathematics)Office suiteNumberRight angleDirection (geometry)Bus (computing)System callType theoryObject-oriented programmingCASE <Informatik>Derivation (linguistics)Revision controlParameter (computer programming)Polymorphism (materials science)Computer animation
24:49
Software developerSoftware engineeringWebsiteCartesian coordinate systemBitDampingBuildingSheaf (mathematics)Data conversionReading (process)Application service providerComputer animation
26:09
Software developerInternetworkingPlanningTurbulenceAreaComputer animation
27:07
Function (mathematics)Arrow of timeSoftware developerPoint (geometry)WordLibrary (computing)CASE <Informatik>Functional programmingParameter (computer programming)Process (computing)Scripting languageRight angleKey (cryptography)Expected valueInsertion lossJava appletArrow of timeOvalCartesian coordinate systemObject-oriented programmingSign (mathematics)Ocean currentProgramming languageLambda calculusType theoryC sharpComputer animation
29:30
Function (mathematics)Category of beingVideo game consoleSoftware developerSequenceSequenceLogische ProgrammierspracheIterationSlide ruleCategory of beingCASE <Informatik>Interface (computing)C sharpMetropolitan area networkPointer (computer programming)Object-oriented programmingProcess (computing)Right angleSystem callWritingSubstitute goodNumeral (linguistics)Different (Kate Ryan album)WordSymbol table
30:59
Interface (computing)Logical constantString (computer science)Symbol tableSoftware developerString (computer science)Symbol tableSequenceSubstitute goodCategory of beingIterationFunctional programmingObject-oriented programmingRight angleSpacetimeDoubling the cubeComputer animation
32:17
Software developerCategory of beingFunction (mathematics)Video game consoleSequenceInterface (computing)Symbol tableLogical constantString (computer science)Object-oriented programmingException handlingSequenceSymbol tableIterationImplementationINTEGRALProcess (computing)Game controllerNumberFunctional programmingElectronic mailing listElement (mathematics)Right angleComputer animation
33:28
Electric generatorSequenceFunction (mathematics)Software developerSequenceFunctional programmingSpecial functionsLoop (music)Electric generatorSystem callObject-oriented programmingIterationParameter (computer programming)ResultantComputer animation
35:03
SequenceElectric generatorFunction (mathematics)Software developerBoiling pointData structureSet (mathematics)Insertion lossFunctional programmingElectric generatorBitComputer programmingParallel computingLine (geometry)AdditionLibrary (computing)Standard deviationRight angleInsertion lossData structureMultiplication signSet (mathematics)Drop (liquid)Object-oriented programmingOrder (biology)Type theoryRoundness (object)Moving averageOffice suiteSystem callComputer animation
38:00
Software developerSet (mathematics)Key (cryptography)Level (video gaming)Object-oriented programmingVariable (mathematics)Vulnerability (computing)Data structureDifferent (Kate Ryan album)String (computer science)MappingCategory of being
38:58
Set (mathematics)Key (cryptography)Software developerVulnerability (computing)Level (video gaming)Object-oriented programmingKey (cryptography)Set (mathematics)MappingTrailMoving average
39:59
CodeError messageSoftware developerFunction (mathematics)TwitterState of matterStandard deviationMultiplicationPattern languageParallel computingFlagFunctional programmingLibrary (computing)Error messageResultantMultiplication signParameter (computer programming)Scripting languageQuery languageComputer animation
43:12
Modul <Datentyp>Structural loadSoftware developerAverageVideo game consoleLogicComputer fileStructural loadCASE <Informatik>Module (mathematics)Pattern languageLibrary (computing)Extension (kinesiology)AverageError messageVariable (mathematics)Process (computing)WeightData structureType theoryScripting languageArrow of timeJava appletWeb browserComputer animation
46:28
Internationalization and localizationReflection (mathematics)Array data structureSoftware engineeringSoftware developerInternationalization and localizationLocal ringElectronic mailing listObject-oriented programmingDot productDecimalReflection (mathematics)RoboticsType theorySign (mathematics)Category of beingSocial classUniform resource locatorWeightFile formatMechanism design
47:38
RobotSoftware developerObject-oriented programmingFunction (mathematics)Run time (program lifecycle phase)Software engineeringShooting methodIncidence algebraRoboticsComputer animationSource code
48:30
Software developerTwin primeObject-oriented programmingRun time (program lifecycle phase)Function (mathematics)Software engineeringWeb browserCodeTwitterScripting languageSet (mathematics)Level (video gaming)Object-oriented programmingMoment (mathematics)Run time (program lifecycle phase)BitVisualization (computer graphics)Revision controlFunctional programmingType theoryCore dumpGroup actionRight angleMultiplication signTranslation (relic)Computer animation
51:40
Software developerCodeWeb browserVisual systemTask (computing)Event horizonBitRight angleType theoryIntelligent NetworkPoint (geometry)CodeVisualization (computer graphics)Installation artFunctional programmingWeb browserMultiplication signTask (computing)Scripting languageComputer fileWordECosAssociative propertyComputer animation
53:33
Visual systemTask (computing)Event horizonSoftware developerFunction (mathematics)Scripting languageProjective planeComputer fileAssociative propertySocial classFunctional programmingWeb 2.0MathematicsSource codeVisualization (computer graphics)Task (computing)Data managementPlug-in (computing)Application service providerDifferent (Kate Ryan album)ResultantCodeTransformation (genetics)Module (mathematics)Library (computing)Function (mathematics)Default (computer science)Object-oriented programmingCASE <Informatik>Computer-assisted translationCoefficient of determinationArithmetic meanVideoconferencingMachine visionProcess (computing)Insertion lossProfil (magazine)Set (mathematics)Scripting languageWeightGoodness of fitRight angleStudent's t-testWebsiteClient (computing)Computer animationSource code
01:00:11
Function (mathematics)Software developerComputer multitaskingConstructor (object-oriented programming)CodeFunctional programmingOnline helpType theoryComputer fileVisualization (computer graphics)DemosceneTask (computing)Event horizonBuildingSource codeComputer animation
01:01:06
Software developerFunction (mathematics)Task (computing)Visualization (computer graphics)Computer fileWeb 2.0Electric generatorCompilerCompilerCompilation albumConfiguration spaceExtension (kinesiology)Scripting languageProcess (computing)Right angleMathematicsCASE <Informatik>Translation (relic)TwitterSource codeComputer animation
01:03:26
Software developerLattice (order)WeightMultiplication signTwitter
Transcript: English(auto-generated)
00:05
So, good morning everyone. Having a great conference so far. Yeah, like it? I especially like the food here, don't you? Like reindeer and stuff. I like that.
00:27
So, I'm here to talk about ES2015. My name is Roland and I'm an independent developer and trainer in the Netherlands.
00:41
I'm also a Pluralsight author. And before I forget, if you want to have a taste of Pluralsight, which is an online training company, so I make the videos for them, you can get a little card here afterwards and you can get on
01:00
for free for one month to try it out. And you should of course watch my courses first. So, what's this session about? Well, we're talking about ECMAScript 2015, which is the same, by the way, as ECMAScript 6. So ES6 is the same as ES2015.
01:29
And this session is for beginners. So, if you have done lots of stuff with ES6 or ES2015, well, you're still free to go to another session because this is really the beginnings of ES6.
01:47
I use the terms ES6 and ES2015 interchangeably, so we know that. So, we're looking at important language enhancements and we're going to look at how to use ES6 today.
02:05
So, it's not supported by all browsers yet, not fully. So, but you can work, already work with it. How many people are .NET people here? All of you, that's great.
02:21
So, you know Visual Studio, right? So, I'm showing Visual Studio in this presentation. All right. So, well, I was thinking, well, this session is about, a lot of about syntax, right? And, well, it's about an hour long.
02:42
It's an early morning, so maybe you are falling asleep or something, you know, halfway. So, to prevent that, I was thinking during the preparations of the session how to keep this presentation interesting. So, I came up with all kinds of ideas and the first one was the drone idea.
03:05
I was like, well, let's buy a drone, put it here and then I program it using JavaScript, right? Using ES6 and I let it take off, fly over the audience, do
03:22
a nice curl or something and then come back and land again. So, I bought a drone and I did some practicing with the drone, but I was not very successful with that. I flew it around and a bit, this is going, still going well,
03:45
but when I landed, I just nearly hit the rock. So, I was like, well, I have to do some more practicing maybe. And there was another problem, because I came here by plane
04:01
and the drone was like this big, it's a paradrone, and, well, I could have encountered some more problems in the plane, maybe. I don't know, it was British Airways, small plane.
04:28
So, this was probably not a good idea. When I practiced some more, the drone looked up, ended up looking like this. So, sorry, no drone.
04:42
So, this was the first idea, maybe have some more in the presentation. So, what is it? Well, I already told you ES2015 is the new name for the ES6 specification, right? It was first called ES6, and then the committee decided to call it ES2015 from now on.
05:03
So, it's the same thing. It's the next version of JavaScript. Well, when you look at the history of JavaScript, the last real version that we had was from years ago. It was ES5, it's now supported by all browsers.
05:21
Finally, it's consistently supported, right? We had some problems with that, and it's a significant improvement, and the committee that comes up with the JavaScript specification also promised to increase the cadence, so there will be more releases.
05:46
The plan is now to have release every year from now on. So, ES6 will give you the foundation for all these new features that are coming in the coming versions.
06:05
So, the first thing is the let. Let, well, before you used var, probably, in JavaScript, and var has, well, it's, we always use that,
06:26
but the problem with var is that it has function scope, always. So, it doesn't matter where you declare a variable in your code, it will always have function scope. So, in this case, if the value was, had a var in front of it,
06:50
it wouldn't have block scope, so when I read out a value here, when I use a var, it will have function scope.
07:04
So, it will be known in the whole function, and how that works in JavaScript is that it's hoisted. That means the var is put as the first line in the function. You don't see that, but it's actually what the browser's doing.
07:24
So, with let, no hoisting occurs. Let really has block scope, so here we use the let with a value, and it's only known in this block. So, that's a great improvement, right?
07:43
And it's such a great improvement that there's really no reason for me anymore to use var anywhere when I write ECMAScript 6. So, let is, well, the replacement maybe for var.
08:01
There's also const, oh, sorry, there's another example here, because we could have conflicts, right, when we have a value that's in the function scope and a value that is in the block scope, it could shadow over the other one,
08:22
and that scenario is actually supported by JavaScript. It's called shadowing, and so in the block, it will have this value, and out of the block, it will remain that value. So, it's kind of smart in this scenario.
08:41
We also have the const, and the const has also block scope, but it's a constant value, right? So, you get a syntax error if you assign the value after declaration. So, there's another thing that's new,
09:00
and that's destructuring, and that's a little bit strange, I think, because I'm a C-sharp guy, and we're not used to this in C-sharp. Here, we see this is the most simple example I came up with.
09:21
You see here, this is an array, an inline array with three values, and I can now declare a variable like this, a, b, c, and this will declare three variables, a, b, and c, with, in sequence, these values. So, a will become 12, et cetera, et cetera.
09:42
So, that is, in essence, destructuring. So, we have a complex type, and arrays can be considered a complex type, and we destructure it using simple variables, yes.
10:05
So, the question is, is this like the same as pattern matching in F-sharp? I really don't know because I don't know F-sharp. Does anybody know? Sorry, don't know.
10:21
So, this is destructuring. So, here we have another example, and this is a bit awkward, actually. The syntax is a bit awkward, and that's why I took this example. So, here, we have a function that returns a complex type, right, an object, with two properties.
10:43
And now, I can call this function here using getValues, and then destructure that thing by saying, well, I want the person object, and in the person object,
11:02
look for a property called firstName, and assign that to a variable called name. And here, I can do the same with Twitter, and use it, well, in this case, it's the same name, and then use that variable later.
11:21
So, I think this, for me, this is a bit confusing, but it's supporting, right, it's supported. So, a much more practical example would be a function that accepts a config, some kind of config object, right,
11:41
that's more common in Java, it's very common in JavaScript to use that. So, I can just, here, declare some config object, giving it two properties, call configure with that object, and then I can just use destructuring to not accept the whole object,
12:01
but just the two properties, and put them directly into variables. So, now, this function accepts all kinds of objects that has these two properties, right, and it directly, it makes them available
12:21
directly in that function. So, that's destructuring. Another one is parameter default values, so we can now say we have a function that accepts a parameter called event, but if event is omitted in a call,
12:40
just put ndc London in that variable. Rest parameters, well, this is not rest in the sense of a rest web server or something, or it's just rest in the sense of the remainder, right,
13:03
the rest. So, here we have a parameter in a function that has three dots in front of it, and that means it can accept any number of parameters.
13:20
So, I can call it with three, or with five, or with 100. This will be an array internally with these values. When you're used to C sharp, think of the params keyword, it does the same thing. It must be the last parameter,
13:42
and that's the only restriction there is. Template literals, we also have this in C sharp right now, in the new version of C sharp, because we have something called interpolated strings,
14:01
and it works almost in the same way. You have some string, but it doesn't have the normal quotes, it has the backticks as the begin and the end, and using these backticks syntax, I can just have some expression inside the string.
14:22
So, in this case, I just use the dollar sign, between parentheses, I'm referring to two variables, and they're just filled in into the string. Maybe you've stringed dot format in C sharp,
14:40
it's actually the same coding style, and we can now have the dollar syntax in C sharp as well, using C sharp six. So it's also supported in JavaScript. So, another idea I had to make this session not so dull
15:01
is to give something away, right? You like that, or not? Yeah, yeah. So I was thinking, well, I'm from Holland, so it would be maybe a good idea to bring something that's typically Dutch. So what is typically Dutch?
15:21
When you go to Amsterdam, you land there, what is typically Dutch, right? So I was thinking, well, maybe go to Amsterdam, go to, and buy some stuff there, and well, turns out that you can buy this stuff
15:44
in Amsterdam freely in coffee shops, not these kinds of coffee shops. We call them coffee shops, but they don't sell coffee at all, I noticed.
16:00
When you'd open the door, you get this really nice odor over you, and they have signs above the counter like this. So you can just, well, maybe you like New York City Diesel,
16:22
or Juicy Fruit, or whatever. So I was like, well, what's this? And then 500 grams instead of five grams, because I wanted to relax the audience a bit, right? And they told me, well, you're going to the UK, right?
16:41
I say, yeah. So when you go with 500 grams, you get arrested and you go to jail. So don't do that. Also a nice thing is this one, it's typically Dutch law. It says, well, you can smoke weed inside,
17:02
as long as there's no tobacco in it, because there's a law in the Netherlands that forbids you to smoke tobacco into coffee shops, right? But not marijuana, and not joints. So that's allowed.
17:21
So in the Netherlands, we have a law that, well, there's actually, this is a shady part of the law. It's allowed, but it's also not explicitly disallowed. It's a bit shady. One of the few countries that have this legalized.
17:45
So I'm sorry, no marijuana, because of that reason, because of customs here. But I have something else. I have some candy, it's called drop. And it's a kind of licorice flavored candy.
18:03
And if you want, after the session, you can get some here, and taste the licorice. And tell me what you think about our licorice. Okay, let's go on.
18:21
A class. Finally, we have classes in JavaScript. Woo! Wow. So no awkwardness with functions that pose as classes or whatever, we just have the class keyword.
18:42
So this is what we used to do. We define a function, and misuse that function as some kind of class. There isn't really a class in JavaScript. And we use a prototype to assign functions because when we do multiple instances of the class,
19:06
we don't want go to work, copy to every instance. We want one central go to work, right? So this is the new syntax. It's a lot better.
19:21
You can now just declare a class, and there's a shorthand method to declare a function inside the class. You could say just go to work with parameters or no parameters, parentheses, with the function body. That's it. You don't have to type function 100 million times
19:43
in your code anymore. And you can just new it up and call the method, of course, like before. So that's, in itself, a reason to use ECMAScript 6, right? So there's also constructor.
20:02
It's a new keyword. So you can define a constructor with parameters and just call that when using new. We also have kind of properties. They're not called properties.
20:21
They're called getter, et cetera. They can just define functions that have the get and set keyword in front of them. So when you use them, you just reference name. And when you assign a value to name,
20:42
the setter is being executed. And when you read that same value, the getter is executed. So they're like the properties in C Sharp. And they're for encapsulation, right? You can encapsulate, you can control what's going out
21:02
and control what's coming in. So exceptions when an age property is one million or whatever. Inheritance is also supported. So you can just say, well, I have a class person here
21:21
and a class employee, and the employee extends person. It derives from the class person. So all the stuff that's in here is copied over. So here we have the class employee now contains a property salary and the property name.
21:44
The base class is called the superclass in JavaScript. So with super, you can call the base class.
22:02
So when we have a constructor here, accepting two parameters and person is accepting one parameter, I can just use the keyword super and pass in this first parameter. So this constructor gets executed.
22:23
It's even simpler than C Sharp is with constructors. And we can of course use overrides like in C Sharp. We just don't have the override and virtual keyword. We just have super. So you can just say, well, the person has go to work.
22:42
I want to override the go to work in the base class in employee. And I will use the functionality that's defined here by calling super and do additional things afterwards or before, whatever you want.
23:03
Or not use this logic or just not use this logic at all and just skip that line. Then you don't use it. You'd have an override to do your own thing. It's also a possibility.
23:25
So polymorphism is also possible using this method. So let's say, so here I'm using the rest parameter. So I've let the persons do work.
23:40
I accept any kind of number of persons, of parameters actually. And I, for each them, because it's an array, right? And I call go to work to each person. So I knew up an employee.
24:03
So that was derived from person, right? And I knew up a person directly. And then I call let persons do work with the two, with these two objects and it just works. And it's also because JavaScript is just not strongly typed, of course.
24:21
So this is not really polymorphism because it just looks, it has this object, this method, and it will just call it. So it doesn't have to be a derivative of person here in this case. Just has to contain the go to work function,
24:42
but it's kind of the polymorphism we're used to. NC Sharp. So I had another idea for lightening up the session a bit. It was a fishbowl idea. So what's the story about the fishbowl?
25:01
Well, I did a course for Pluralsight. It's not out there yet, but it will be soon. And I built a fish tank application using ASP.NET 5. And the idea is that I deploy the fish tank application
25:23
to a Raspberry Pi and then stick it on the side of the fish tank and then get all kinds of readings from the fish tank. So that was the idea of the course. And you can see there's an alert section and the sensors are red and the values are in these tiles.
25:43
And throughout the course I'm working, I'm building this dashboard from scratch. So there's some JavaScript in it. So I was thinking, well, maybe convert that to ECMAScript 6 or ES2015 and then show it here,
26:04
let it run, take the Raspberry Pi. But, oh, there's some animation. So this is my Raspberry Pi with the sensors. But I was like, well, how to get the fish tank here, right?
26:24
So I was looking on the internet and I found this. And I was thinking, well, I can probably get one goldfish through the border here, but I need fish food.
26:47
I need to, well, maybe we have some turbulence on the way here in the plane. So it wouldn't be safe for the fish, right? So I decided not to do that.
27:04
Sorry. So arrow functions are also great because the arrow functions are just functions like lambda expressions in C Sharp, but without all the ceremony. So you don't need a function keyword
27:22
and the return keywords. You have to type over and over again in your applications. You can just assign a function by using this syntax. So this is a function with two parameters, A and B, and the function body is behind the arrow.
27:43
And the return keyword is omitted. So these should be return A plus B in a normal function, but it just says A plus B and returns it automatically. So I can just call it like a normal function, add and then the A and B.
28:06
So the great thing is that, well, a great thing is the syntax, of course, you don't have to type function a hundred times, but maybe even greater is they fixed this problem in JavaScript.
28:24
So this was pointing to all kinds of things you wouldn't expect, right? In JavaScript, in ECMAScript 5. Well, it still does when you use, because ECMAScript 6 is of course backwards compatible with ES5.
28:40
So you can do all this bad stuff in ES6 as well. But if you use the new arrow functions, inside the arrow function, this is pointing to what you'll expect in C Sharp. So in C Sharp, this is like the current object you're in, right?
29:00
This is the object where you're in right now. And that's also the case using this in arrow functions. So that's great. Actually, all the new stuff in ECMAScript 6 is inspired by other languages and other libraries.
29:22
So C Sharp is one of the inspirations for JavaScript. Iterators are also supported now. So when you use for each in C Sharp,
29:40
you get access to an object, an enumerator, and it has a next method, you can call that, and it returns a value, and it has a current pointer, et cetera, et cetera. You don't see that when you use for each, but it's being used, right? And you do that by implementing an interface in C Sharp.
30:02
But we don't have interfaces, right? In JavaScript. And they're not added very soon. So that thought of another problem, but that's in the next slide. Well, here we have a sequence, an array in this case. And normally I could say let i in sequence
30:21
and then go through the sequence. So how that works is there's no iterator here. So it just runs through the array and goes to the properties of the array, sorry, the values of the array one by one in sequence. So there's not really logic involved, it's just sequential.
30:43
With an iterator, and notice the difference, here I say let n of sequence, and here I said let i in sequence. So with the off keyword, you're using an iterator. So how does that work? It works by using a symbol.
31:02
That's also new in ECMAScript 6. A symbol is like, well, a substitution for an interface. And the symbol itself is just a string, right? It's not a readable string, it's just some sequence of characters.
31:23
So when I say symbol.iterator, it points to a string with some gobbledygook, right? And so I don't know the value of iterator itself. It's a random, it's a fixed string.
31:40
But I implement the function with a name of the string iterator, so with the sequence of characters, and return an object which has a next method that will return an object with a value
32:06
and a done property. So the whole infrastructure of JavaScript, we're using for, when we go to the previous slide, we're using for of, is looking in sequence,
32:25
if the sequence object has the symbol iterator implement. If not, it will throw an exception. But if it has, it will call next on the iterator function until done is true.
32:44
So now I have, in my employee collection, I have full control over how the iteration process is being done, right? I can say, well, I begin with this element, with this employee, maybe with employee number one,
33:01
or with last name that begins with an A or whatever. I can influence the sequence, and I can also say when it's done. So I can determine when the list is complete, when the sequence is complete. So the whole thing around iterators
33:20
is having control in your collection object, right? So there's something magical going on in ECMAScript 6, and it's called generators. And that's a special function that has a star, it's start.
33:46
So what that means is this function can be paused. So you can call the function, it will yield some kind of result, and then the function is paused until it's called again,
34:06
and then the next value is being returned. So this is, well, it seems very simple, but you can think of all kinds of scenarios that are supported here, that are enabled here, I mean.
34:25
So here we have the first call to sequence is getting, when I call the sequence without any parameters, I get an iterator. This is called a generator iterator.
34:40
And then when I have the iterator, I can call next, I showed you that in the previous slide, and I get value and done back, and I can just loop through it until it's done. Actually, this should be also an object having value and done.
35:06
But the cool thing is, well, this is a generator iterator, but you can also imagine that you can just call the function and then it will suspend. So you can do a kind of asynchronous programming even with generators.
35:22
That's a bit of an advanced topic. If you want to know more of generators, go to this session. Okay, I think, is Bodil here? No, okay. So she's going to do a session about generators itself, full out of generators on Friday and tomorrow.
35:47
So we also have additions to the JavaScript standard library, right? So all the stuff I showed you until now is about syntax enhancements, and there's also new types.
36:06
So here's a set. It's a new data structure. So a set is like, well, like a bag that's closed, so I can put things in. So let's take this drop here with all kinds of drop,
36:22
and it's, there is, let's see. I have a round drop and other drops, but there are kinds that are the same, right? So they're not all different, but a set is like, well, I have a bag here and I asked the bag,
36:44
is there a red drop inside? And it says yes or no, but it doesn't matter if there are 100 red drops or one, the answer will be yes. So it doesn't matter anymore if the same kinds of objects
37:04
or simple types are in the bag, and that's why this works like it does. Well, so I declare a new set, I add hello two times and one goodbye, and now the size is two.
37:21
So it doesn't matter that hello is inside two times, because the only question is, is it inside, right? So that's how the set works. So you can also call has on the set, and you can ask it, does it have this value? You can also iterate through it,
37:42
and it will iterate through it in insertion order. But it's not very logical to do that, because maybe when you use this functionality, you should use another data structure. But depends on the situation.
38:00
There's also a map. So a map is like a key value pair collection, like a dictionary in C Sharp. Or you can just say, well, I want the key hello, and the value is 42 in the map. And here I want the key S, S is a string,
38:22
here, some value, with another value. And I can go get with the same S, can look at the size, and I can iterate through it with an iterator. And here I also use destructuring, as you can see.
38:41
So entries will give back a key and a val, an object with a key and a val property, and I want to access these things directly using key and the val variables. There are also weak maps and weak sets.
39:01
So what is the difference? Well, with a weak set and a weak map, the key is always an object. But the thing is, the value in that set can go away. And it will go away if there are no other references
39:22
to that object, to the key object. So let's say I have a person, and I declare a weak map. I add the person as a key and his salary as a value. As soon as the person goes out of scope,
39:42
besides the map, it will be deleted from the map. So that's great for, well, kind of advanced scenarios where you want to keep track of things that are in memory, maybe.
40:01
Promises. Who already worked with promises in JavaScript? And you use jQuery for that? Who used jQuery for that? Yes, jQuery? Okay, yeah, so this is a very familiar pattern when you use jQuery of, sorry,
40:20
jQuery or other libraries. This thing is like, well, promises, for those who don't know, is about asynchronous programming. So I want to do this first, and maybe I want to do that afterwards, something else afterwards.
40:41
But I don't know when the thing that I'm doing is complete because it's asynchronous. So here I do a set timeout. Let's see how, oh well. Let's begin otherwise. Here we have a timeout function that has a duration parameter,
41:02
and it will return a promise. Well, a promise has states. So a promise can have the done state or the resolved state. It can have an error state, that kind of thing. And the thing that is going to,
41:23
well, execute the promise has to flag the promise itself as resolved when it's done, right? So because this is returning a promise, the promise has methods, has functions, as you can call.
41:41
And one of the functions is then. So the promise is returned. I get the then. I declare a function here and do something else. So this will only occur when the promise has the state done or resolved. So this is not executed until it's done.
42:03
So that's the whole thing. So you can do multiple things with multiple thens and do things sequentially while doing stuff asynchronously. The set timeout is, for example, asynchronously because you don't know when it's, exactly when it's going to finish.
42:26
So there's also, there are more functions that you can call on the promise. The then is one. And catch is also one that will react
42:42
to the state of error of a promise. So here you see, this is an example of something that is, well, used for years now, using other libraries, and now has been incorporated into the standard itself, into JavaScript itself.
43:03
And that's a trend you see in the spec. We will see more of that. So modules are another thing. And this is also commonly used
43:22
in common JS or with the AMD pattern. So we already had the ability to have some JavaScript file and load that JavaScript dynamically when it's needed. So not in the browser, in the HTML as a reference,
43:41
but by some other JavaScript that loads up the JavaScript on demand. And we had all kind of libraries for that that use tricks to do that. And now it's incorporated in JavaScript itself. So you can have some file, some JavaScript file,
44:05
in this case person.js, and it has some stuff inside the file that is marked with the keyword export. So you can explicitly determine which stuff in this file is available for the outside,
44:25
outside this file. So in this case, I have a person, class, and some variable. Should have used let here. Okay, so in another JavaScript file,
44:42
I can now say import. So I can say import star. That means import everything. As person, that's a variable I'm declaring that is going to represent what's inside the file. From, and then a relative path to the file.
45:03
And you can see you have to omit the JS extension. And now I can just use this new, well this variable, to get to the things I'm exporting. So here I export average age,
45:21
so I can get to that by using that person variable. Another way to do it is using destructuring. So here I can say from the person again, like here, except now I say person comma average age,
45:41
so this goes there and that goes there. So I don't have to use the person variable anymore. So this is a practical example of using destructuring.
46:11
So the question is, if you make a typo here, maybe a mistyped person, would you get an error there? Well, no, but this will just be undefined.
46:24
Yep, so there are other new features. One is called, is the internationalization and localization feature. So you can format values, decimals,
46:43
like currency for example. Or put the dot or the comma as a decimal sign. That kind of stuff is supported right now. There's also a reflection mechanism with which you can read out metadata of classes.
47:01
So you can say, well, what properties does this type has? So just like the reflection in .NET actually. You can also have typed arrays. It sounds strange, but it's supported now. And there are lots of extra methods that are now built in.
47:22
Too much to show right now. And there are also new objects that you can use plenty. To see them all, you can go to this URL. And you have a list of them with the explanation. So another idea I had was like putting a robot in my bag.
47:47
Like this one, this is a Lego one we have at home. And let it run JavaScript. And well, just let it go through the audience or whatever, shoot balls through you or whatever.
48:06
Well, I was thinking about that last week. And I was thinking, well, we had some incidents with robots in the past. So let's not do that, shall we?
48:21
Okay, so now, like I told you, JavaScript 6, ECMAScript 6 is not supported right now. It's not supported fully right now in all browsers.
48:41
So some stuff is, other stuff isn't. So there's a problem there, right? If you want to write code now that is for all browsers, you have a problem.
49:02
But ES6 is so great, I want to use it now. So how do I do that? Well, the thing that is supported throughout all browsers is ECMAScript 5, of course. And ECMAScript 6 is easily transpiled into ECMAScript 5.
49:21
So that's the way to do it. And I will show you how to do it in the Visual Studio in a moment. But the transpilation can only be done, of course, for pure syntax. For other stuff, like the map I showed you in the set, that's not syntax, it's just an extra object.
49:41
So we can use polyfills for that one. And the third thing is runtime functions, like for example, the weak map and the weak set. It's really something that has to be supported by the runtime. And that's the only thing that you can't really emulate
50:06
in ECMAScript 5 because it's just not in the engine. But the other two, you can. So for syntax, we can use BubbleJS. That's actually the one I found the most convenient
50:22
because it produces the most clean code, ECMAScript 5 code, readable code. And it has the best features, in my opinion. Tracer is also an option, but it's a bit, well, a bit more limited than Babel,
50:44
but it's more extensible if you need that. And you can use TypeScript for Microsoft as well because TypeScript from version 1.5 on is embracing ECMAScript 6.
51:00
So everything you write in TypeScript is actually ECMAScript 6, except you can add the strongly typed thing to it. So there's also a way to use it right now just by writing TypeScript because TypeScript is already transpiled to ECMAScript 5.
51:27
So about objects, you can use CoreJS. Again, CoreJS is the best one, in my opinion, and you can also use ES6 shim. And when you look at the feature overview,
51:42
you can also see these polyphiles mentioned. ES6 shim is over there, TypeScript is over there, and you can see it's getting a bit greener to the right. So if you want to learn about TypeScript,
52:00
the new TypeScript, go to this session from Dina. Is Dina here? Oh, no women at all, I think. So Dina is talking about TypeScript and you can learn about the ins and outs of that as well.
52:25
So now, what is the recipe for using ECMAScript 6 today? Just code using the ECMAScript 6 and transpile,
52:43
and then the browser will execute ECMAScript 5, right? I already told you that. And of course, when ECMAScript, there will be a point in time when ECMAScript 2015 is supported by all browsers, and then you can just skip two and three and you're done.
53:01
And you get all the benefits of using the new syntax right now. And that's great because you don't have to type the function keyword one million times, for example. So in Visual Studio, you can do this in a couple of ways. I'll show you two today.
53:23
One is using packages of JSON file, install Gulp, and use that as a task in Visual Studio. So how does it work? So here we have a simple project.
53:41
Can you read this in the back? Solutions, yeah, Solution Explorer. And I have a simple JavaScript file. Wow, this is slow. And with some ECMAScript 6 in it. So I have a class, I have a function with a let,
54:03
and I have some instantiation of the class, right? So how can I transpile this to ECMAScript 5? Well, the first thing to do is create some file that is called packets.json.
54:27
So this is supported now by Visual Studio. There's a change going on with the packages thing in Visual Studio. So in a new world, no, in the old world,
54:44
all packages came from NuGet, right? So it doesn't matter if you have a server-side package or a JavaScript package, it's all NuGet. In a new world, we have different package sources
55:00
for each use. So for example, the ASP.NET packages, really the server-side packages come from NuGet still, and the client-side packages, so the JavaScript libraries come from Bower, for example. There are more sources, but Bower is an example.
55:21
And there are also tools that Visual Studio can use natively to process, for example, JavaScript files or CSS files and transform them, minify them, and whatever else.
55:43
So Microsoft is going through a situation that it's going to use stuff that the whole web community already uses, right? So in the past, Microsoft would think, well, we're inventing our own minification and we're doing our own transpilation
56:02
and whatever, whatever. In a new situation, Microsoft is saying, well, the community already has a solution for this, so let's use that. So in Visual Studio 2015, you can use another package source besides Bower and NuGet,
56:21
and that is the Node.js package manager in Visual Studio. Actually, when you install Visual Studio, Node.js is also installed. So Visual Studio uses that in the background to do stuff.
56:41
And one of the things, sorry, one of the things that are directly supported is a NuGet package manager. And I can say what packages I want from the Node package manager. Did I say NuGet package manager?
57:00
No, it's a Node package manager by creating a file called package.json and telling it, well, I want these things, these Node modules in my project. I want to use them in my project. So Gulp is a tool to specify tasks.
57:20
So you can say, well, for example, you want to minify your JavaScript file. That could be a task, right? And Gulp itself uses all kinds of plugins to do that. So if you want to minify, you have a Gulp minify package that you have to install and you have to call it, et cetera, et cetera.
57:42
So here I'm saying I want to have Gulp itself and I want to have the plugin Babel for it, which transpiles my ECMAScript 6 code to ECMAScript 5. So when these packages are installed, when you add packages to this file,
58:03
it will even give you IntelliSense for all packages. And when you save this file, it will restore the packages you've mentioned here. And the packages are actually visible when you press show all files in the solution explorer.
58:22
You have a folder called node modules and there is the source code and all the stuff for the package. So this is just the tool itself. Now I have to make some file that uses Gulp to actually transpile my code.
58:41
So this is done by using Gulp file JS. So Gulp file JS, the name itself is a convention, so don't change the name. Gulp file is recognized by Visual Studio as you will see in a minute. And what I write in Gulp file JS is node.
59:02
We write node in Visual Studio, right? Great. So I can just say, well, I want the package, the object actually Gulp. I want the object of the plugin Babel and I'm going to define a task that is in this case called default. And just take as a source,
59:23
take my ECMAScript 6 code, in this case it's the file itself, and just Babel it. Babel it, Babel it. And when you Babel it, it produces an output that is ECMAScript 5, so it goes through the plugin
59:42
and then writes the result to a folder called 6 to 5. It's here. You can see there's already a file in there. So when you've done that, there's a great thing in Visual Studio called the Task Runner Explorer.
01:00:01
and it recognizes the Go file JS. It says, well, I've found a task inside Go file that's called default. And I can just say, execute it, and it will execute it. So now I have my ECMAScript 5 code in here.
01:00:29
So now I have a function back, et cetera, et cetera. And there are some helper functions that are called. And when I change my code, so let's correct this typo.
01:00:41
Save the file, rerun the task, and now Visual Studio warns me, well, it has been changed behind the scenes, and that's correct. And now John is in here as well.
01:01:03
So one of the advantages of using the Task Planner Explorer is you can assign the tasks to bindings. So before build, after build, et cetera, and they will be executed when such an event occurs. So final thing to show you is something that is even more easy,
01:01:25
and that's called Web Compiler. You can download it as an extension for Visual Studio, and you can just say, well, right-click on my file, use Web Compiler, and choose Compile File.
01:01:41
Well, in this case, I've already done it once, so it just says Recompile File. And now when you have the Show All Files mark on, you can see for this code, there are two files generated. One is called es5.js, and one is the minified version of that.
01:02:01
And when you create a new script, hello? New script, yeah? I have one minute left, come on. You can do it. And I create a JavaScript file, and I say,
01:02:20
let's access 12, whatever, save that. And I can just right-click it and say to the Web Compiler, compile from now on, compile this file, right? And it will actually change the transpiled file on the save.
01:02:46
So when I save the file, it's enough to trigger the transpilation process, and it will be transpiled. So that's a great way to do it. It's free. And it uses the compiler config.json in the background,
01:03:02
which specifies all the files I clicked on to do the compilation. So it knows all the files, and you can also say, well, just recompile everything. So these are two great ways to use it right now,
01:03:22
and I would hardly recommend it. Thank you. When you want to meet me or ask any questions, the time is up now, but you can meet me right after at the Pluralsight booth,
01:03:41
or contact me via Twitter. Thank you.