SlideShare ist ein Scribd-Unternehmen logo

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

Carsten Sandtner
Carsten Sandtner
Carsten SandtnerTechnical Director at mediaman // um mediaman //

Slides from my talk at RheinmainJS April 2014. Traceur - ES6 Cross compilation.

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

1 von 21
Downloaden Sie, um offline zu lesen
Next Generation Javascript - Now!
Traceur
Traceur - Javascript.next - Now! RheinmainJS April 14th
@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

Recomendados

Más contenido relacionado

Was ist angesagt?

PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.
PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.
PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.Puppet
 
What Is Async, How Does It Work, And When Should I Use It?
What Is Async, How Does It Work, And When Should I Use It?What Is Async, How Does It Work, And When Should I Use It?
What Is Async, How Does It Work, And When Should I Use It?emptysquare
 
Locarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesLocarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesIkuru Kanuma
 
Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!cloudbring
 
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej EzrOSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej EzrNETWAYS
 
"fireap" - fast task runner on consul
"fireap" - fast task runner on consul"fireap" - fast task runner on consul
"fireap" - fast task runner on consulIKEDA Kiyoshi
 
Async await functions in ruby
Async await functions in rubyAsync await functions in ruby
Async await functions in rubyYusuke Sato
 
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-railsNico Hagenburger
 
Future of Development and Deployment using Docker
Future of Development and Deployment using DockerFuture of Development and Deployment using Docker
Future of Development and Deployment using DockerTamer Abdul-Radi
 
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)function* - ES6, generators, and all that (JSRomandie meetup, February 2014)
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)Igalia
 
Go debugging and troubleshooting tips - from real life lessons at SignalFx
Go debugging and troubleshooting tips - from real life lessons at SignalFxGo debugging and troubleshooting tips - from real life lessons at SignalFx
Go debugging and troubleshooting tips - from real life lessons at SignalFxSignalFx
 
Go Profiling - John Graham-Cumming
Go Profiling - John Graham-Cumming Go Profiling - John Graham-Cumming
Go Profiling - John Graham-Cumming Cloudflare
 
Advanced Radiant
Advanced RadiantAdvanced Radiant
Advanced RadiantArrrrCamp
 
TensorFlow London 13.09.17 Ilya Dmitrichenko
TensorFlow London 13.09.17 Ilya DmitrichenkoTensorFlow London 13.09.17 Ilya Dmitrichenko
TensorFlow London 13.09.17 Ilya DmitrichenkoSeldon
 
Ansible party in the [Google] clouds
Ansible party in the [Google] cloudsAnsible party in the [Google] clouds
Ansible party in the [Google] cloudsEsther Lozano
 
Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門Takayuki Goto
 

Was ist angesagt? (19)

PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.
PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.
PuppetConf 2016: Multi-Tenant Puppet at Scale – John Jawed, eBay, Inc.
 
What Is Async, How Does It Work, And When Should I Use It?
What Is Async, How Does It Work, And When Should I Use It?What Is Async, How Does It Work, And When Should I Use It?
What Is Async, How Does It Work, And When Should I Use It?
 
Ender
EnderEnder
Ender
 
Locarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesLocarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript Libraries
 
Ansible on AWS
Ansible on AWSAnsible on AWS
Ansible on AWS
 
Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!
 
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej EzrOSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
 
"fireap" - fast task runner on consul
"fireap" - fast task runner on consul"fireap" - fast task runner on consul
"fireap" - fast task runner on consul
 
Async await functions in ruby
Async await functions in rubyAsync await functions in ruby
Async await functions in ruby
 
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails
 
Future of Development and Deployment using Docker
Future of Development and Deployment using DockerFuture of Development and Deployment using Docker
Future of Development and Deployment using Docker
 
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)function* - ES6, generators, and all that (JSRomandie meetup, February 2014)
function* - ES6, generators, and all that (JSRomandie meetup, February 2014)
 
Go debugging and troubleshooting tips - from real life lessons at SignalFx
Go debugging and troubleshooting tips - from real life lessons at SignalFxGo debugging and troubleshooting tips - from real life lessons at SignalFx
Go debugging and troubleshooting tips - from real life lessons at SignalFx
 
