Traceur - Javascript.next - Now! RheinmainJS April 14th

Next Generation Javascript - Now!
Traceur

@casarock
Javascript.next!
EcmaScript6
var square = (x) => { 
return x * x; 
};

var square2 = x => x * x;
Fat Arrow Functions
function* ﬁbonacci() {

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...

@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?
http://kangax.github.io/es5-compat-table/es6/

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

without coﬀee!
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

@casarock
And how about
ES6Support?
Supports only 23/68 features!
• 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

Let’s get real!
ENOUGHTHEORY

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

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

@casarock
I want oﬄine
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

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

@casarock
How to conﬁgure
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'] 
} 
}, 
} 
});

@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')); 
});

@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>

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

Traceur - Javascript.next - Now! RheinmainJS April 14th

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Traceur - Javascript.next - Now! RheinmainJS April 14th

Similar to Traceur - Javascript.next - Now! RheinmainJS April 14th (20)

More from Carsten Sandtner

More from Carsten Sandtner (16)

Recently uploaded

Recently uploaded (20)

Traceur - Javascript.next - Now! RheinmainJS April 14th