Traceur - Javascript.next - Now! RheinmainJS April 14th
0 likes2,103 views
The document discusses Traceur, a compiler that allows developers to write JavaScript code using ECMAScript 6 features while targeting browsers that do not yet support these features natively. It provides an overview of Traceur's capabilities, how to use it through command line, Grunt, or Gulp builds, and the benefits of using a compiler like Traceur to write ES6 code now while targeting older browsers through compilation to ES5. However, it also notes that Traceur does not support all ES6 features and requires a runtime, so developers must carefully consider if their projects truly need ES6 features.
![@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](https://image.slidesharecdn.com/traceurrmjs2014-04-140424154457-phpapp02/85/Traceur-Javascript-next-Now-RheinmainJS-April-14th-3-320.jpg)
![@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](https://image.slidesharecdn.com/traceurrmjs2014-04-140424154457-phpapp02/85/Traceur-Javascript-next-Now-RheinmainJS-April-14th-4-320.jpg)
![@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](https://image.slidesharecdn.com/traceurrmjs2014-04-140424154457-phpapp02/85/Traceur-Javascript-next-Now-RheinmainJS-April-14th-17-320.jpg)
Traceur - Javascript.next - Now! RheinmainJS April 14th
- 1. Next Generation Javascript - Now! Traceur
- 3. @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
- 4. @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
- 5. @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/
- 7. @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
- 9. @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
- 10. @casarock And how about ES6Support? Supports only 23/68 features! Traceur - RheinMainJS April 2014 • classes • promises • let/Const • rest-/Spread Params • Generators • Destructuring
- 11. @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
- 13. @casarock I just want to PlayAround! Frontend Developers love Fiddles… http://www.es6fiddle.net/ Traceur - RheinMainJS April 2014
- 14. @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
- 15. @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
- 16. @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
- 17. @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
- 18. @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
- 19. Conclusion
- 20. @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
- 21. 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