Go Profiling - John Graham-Cumming
Go Profiling - John Graham-Cumming Go Profiling - John Graham-Cumming
Go Profiling - John Graham-Cumming
 
Advanced Radiant
Advanced RadiantAdvanced Radiant
Advanced Radiant
 
TensorFlow London 13.09.17 Ilya Dmitrichenko
TensorFlow London 13.09.17 Ilya DmitrichenkoTensorFlow London 13.09.17 Ilya Dmitrichenko
TensorFlow London 13.09.17 Ilya Dmitrichenko
 
Go memory
Go memoryGo memory
Go memory
 
Ansible party in the [Google] clouds
Ansible party in the [Google] cloudsAnsible party in the [Google] clouds
Ansible party in the [Google] clouds
 
Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門
 

Ähnlich wie Traceur - Javascript.next - Now! RheinmainJS April 14th

JavaScript in 2015
JavaScript in 2015JavaScript in 2015
JavaScript in 2015Igor Laborie
 
Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()Miłosz Sobczak
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript DevelopmentJussi Pohjolainen
 
ECMAScript 6, o cómo usar el JavaScript del futuro hoy
ECMAScript 6, o cómo usar el JavaScript del futuro hoyECMAScript 6, o cómo usar el JavaScript del futuro hoy
ECMAScript 6, o cómo usar el JavaScript del futuro hoySoftware Guru
 
Diving into HHVM Extensions (php[tek] 2016)
Diving into HHVM Extensions (php[tek] 2016)Diving into HHVM Extensions (php[tek] 2016)
Diving into HHVM Extensions (php[tek] 2016)James Titcumb
 
Graal in GraalVM - A New JIT Compiler
Graal in GraalVM - A New JIT CompilerGraal in GraalVM - A New JIT Compiler
Graal in GraalVM - A New JIT CompilerKoichi Sakata
 
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーV8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーTaketoshi 青野健利
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web PlatformC4Media
 
React Native Evening
React Native EveningReact Native Evening
React Native EveningTroy Miles
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing UpDavid Padbury
 
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...SF Big Analytics 20191112: How to performance-tune Spark applications in larg...
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...Chester Chen
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf
 
Complex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxComplex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxbobmcwhirter
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
Xopus Application Framework
Xopus Application FrameworkXopus Application Framework
Xopus Application FrameworkJady Yang
 

Ähnlich wie Traceur - Javascript.next - Now! RheinmainJS April 14th (20)

ECMAScript 6
ECMAScript 6ECMAScript 6
ECMAScript 6
 
JavaScript in 2015
JavaScript in 2015JavaScript in 2015
JavaScript in 2015
 
Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()
 
es6
es6es6
es6
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript Development
 
ECMAScript 6, o cómo usar el JavaScript del futuro hoy
ECMAScript 6, o cómo usar el JavaScript del futuro hoyECMAScript 6, o cómo usar el JavaScript del futuro hoy
ECMAScript 6, o cómo usar el JavaScript del futuro hoy
 
Diving into HHVM Extensions (php[tek] 2016)
Diving into HHVM Extensions (php[tek] 2016)Diving into HHVM Extensions (php[tek] 2016)
Diving into HHVM Extensions (php[tek] 2016)
 
Graal in GraalVM - A New JIT Compiler
Graal in GraalVM - A New JIT CompilerGraal in GraalVM - A New JIT Compiler
Graal in GraalVM - A New JIT Compiler
 
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーV8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
 
AppengineJS
AppengineJSAppengineJS
AppengineJS
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...SF Big Analytics 20191112: How to performance-tune Spark applications in larg...
SF Big Analytics 20191112: How to performance-tune Spark applications in larg...
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 
Complex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxComplex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBox
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Sprockets
SprocketsSprockets
Sprockets
 
Xopus Application Framework
Xopus Application FrameworkXopus Application Framework
Xopus Application Framework
 
ES6: The Awesome Parts
ES6: The Awesome PartsES6: The Awesome Parts
ES6: The Awesome Parts
 

