I want my ES6, like ES.NOW I want my ES6, like ES.NOW Ken Rimple Mentor, Trainer, Consultant Chariot Solutions Slides - <-- that's not a zero http://1drv.ms/1DJQ4RO reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/ 1 of 43 04/10/2015 06:04 PM
43
Embed
reveal.js - The HTML Presentation Framework ...chariotsolutions.com/wp-content/uploads/2015/04/KenRimple_ETE2015_ES6... · What is ES6? reveal.js - The HTML Presentation Framework
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
I want my ES6, like ES.NOWI want my ES6, like ES.NOW
Ken Rimple Mentor, Trainer, Consultant ChariotSolutions
Slides - <-- that's not a zerohttp://1drv.ms/1DJQ4RO
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
1 of 43 04/10/2015 06:04 PM
TopicsTopics
What is ES6?Where are we now?How can we code ES6 now and run in ES5?
Client-sideServer-side
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
2 of 43 04/10/2015 06:04 PM
What is ES6?What is ES6?
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
3 of 43 04/10/2015 06:04 PM
ECMASCRIPT 6ECMASCRIPT 6
The next evolution of JavaScript (ECMASCRIPT === ES)Being embedded in browsers within the next 18monthsLots of new features
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
4 of 43 04/10/2015 06:04 PM
Major new featuresMajor new features
Classes, extends, constructors and member functions
class Klingon extends Warrior { constructor(name) { } methodA(); methodB();}
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
5 of 43 04/10/2015 06:04 PM
Local variables, constantsLocal variables, constants
function foo() {
// function-scoped var x = 234;
if (x === 234) { let b = 24; // scoped to if }}
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
6 of 43 04/10/2015 06:04 PM
Arrow functions and string magicArrow functions and string magic
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
11 of 43 04/10/2015 06:04 PM
GeneratorsGenerators
function *shoppingList() { yield 'apples'; yield 'oranges'; yield 'cereal';}
let iterator = shoppingList();while(true) { var obj = iterator.next(); if (obj.done) break; console.log(obj.value);}
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
12 of 43 04/10/2015 06:04 PM
What is supported now?What is supported now?
See Browser-side - not everything natively - unlessyou're on Firefox NightlyOr you can use transpilers, shims and/or a buildprocessServer-side - depends on engine
http://kangax.github.io/compat-table/es6/
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
13 of 43 04/10/2015 06:04 PM
ES6 in the Browser...ES6 in the Browser...
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
14 of 43 04/10/2015 06:04 PM
What about today?What about today?
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
15 of 43 04/10/2015 06:04 PM
Let's move the enterprise to that NOW!Let's move the enterprise to that NOW!
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
16 of 43 04/10/2015 06:04 PM
How else? Two major themesHow else? Two major themes
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
29 of 43 04/10/2015 06:04 PM
Traceur in a buildTraceur in a build
You can usetracer as a command-line utilitytraceur-gulp (|grunt|whatever)6to5ify with BrowserifyKarma traceur preprocessor
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
30 of 43 04/10/2015 06:04 PM
Some challengesSome challenges
Generated ES5 code is not always correct
The transpiler cannot know all API changes by itself
Example - Array methods
from is an ES6 feature in Array, but was not includedin the transpiler directly.
Babel provides a polyfill for this - polyfill.js - inthe library
Array.from({length: 5}, (v, k) => k);
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
31 of 43 04/10/2015 06:04 PM
Transpiling is not a panaceaTranspiling is not a panacea
You need to pick a module loader strategy to transpiledown toYou need to re-test once browsers begin to supportfeaturesSome ES6 features (tail-recursion) will require binarybrowser changesSome APIs won't be available without polyfillsCheck sites like Kangax
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
32 of 43 04/10/2015 06:04 PM
Where are we heading?Where are we heading?
Angular 2.0 - will use the traceur compiler + AtScript(===> Typescript 1.5)Typescript 1.5 - will generate ES5 AND ES6, containAtScript annotationesEmber 2 - will use ES6 coding features (with Babel)EVENTUALLY - ES6 rules them allBut we thought that with HTML5 too
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
33 of 43 04/10/2015 06:04 PM
Server-side ECMAScript 6Server-side ECMAScript 6
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
34 of 43 04/10/2015 06:04 PM
Several Options hereSeveral Options here
NodeJS with a transpiler to ES5 (see prior examples)NodeJS with a wrapper such as node-babelNodeJS activating Harmony features directlyio.js (fork of NodeJS)
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
35 of 43 04/10/2015 06:04 PM
NodeJS and ECMAScript 6 features w/BabelNodeJS and ECMAScript 6 features w/Babel
Just install Babel orRun node-babel
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
36 of 43 04/10/2015 06:04 PM
NodeJS and ECMAScript 6NodeJS and ECMAScript 6
You can enable ES6 featuresMuch of ES6 is implementedYou must turn on special flags
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
38 of 43 04/10/2015 06:04 PM
ES6 Node server exampleES6 Node server example
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
39 of 43 04/10/2015 06:04 PM
Alternative to NodeJs - io.jsAlternative to NodeJs - io.js
A fork of node.js
Updated status https://github.com/iojs/io.js/issues/1336
Controversial, but has a number of developers focusedon moving the platform forwardAlready supports a number of ES6 features out of thebox, can turn on the rest
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
40 of 43 04/10/2015 06:04 PM
ES6-ready framework exampleES6-ready framework example
Koa - developer of Express - uses --harmony flag
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/
41 of 43 04/10/2015 06:04 PM
Should you do this now?Should you do this now?
Up to youSpecs will be tweakedDo NOT dive in and use every feature withoutweighing it
You can still code "Good Parts" styleBut Crockford has a video on the newer "Good Parts"of ES6Link: http://goo.gl/eD4UB5
reveal.js - The HTML Presentation Framework http://0.0.0.0:8000/?print-pdf#/