Intro to ES6 and traceur compiler

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

es6 is the next generation of javascript. You can use it today with the traceur compiler library. Also be sure to check out es6fiddle to start playing with ECMAscript 6 right now.

Man 1: [00:03] ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript.

[00:10] Traceur is a way to compile that next version of JavaScript back into JavaScript of today, meaning that you can write the next version of JavaScript and have it compile down to JavaScript you can use today. ES6 isn't supported completely and not standardized completely across all the browsers and Node and everything.

[00:32] While ES6 is still being standardized and all the browsers are still working on supporting all the different features, it's worth getting a head start because Angular 2.0will be based on ECMAScript 6 in the future, when it's released.

[00:47] Thanks to Traceur, we can start playing around with ES6 features today, as well as some of the things that Angular has started releasing, like DI, that already use ES6.

[00:58] In the future, we'll also get to the ECMAScript 6+ that AngularJS 2.0will work with, which adds things like annotations and some sort of typing. It's what TypeScript does by compiling the static-type JavaScript down to JavaScript.

[01:14] After you install Traceur using "npm install traceur," using the "-g" global flag or not...Here, I did. I just use Traceur to output this file, which is an ES6 file, to this Traceur-compiled file.

[01:30] Again, this is the JavaScript of today, the one that's being output, and this is ES6. The file that this outputs is the file you'll want to use with the Traceur runtime. You'll include the Traceur runtime first and then include the output file.

[01:47] Then the browser will be able to use this file just fine. Again, you're not using the ES6 file. You're using the output Traceur-compiled file, then loading the Traceur runtime, and then loading your own compiled file.

[02:01] If instead of using the browser, you want to invoke that file with Node, simply use Traceur. Instead of using it to compile, you can use it to run the output file and then run through the Traceur-compiled file, using Traceur as the "runtime."

[02:17] While installing Traceur is as easy as "npm install traceur," if you want to jump right in, you can just open ES6 Fiddle in your browser and load one of the examples. Then hit run, and you can begin playing with ES6 right away.

[02:34] Basically, behind the scenes, this is compiling this to a Traceur-compiled file and then running it through Traceur to give you what the output of the console is.

egghead
egghead
~ 40 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today