Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Next Generation Javascript - Now!
Traceur
@casarock
Javascript.next!
EcmaScript6
var square = (x) => {

	 return x * x;

};

var square2 = x => x * x;
Fat Arrow Fun...
@casarock
Javascript.next!
EcmaScript6
class Character {

constructor(x, y) {

this.x = x;

this.y = y;

}

}



class Mon...
@casarock
V34:

• Supports 35 of 68 features

• no classes, generator, arrow functions, rest
parameter etc..

• mostly new...
ANDSAFARI? 2/68
@casarock
I want to use it,
ButHOW?
Browser Detection…
… and deliver different JS?
… or Add a „Best viewed in Firefox“-But...
without coffee!
CrossCompile!
@casarock
parcour?
Tracer?Traceur!
• Cross compiler ES6 -> ES5
• Maintained by Google
!
• Compilation while build
• JIT Co...
@casarock
And how about
ES6Support?
Supports only 23/68 features!
Traceur - RheinMainJS April 2014
• classes
• promises
• ...
@casarock
Why should I
USETRACEUR?
• One Codebase
• compilation withIN build script
• Less Browser specific Code
• Use nex...
Let’s get real!
ENOUGHTHEORY
@casarock
I just want to
PlayAround!
Frontend Developers love Fiddles…
http://www.es6fiddle.net/
Traceur - RheinMainJS Apr...
@casarock
Let the client
CompileONRuntime
• Load Traceur
• Compile at USERs browser
• Get into Performance hell!
• Have fu...
@casarock
I want offline
CROSSCOMPILE
Install Traceur via NPM
$ npm install -g traceur
Compile your ES6 source
$ traceur --o...
@casarock
But I want
AutomatedBuilds
Grunt plugin
https://github.com/aaronfrost/grunt-traceur
!
Gulp Plugin
https://github...
@casarock
How to configure
GRUNT
Grunt Plugin
$ npm install grunt-traceur —save-dev
grunt.loadNpmTasks('grunt-traceur');
gr...
@casarock
But I want streams with
GULP
Gulp Plugin
$ npm install --save-dev gulp-traceur
var gulp = require('gulp');

var ...
Conclusion
@casarock
What I think about
TRACEURCompiler
• Use one ES6 Codebase now - Cross browser
(and with node.js)
• Consider Care...
I would like to
Thankyou!
I am
Carsten Sandtner
!
Web: http://www.appsbu.de
Twitter: @casarock
Mail: hallo@appsbu.de
Trace...
Traceur - Javascript.next - Now! RheinmainJS April 14th
Upcoming SlideShare
Loading in …5
×

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

1,760 views

Published on

Slides from my talk at RheinmainJS April 2014.

Traceur - ES6 Cross compilation.

  • Be the first to comment

  • Be the first to like this

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

  1. 1. Next Generation Javascript - Now! Traceur
  2. 2. @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
  3. 3. @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
  4. 4. @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/
  5. 5. ANDSAFARI? 2/68
  6. 6. @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
  7. 7. without coffee! CrossCompile!
  8. 8. @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
  9. 9. @casarock And how about ES6Support? Supports only 23/68 features! Traceur - RheinMainJS April 2014 • classes • promises • let/Const • rest-/Spread Params • Generators • Destructuring
  10. 10. @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
  11. 11. Let’s get real! ENOUGHTHEORY
  12. 12. @casarock I just want to PlayAround! Frontend Developers love Fiddles… http://www.es6fiddle.net/ Traceur - RheinMainJS April 2014
  13. 13. @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
  14. 14. @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
  15. 15. @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
  16. 16. @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
  17. 17. @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
  18. 18. Conclusion
  19. 19. @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
  20. 20. 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

×