Upload
carsten-sandtner
View
716
Download
0
Embed Size (px)
DESCRIPTION
Slides from my talk at RheinmainJS April 2014. Traceur - ES6 Cross compilation.
Citation preview
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
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
Traceur - RheinMainJS April 2014
@casarock
But I want
AutomatedBuildsGrunt plugin
https://github.com/aaronfrost/grunt-traceur
!Gulp Plugin
https://github.com/sindresorhus/gulp-traceur
Traceur - RheinMainJS April 2014
@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'] } }, }});
Traceur - RheinMainJS April 2014
@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'));});
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: [email protected]
Traceur - RheinMainJS April 2014@casarock