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


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

ANDSAFARI? 2/68

@casarock

I want to use it,

ButHOW?Browser Detection…

… and deliver different JS?

… or Add a „Best viewed in Firefox“-Button?


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


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

CROSSCOMPILEInstall 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

AutomatedBuildsGrunt plugin

https://github.com/aaronfrost/grunt-traceur

!Gulp Plugin

https://github.com/sindresorhus/gulp-traceur


@casarock

How to configure

GRUNTGrunt 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

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


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>


I would like to

Thankyou!I am

Carsten Sandtner !Web: http://www.appsbu.de

Twitter: @casarock

Mail: [email protected]

Traceur - RheinMainJS April 2014@casarock

traceur - javascript.next - now! rheinmainjs april 14th

Presentations & Public Speaking