 It's going on, everybody. Super excited to be in Amsterdam. It's my first time. I've got my Polymer swag on, as you can see, prepared for the event. So today, we're going to talk about ES6, or as the cool kids call it, ES2015. This is the new version of JavaScript, all the cool language features that are coming to us. And a lot of the stuff you can actually use today. And I want to explain how to use it in the context of Polymer. So a little bit about me. My name is Eric. I work on the Develop Relations Team at Google. I've been on the Polymer team now for three years. Ever since the project started. I built a lot of apps. All the sample code and demos I'm going to show you today are up on my GitHub, if you want to check that out. Feel free to also ask me questions on Twitter. So what are we going to talk about? Well, the first thing I want to focus on are some of the smaller features of ES6. They're actually pretty cool and pretty convenient. And you might have overlooked some of these features as you're starting to learn this stuff. I want to focus on some of the small things that allow you to build apps faster. And the second part, the one that we always get, the question we always get, is how do you build custom elements and Polymer elements using classes? So that's a huge new feature of JavaScript and ES6 that I want to focus on. So why are we talking about ES6 as a web components concept? Well, web components brings a lot to the table as far as evolving the way we build apps. More convenient apps. It's a feature for developers. It's not a feature for users. So maintainable code, reusable code, new API primitives like imports and custom elements and the template tag, these are really awesome new features that allow us to build applications. It's evolving the markup. And Polymer sits on top of this really convenient layer. So Polymer adds extra sugaring. We want to make it even easier for you guys to write web apps using web components. So we have things like data binding. We have things like being able to define a custom element a lot easier and other features like DOM repeat and DOM template. These are really cool. And ever since I've been on the Polymer team, we've wanted to evolve as the web platform evolves. So that means any kind of new API that comes to Chrome or Firefox or Microsoft Edge, we want to adopt and start using. We want to evolve with the web platform. That's always been our mission from day one. So natural evolution in the web platform is JavaScript. Who is a JavaScript developer in the house? Maybe a couple of coffee script developers, too. You guys are cool, too. But JavaScript is the language of our choice. It is the language of the browser. And so it's a natural fit that Polymer and ES6 play nicely together. Again, we want to evolve with the web. And part of that web, a huge part, is ES6. So if you're interested in using this stuff today, I actually recommend this awesome table. It shows you all the features of ES6. And it's actually pretty daunting because there's a lot. But it's a great table. And this screenshot even has changed within the last couple of weeks since I took it. You can see that a lot of progress is being made in native implementations of all the browsers, including Babble, which is the transpire that I use to transpile ES6 to ES5. So a lot of good stuff is coming really, really quickly. For a long time, ES6 has kind of been this pie in the sky magical unicorn. One day we'll be able to use it. One day the specs will be finalized. And now we're actually there. On the Polymer 2, we've taken a backseat to ES6. And that's because we didn't want to introduce kind of an extra build step, an extra requirement for people to start using web components. We didn't want to raise that bar too much. But now, with all these native implementations all across the board, every browser, you're starting to see this stuff land. And you can use it today. So we've actually done some work lately on the Polymer team to better support ES6 now that it's becoming a reality in browsers. So Scott had kind of the first check in here for better support for classes. So we're going to talk about that. How do you find Polymer elements using classes? And also better support for compilation with Babble.js. So really exciting stuff now that this stuff is actually native in browsers. So you have your homework to do. We can't cover all the stuff in ES6. There's a ton of stuff. A lot of features, actually. A lot of primitives are now part of the language, whether they're proxies. Being able to intercept gets and sets on a property. ES6 promises are a part of this as well. And new primitives like symbols and map, iterators and generators, these are all really cool things. And Mozilla actually has a really good set of articles on a lot of these features if you're interested. There's a link at the end of the show. So let's dive in. Let's talk about some of these little features that I'm pretty excited about. The first is the spread operator. So given an array, prefix it with a dot, dot, dot, and that explodes it out into multiple values. Let's take a look at an example. We have a lot of code in today's presentation. You can't talk about ES6 with showing a lot of code. So just before warn, you're going to see ES6 examples on the left and ES5 equivalents on the right if they exist. So the spread operator is kind of nice. Let's say you had a function, my function, and it takes three parameters, x, y, z. With the spread operator, you can actually pass in an array and prefix it with that dot, dot, dot. And what that will do is break each of those values up into x, y, z. So this is really convenient, really nice. Before, you had to do things like call the function dot apply, and that's kind of nasty. So eliminating some of these hacks that we've had in the language. If you wanted to, you can also use it anywhere that multiple args are supported. So the array push method. In this second example, if you want to concatenate arrays, it's really easy to do that using the spread operator. And lastly, you can use this in array literals as well. So if you want to create the array A through E, you can do that really easily using the spread operator, right inside of the array literal. So that's the spread operator. Default params, proper default params, finally in function definitions. So this is cool. The ES5 equivalent, if you had a setColor method, it's passed a DOM node as the first parameter. And the second parameter is we specified it as optional just by the naming convention. But then you would have to check inside of the code to see if it exists or was undefined or not. Instead, in ES6, this becomes a lot easier. We can define that second parameter, color, to be read by default. So if the user passes undefined to us, we don't get it at all. That's what the DOM node's going to be set to. It's a really, really sweet, little feature, but awesome. Arrow functions, a lot of people are going to overlook arrow functions. I'm actually really excited about them. Not only because they save code and save a little bit of typing, but they're actually bringing a couple features to the table and saving us some bugs. So let's take a look at arrow functions. Let's say you have an array, and you're using the arrays map method. And inside of the anonymous callback, you have basically you're just returning the length of each of those strings. So anywhere you use an anonymous callback, which is like all over these days in JavaScript, you can replace it with an arrow function. So the function keyword goes away, the parameter stays, and you replace it with that fat arrow and the same kind of callback that you have inside. So already we're saving a little bit of typing just by removing that function keyword. Since it's just an expression, we can actually remove that return keyword as well, and then it just becomes a one liner. So you can use map and it's a lot easier to read. I have one parameter here, and so arrow functions allow us to even remove those parentheses when you have one parameter. So that whole map I had before just becomes a one quick liner in JavaScript now. Really, really convenient. You can use these all over the place and they act just like any function you're familiar with. So the first two examples here show an example of a function expression, and they're exactly equivalent. The first one is a little bit more verbose. You can see I got the return statement and the curly braces. In the second example, I'm just removing those all together because it's a little bit easier and a little bit more convenient. And you can use these in add event listener, you can use them in promises, anywhere you have anonymous callbacks that become really easy and really convenient. So this is a really common thing to do in the Polymer world. Let's say you have a highlight method, you're applying a class, maybe adding an animation or something, and then within a certain period of time, you're removing that class, removing that animation. So who can spot the bug here? Yes, that's right. So this is a really common bug for a lot of Polymer developers and just in general, because JavaScript's crazy. The bug is that this isn't what you expect it to be, right? Set timeout, since it's on the window object and the way JavaScript works, this is remapped in this case. So it's not the element, it's not exfoo, it's window. And so the easy way around this, right, is to bind that function call to this and then this.classWiz list is gonna work out correctly. But with arrow functions, this all goes away. So we have actually lexical scoping with arrow functions now. So if you replace your callback with an arrow function, this is gonna get mapped correctly. It's gonna inherit the correct scope and it's not gonna do any of the JavaScript craziness that we're used to. This is so common in Polymer that we actually have a special method, this async, that it basically has the same signature as set timeout. So we're making a little more convenient pre-arrow functions. So that's arrow functions. Let's talk about object literal shorthand. You're creating a lot of objects in JavaScript these days, minus we'll make it more convenient on developers. So ES6, defining an object, maybe you have a getter, right, using an ES5 getter. The important one here is that we can define functions in this object without that function keyword. Again, saving, typing, little more convenient, but very easy to read. The JavaScript engine knows that this is a function. You can also have computed properties. So this is the way you define person.fubar. And when someone calls that, they're gonna get my return string fubar exclamation point. So being able to do computer properties at runtime is actually really sweet. It's something we haven't been able to do before. So you can use this in Polymer, in the Polymer world, right, when you're creating your Polymer constructor and giving your prototype. Anytime you're defining a method, whether it's one of the callbacks, ready, attached, or a changed observer, for example, you can just use this object shorthand in your function calls. To anywhere you're defining objects, anywhere in the language, you can use this stuff. Template strings are really cool. I really like type of strings. They bring a couple of interesting features to the table. The first is multi-line strings. So finally, in JavaScript, you have the ability to do multi-line strings. Other languages like PHP, Python have this with hear docs and triple quote strings. Now, in JavaScript, we have template strings. And so if you wrap your content in a back tick, that allows you to define a template string in JavaScript. You can do multi-line string. When would you use this in Polymer? Well, one example is if you're creating shadow DOM from a snippet of HTML. So this is a really common thing for me to do when I'm testing shadow DOM examples. Instead of doing string concatenation or escape sequences, you can basically just have a formatted block of HTML, wrap it in back ticks to form a template string, and then you can create shadow DOM and do all the other stuff you're normally gonna do. So it's really convenient, and the code becomes a lot more readable when you don't have a bunch of plus signs everywhere. But the really cool feature about template strings is actually variable substitution. So this example here constructs a URL, and using the dollar sign curly braces, you can actually substitute values into these placeholders. And it's not just values, you can actually have expressions in here as well, which is really nice. So in this example, I'm just constructing a URL to the GitHub API, and host organ repo are gonna be substituted in there. So that's really nice. It's a lot more convenient to construct strings now. There's another form, a more advanced form of this as well, which is called a tag template string. And this is really neat because it allows us to do some interesting things with metaprogramming. Normally what happens with a template string is that you get the final output of the string from the browser. But with the tag template string, you can actually define a custom method, in this case, I'm defining a get function, which is gonna be pass my parameters, my string and my parts. And so in that way, you can actually intercept the string after it's been concatenated by the browser, and you can do maybe post-processing, maybe you can sanitize HTML. In this demo actually, I did a proof of concept where you can actually make a get request, right? An XHR or a fetch request to the URL that's being constructed. So you can do anything in here you want, which is really, really kind of cool. This becomes pretty powerful. One thing we lost in Polymer 1.0 was the ability to do expressions. We used to have the ability to do like five plus five in a binding, or you could dereference an array using a ray notation, or even have multiple bindings within a single DOM node. And we lost that because of performance. We wanted to, again, make the core library more performant. But one thing you can do as an interesting proof of concept is actually teach, create an element that teaches the binding system to use template strings for one-way binding. And so that's what I did in this demo down here. I created a template expression element that extends the template element, and I taught this custom element to pull out all of the DOM nodes inside of it, wrap each of the text contents in a back tick to create a template string, and by default, the engine is gonna evaluate those for me, all those expressions. So we can do things, again, like expressions, or having multiple bindings with the inside of a text node, which is kind of cool. So again, just to prove a concept, pretty hacky to actually do this if you check out the code, but just to show you how powerful this stuff is. All right, let's talk about ES6 classes, the big one. So normally, this is ES5. Don't worry about the code, right? This is kind of like, this is a class, right? We're using, we're defining a function, it's a GitHub issues function, or a class can have some default parameters for it. And the way you define methods on in this class is to use the prototype, right? JavaScript is a prototypical language. So that's good, but you know, now we have the ability to actually define a true class. So already, if you look at these two snippets between ES5 and ES6, it's a lot nicer and more convenient. So this example uses all the stuff we just talked about. The first thing is you have a proper keyword. You have class, right? You know as a developer that you're reading a class here because it says that, it's very explicit. We have a proper constructor, right? So we would be able to do initialization in this class. We're using a default parameter, and this is kind of cool, this is another default shorthand in ES6. Instead of having a key value pair, org, colon, org, and value, colon, value, or sorry, repo, colon, repo, you can just pass in the values directly and it's smart enough to know that those are the properties. Well, so yeah, we have a method, right? So the shorthand that we talked about without the function keyword, pretty nice, and a default sorting parameter for that function. We're using template strings to construct the URL to this GitHub API. So we have variable substitution there. And when the fetch call is made, we get a bunch of promises that we have to deal with and each of those is using an arrow function to simplify it a bit. So it's a lot more pleasant to read as a developer and a maintainer of this code. And so this is really nice. We can do this and we can use this to create custom elements. So the way you define a custom element using classes is that you extend the HTML element. We're extending the native DOM HTML element. And instead of creating a constructor, you're actually gonna use the special method of custom elements, the created callback. This is where you're gonna set up your shadow DOM, maybe initialize some properties on your element. In this example, I'm just creating my shadow root and in its inner HTML, I'm appending a little bit of styling and a little bit of placeholder markup for this stock ticker element that I'm creating. So let's create a callback. And then of course we can just define methods as normal using the shorthand notation or whatever notation you want. If we were gonna create a stock ticker element, maybe we create an updated quotes method and that then goes and fetches the API in question. So this register, sorry, this defines my custom element using classes. The next thing we need to do is register that element with the browser. And this is no different than you normally would. The only difference is that instead of passing a prototype or an object, you're just passing the class name that you define. So still traditional document.register in the name of the tag. So it's really easy to find custom elements with a class but how do you define a Polymer element from a class? Well that's also really easy. First thing is class stock ticker, same thing as before but this time we're not extending HTML element because Polymer is gonna do that for us under the hood. The second thing we need to do is kind of tap into this special before register method. This is a method Polymer is gonna call for you before the element kind of goes through its upgrade process. So in here, this is where you're gonna put all the good stuff. This is where you're gonna define your element name, stock-ticker and it's where you also set up things like your properties object. So you can define a symbols array for all the stock ticker symbols that you're gonna have, define an observer and then from there the rest is just traditional Polymer code. Created, ready, attached, callbacks. You can define that updated quotes method and then the last thing you do instead of document register, you call the Polymer constructor and pass it the class you created. So this is how you define a Polymer element from a class, same basic concepts as the ES6 raw web component version. So how do you use this stuff today? Well there's three things to do if you wanna use this in production. The first is always use vulcanize, that's a great tool that we'll talk about later. You know, build your app, concatenate all those imports together, it's great for performance. In this case we're using the inline script and inline CSS flags. What that's gonna do is it's gonna bring in all of your CSS and your JavaScript into a single file and inline it. The next thing you do is you pipe that through CRISPR, this is a tool on NPM that we also authored that allows you to rip out the JavaScript from that single file and produce a standalone app.js file. So you're ripping that out, you're moving the JavaScript to a single file. And then once you have that JavaScript you can run that then through Babbel. Babbel is the transpiler that I use, it's really great, it's got a lot of great community support. So once you pipe that in you basically get an ES5 equivalent version and then you can run app.js in any modern browser that runs ES5. So it's a beautiful feature, Polymer actually works really well with this stuff, all the demos and whatnot are up on GitHub again like I said. So feel free to check them out, feel free to run them, ask us questions about it cause we're still exploring ES6 ourselves. So it's a beautiful feature, web components are part of it to make your markup more sane ES6, to make your code more sane. I really appreciate you guys' time, a couple of interesting resources to call out. Again, the ES6 in depth is really valuable, some great articles on this stuff and also co-labs upstairs. So we have a co-lab for ES6 and Polymer if you actually wanna start coding. So with that, appreciate you guys' time. I'll be back here in a little bit and end of the day. Thanks.