Next Generation Javascript - Now!
Traceur

@casarock
Javascript.next!
EcmaScript6
var square = (x) => {
return x * x;
};
var square2 = x => x * x;
Fat Arrow Functions
function* fibonacci() {
let [prev, curr] = [0, 1];
for (;;) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
Generators
function restParam(array, ...items) { … }
function defaultParam(myArg = 0) { … }
function restPrmWithSpreadOp(arr, ...items) {
arr(...items);
}
Default-, rest-Param & Spread-
Operator
const PI = 3.14;
let answer = 42;
Let & Const
Traceur - RheinMainJS April 2014

@casarock
Javascript.next!
EcmaScript6
class Character {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Monster extends Character {
constructor(x, y, name) {
super(x, y);
this.name = name;
this.health_ = 100;
….
}
class & Extend
var {x, y} = {
x: 123,
y: 321
}
var [a, b, c] = [´hello´, ´rmjs´, ´at AOE´];
Destructuring
function timeout(ms) {
return new Promise((resolve) = > {
setTimeout(resolve, ms);
});
}
timeout(100).then(() = > {
console.log('done');
});
Promises … and many more...
Traceur - RheinMainJS April 2014

@casarock
V34:
• Supports 35 of 68 features
• no classes, generator, arrow functions, rest
parameter etc..
• mostly new Math methods & String operations
• Supports Maps & Weak Maps
Google Chrome
V29:
• Supports 48/68 features
• no classes. no promises
• Best ES6 support so far!
Mozilla Firefox
IE11:
• Supports 7 of 68 features…
• well… at least let and const.
Internet Explorer
Harmony
• Supports 22 of 68 features…
• no classes, no promises.
Node
Cool, but what about
BrowserSupport?
Traceur - RheinMainJS April 2014
http://kangax.github.io/es5-compat-table/es6/

ANDSAFARI? 2/68

@casarock
I want to use it,
ButHOW?
Browser Detection…
… and deliver different JS?
… or Add a „Best viewed in Firefox“-Button?
Traceur - RheinMainJS April 2014

without coffee!
CrossCompile!

@casarock
parcour?
Tracer?Traceur!
• Cross compiler ES6 -> ES5
• Maintained by Google
!
• Compilation while build
• JIT Compilation at execution time…
• Traceur is written in ES6 cross compiled to es5!
!
• Open source!
https://github.com/google/traceur-compiler
Traceur - RheinMainJS April 2014

@casarock
And how about
ES6Support?
Supports only 23/68 features!
Traceur - RheinMainJS April 2014
• classes
• promises
• let/Const
• rest-/Spread Params
• Generators
• Destructuring

@casarock
Why should I
USETRACEUR?
• One Codebase
• compilation withIN build script
• Less Browser specific Code
• Use next Gen JS NOW!
• Continuously developed
• Browser independent development & Release
Traceur - RheinMainJS April 2014

Let’s get real!
ENOUGHTHEORY

@casarock
I just want to
PlayAround!
Frontend Developers love Fiddles…
http://www.es6fiddle.net/
Traceur - RheinMainJS April 2014

@casarock
Let the client
CompileONRuntime
• Load Traceur
• Compile at USERs browser
• Get into Performance hell!
• Have fun with unhappy customers and
clients!
Traceur - RheinMainJS April 2014

@casarock
I want offline
CROSSCOMPILE
Install Traceur via NPM
$ npm install -g traceur
Compile your ES6 source
$ traceur --out out/mysource.js --script mySource.js
!
Using Compiled files: Include Traceur Runtime
<script src=„path/to/traceur-runtime.js“></script>
<script src=„out/mysource.js“></script>
!
Traceur needs a runtime for some polyfills and helpers
Traceur - RheinMainJS April 2014

@casarock
But I want
AutomatedBuilds
Grunt plugin
https://github.com/aaronfrost/grunt-traceur
!
Gulp Plugin
https://github.com/sindresorhus/gulp-traceur
Traceur - RheinMainJS April 2014

@casarock
How to configure
GRUNT
Grunt Plugin
$ npm install grunt-traceur —save-dev
grunt.loadNpmTasks('grunt-traceur');
grunt.initConfig({
traceur: {
options: {
// traceur options here
},
custom: {
files:{
'build/all.js': ['js/**/*.js']
}
},
}
});
Traceur - RheinMainJS April 2014

@casarock
But I want streams with
GULP
Gulp Plugin
$ npm install --save-dev gulp-traceur
var gulp = require('gulp');
var traceur = require('gulp-traceur');
gulp.task('default', function () {
return gulp.src('src/app.js')
.pipe(traceur({sourceMaps: true}))
.pipe(gulp.dest('dist'));
});
Traceur - RheinMainJS April 2014

Conclusion

@casarock
What I think about
TRACEURCompiler
• Use one ES6 Codebase now - Cross browser
(and with node.js)
• Consider Carefully
• Do you really need ES6 in your Project?
• Not every Dev knows ES6 Features
• You still need a runtime (performance?)
• <subjective>
If you want „native“ Classes and Cross
compile: Use Traceur!
</subjective>
Traceur - RheinMainJS April 2014

I would like to
Thankyou!
I am
Carsten Sandtner
!
Web: http://www.appsbu.de
Twitter: @casarock
Mail: hallo@appsbu.de
Traceur - RheinMainJS April 2014@casarock