JS.Next: ES6 / ES2015 Traceur

Transcript from the "Traceur" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Aaron Frost: I've got this let class, okay, and I've got a generator in it. let.js has a generator in it, don't ask me why. So you wanna use a generator, but you need it to compile into a language that even ES5 could speak, right? Because you have to support Legacy, okay?

[00:00:19] Cool, so I've got this generator class that's gonna do this code, and I want to compile it with Traceur now. So let me show you how to get Traceur installed.
>> Aaron Frost: Can you guys see this okay? That too big? Okay, I'm gonna see into source and cd es, okay.

[00:00:53] So the first thing you gonna do is say npm install -g traceur. Okay so it just goes out and global installs the Traceur utility for your computer. They threw it on npm even though it's, yeah. So yeah, there you go, that's Traceur. So now from the command line you've got,

[00:01:15]
>> Aaron Frost: Traceur, so you can do Traceur things from the command line now, okay. And it's got a huge health file, to kinda guide you through what it's gonna do. And if you have any questions, there's a lot of help out there online. So a lot of people using it.

[00:01:33] And there's a bunch of flags you can give it, like if you wanted to not use for-of's. You can say for-of = --four-of = false, --classes true, stuff like that. Okay, so you can include experimental stuff, you can include block binding. Anyway, there's a lot of stuff that you can do.

[00:02:00] So we've got this lead.jsk and I'm gonna go ahead and compile this into a generator real quick using Traceur. So let's clear this out. So I'm gonna say traceur, I want you to write my out into samples.temp.let.tcr.js, okay? And the script is samples.let.js, okay? So everyone see what I did there?

[00:02:40] I'm gonna hit Enter. Aw, I hate live coding but when it works, how good does that feel?
>> Students: [LAUGH]
>> Aaron Frost: My gosh, I was so worried. Okay, so now over here we've got this temp directory, where we've got let., let's delete that guy cuz he's just confusing. So we've got this thing that I just created, and you're like wow, it made all that for a frigging generator?

[00:03:04] Well yeah, there's no Traceur makes generator work in ES5 okay. So this is what Traceur's all about. It's about making it so you can write ES6 and have it run in ES5 Lant, okay? So there's a problem though and that is, like this line by itself, like let's say that this line, this file represented all of my code from all like all my libraries.

[00:03:27] I compiled it all into one line. I don't have the Traceur runtime, so when it tries to say $traceurRuntime do all these crazy thing, it's gonna actually freak out. So you guys are good. Are you guys gonna believe I actually just forgot the flag to include the runtime, let's try it.

[00:03:53] Include runtime, gosh.
>> Aaron Frost: Hold on.
>> Aaron Frost: What the heck?
>> Aaron Frost: To knife like a total putz, what is the thing?
>> Speaker 3: Are you talking about the map files?
>> Aaron Frost: No not the source maps, I don't care about the source maps right now. I can show you source maps, but it needs to include the Runtime so that-

[00:04:51]
>> Speaker 4: Put it in your index.html?
>> Aaron Frost: You can throw it in your index.html but you can also have the build tool put it in there for you, right.
>> Speaker 4: Okay.
>> Aaron Frost: So you're gonna need to put it on your page anyway. But if you don't have it, like if you haven't copied it in, you can make your tool copy it in for you.

[00:05:06] So, what is it? My gosh. Someone is gonna like look at this and laugh at me. Anyway, okay, sorry it's not important. That's how you compile it. But we kind of need a more programmatic approach, like we're not gonna sit here and write command lines, like commands to compile our stuff, right?

[00:05:25] So I'm gonna show you guys grunt-traceur, if that's okay. So, if we say gihub, and we're gonna say grunt-traceur. So, grunt-traceur is awesome. There's also a gulp traceur and then there's EF6FI also can do traceur. But, essentially how you run it, it's actually pretty easy. So let me go ahead and open up a sample project I created.

[00:06:03] So we're gonna do this grunt-tracer test. So we have this let stuff here and we have my generators. And we have a my generator and we want it to compile into this ES5 directory, okay, each one of them. So I made this grunt file. Who here is familiar with Grunt?

[00:06:25] We have some people familiar with that, that's good.
>> Aaron Frost: Okay, I'll just minimize this. So you have to add this traceur config to your new config. And so I'm gonna say includeRuntime, use commonjs modules, have blockBinding: true and experimental: true. And for those who are kinda paying attention, when we ran Traceur from the command line and it showed us all the flags, those are options.

[00:07:07] So you can use those same options in here in the Grunt plugin, it will go ahead and break them out for you. And then, so here's my build, is my custom build. So I'm gonna say from the current working directory which is JavaScript, take everything that's .js and write it into the ES5 directory, a Traceur version of itself.

[00:07:31] So from here we can say grunt-traceurcustom and it tells us, I don't know if you guys can see this, sorry, my terminal in WebStorm's kinda small. It tells me that it compiled let, that it compiled my generator and if we come up here and we look in the ES5 directory, it went ahead and compiled it.

[00:07:56] So because I compiled them into separate files, it went ahead and it included the runtime in both of them which is kinda lame, right? So let's go back to our grunt file, and say just go ahead or write all of them to the same file. So let's just say destination is app.js.

[00:08:18] We'll run it again, okay, bollocks.
>> Aaron Frost: Sure.
>> Aaron Frost: Is that what they're gonna do?
>> Aaron Frost: Anyway, I'm kind of freaking out here on site, cuz we're overdoing, I'm trying to hurry and get it done. But using grunt-traceur this is how you do it and you, if you guys are like hey I'm gonna do this on my own projects, you'd make sure you have all the flags turned on.

[00:08:55] If you have something that's not working you'd like, well generators isn't working so we're gonna take it out or I really want classes so make sure classes is turned on. You can turn source maps on so that if you get an error inline like in this wonky looking code that it builds out for you, no one wants to debug this, right.

[00:09:14] This looks really scary. We can turn on source maps and so if there's ever an error, you click on it and it takes you back to your original code. So it makes it easier to troubleshoot. So make sure you get source maps turned on, but you can actually have Traceur as part of your build process.

[00:09:28] And I'm guessing one day once everything's solidified more and Traceur's stronger, this is what most frameworks will do, is have a Traceur build as part of their build step. So you guys got an introduction to Traceur, go ahead and try to out on your own time though, write some simple stuff like we wrote today after each section and try and get Traceur to to build into a file for you.