Mehr von Carsten Sandtner

WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016Carsten Sandtner
 
Evolution der Web Entwicklung
Evolution der Web EntwicklungEvolution der Web Entwicklung
Evolution der Web EntwicklungCarsten Sandtner
 
HTML5 Games for Web & Mobile
HTML5 Games for Web & MobileHTML5 Games for Web & Mobile
HTML5 Games for Web & MobileCarsten Sandtner
 
What is responsive - and do I need it?
What is responsive - and do I need it?What is responsive - and do I need it?
What is responsive - and do I need it?Carsten Sandtner
 
Web APIs - Mobiletech Conference 2015
Web APIs - Mobiletech Conference 2015Web APIs - Mobiletech Conference 2015
Web APIs - Mobiletech Conference 2015Carsten Sandtner
 
Web APIs – expand what the Web can do
Web APIs – expand what the Web can doWeb APIs – expand what the Web can do
Web APIs – expand what the Web can doCarsten Sandtner
 
Firefox OS - A (mobile) Web Developers dream - DWX14
Firefox OS - A (mobile) Web Developers dream - DWX14Firefox OS - A (mobile) Web Developers dream - DWX14
Firefox OS - A (mobile) Web Developers dream - DWX14Carsten Sandtner
 
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014Carsten Sandtner
 
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014Carsten Sandtner
 

Mehr von Carsten Sandtner (16)

State of Web APIs 2017
State of Web APIs 2017State of Web APIs 2017
State of Web APIs 2017
 
Headless in the CMS
Headless in the CMSHeadless in the CMS
Headless in the CMS
 
Always on! Or not?
Always on! Or not?Always on! Or not?
Always on! Or not?
 
Night Watch with QA
Night Watch with QANight Watch with QA
Night Watch with QA
 
Always on! ... or not?
Always on! ... or not?Always on! ... or not?
Always on! ... or not?
 
WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016
 
Evolution der Web Entwicklung
Evolution der Web EntwicklungEvolution der Web Entwicklung
Evolution der Web Entwicklung
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
HTML5 Games for Web & Mobile
HTML5 Games for Web & MobileHTML5 Games for Web & Mobile
HTML5 Games for Web & Mobile
 
What is responsive - and do I need it?
What is responsive - and do I need it?What is responsive - and do I need it?
What is responsive - and do I need it?
 
Web apis JAX 2015 - Mainz
Web apis JAX 2015 - MainzWeb apis JAX 2015 - Mainz
Web apis JAX 2015 - Mainz
 
Web APIs - Mobiletech Conference 2015
Web APIs - Mobiletech Conference 2015Web APIs - Mobiletech Conference 2015
Web APIs - Mobiletech Conference 2015
 
Web APIs – expand what the Web can do
Web APIs – expand what the Web can doWeb APIs – expand what the Web can do
Web APIs – expand what the Web can do
 
Firefox OS - A (mobile) Web Developers dream - DWX14
Firefox OS - A (mobile) Web Developers dream - DWX14Firefox OS - A (mobile) Web Developers dream - DWX14
Firefox OS - A (mobile) Web Developers dream - DWX14
 
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
 
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
 

Último

Scaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaScaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaFrancois Stepman
 
Ammunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsAmmunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsshubhamdwivedi7521
 
"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentationVicky Evangeliou
 
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfAWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfVladimir Samoylov
 
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxForklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxbriancriswell1979
 
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...Francois Stepman
 
Git and Github.pptx
Git and Github.pptxGit and Github.pptx
Git and Github.pptxaymanessam16
 

Último (9)

Becoming a Member of Society.pptx
Becoming a Member of Society.pptxBecoming a Member of Society.pptx
Becoming a Member of Society.pptx
 
Scaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaScaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West Africa
 
Ammunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsAmmunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballistics
 
"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation
 
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfAWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
 
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxForklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
 
Industry & Microbiology
Industry & MicrobiologyIndustry & Microbiology
Industry & Microbiology
 
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
 
Git and Github.pptx
Git and Github.pptxGit and Github.pptx
Git and Github.pptx
 

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
  • 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