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

914
-1

Published on

Slides from my talk at RheinmainJS April 2014.

Traceur - ES6 Cross compilation.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×