ES2015 workflows

function Klass() { 
 
} 
 
 
Klass.prototype.myMethod = function(){}

function Klass() { 
 
} 
 
Klass.prototype = Parent.prototype; 
 
Klass.prototype.myMethod = function(){}

Klass.prototype.myMethod() {
console.log('In my Method!');
}

if (typeof exports === 'object' && 
typeof define !== 'function') { 
var define = function (factory) { 
factory(require, exports, module); 
}; 
} 
 
define(function (require, exports, module) { 
var b = require('b'); 
 
exports.action = function () {}; 
});

1. What is ES2015?
2. How can I use it?
3. What’s next?

ES2015
used to be known as
ES6

You can play around here
http://bit.ly/es6console

function (x) { return x * 2 }
x => x * 2
Becomes

[1,2,3].map(x => x * 2) 
.reduce((p,n) => p + n)
➤

{
update : function(data) {/*…*/},
retrieve : function() {
fetch('http://example.com') 
.then(res => this.update(res))
}
}

function JavaScrap(name) { 
Person.call(this, name); 
this.shout('i <3 js'); 
} 
 
JavaScrap.prototype = 
Object.create(Person.prototype); 
 
JavaScrap.prototype.shout = function(msg) { 
this.say(msg.toUpperCase()); 
};
Becomes…

class JavaScrap extends Person { 
constructor(name) { 
super(name); 
this.shout('i <3 js'); 
}
shout(msg) { 
this.say(msg.toUpperCase()); 
} 
} ➤

"My name is " + name + ".n" +
"I will be " + (age + 1) + " next year."
`My name is ${name}.
I will be ${age + 1} next year.`
Becomes
➤

RESOURCE SLIDE!
Exploring ES6 by @rauschma : http://exploringjs.com/ (online)
Six steps for approaching ES6, telerik : Six Steps for approaching ES6
ES6 in depth : https://hacks.mozilla.org/category/es6-in-depth/
ES6 Features : https://github.com/lukehoban/es6features
ES6 console : http://jsoverson.github.io/es6repl/
Babel repl : https://babeljs.io/repl/
ES6 features (dot org) : http://es6-features.org/
ES6 compatibility : https://kangax.github.io/compat-table/es6/
You Don’t Know JS : ES6 & Beyond by @getify
Learning ES2015 would be impossible in 20 minutes. This talk is about getting stuff done.

Reality Check : ES 2015 vs ES 5

Source to Source compiling
a.k.a.
Transpiling

If you can’t lint, if you can’t test,
then you’re just toying around.

class Greeter { 
constructor(greeting = 'Hello', target = 'World') { 
this.greeting = greeting; 
this.target = target; 
}
getGreeting() { 
return `${this.greeting} ${this.target}`; 
} 
} 
 
export default Greeter;

$ ./node_modules/.bin/eslint src
src/index.js
4:1 error Unexpected reserved word
✖ 1 problem (1 error, 0 warnings)

./node_modules/.bin/eslint —-init

$ ./node_modules/.bin/eslint —-init
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? Are you using ECMAScript 6 features? Yes
? Where will your code run? Node, Browser
? Do you use JSX? No
? What format do you want your config file to be in? JSON
Successfully created .eslintrc file in ./es6-linting

src/index.js
12:2 error Illegal export declaration
✖ 1 problem (1 error, 0 warnings)

.eslintrc :
"ecmaFeatures": { 
"modules": true 
}
See: Specifying Language options in eslint

$
No output means we’re good!

package.json :
"scripts": { 
"lint": "eslint src/" 
}, 
$ npm run lint
Enables you to run :
Note: no “./node_modules/.bin/” preﬁx

import assert from 'assert'; 
import Greeter from '../src/'; 
 
describe('test index', () => { 
let greeter; 
before(() => { 
greeter = new Greeter(); 
});
 
it('should instantiate with defaults', () => { 
assert.equal(greeter.greeting, 'Hello'); 
assert.equal(greeter.target, 'World'); 
});
 
it('should provide a greeting', () => { 
var greeting = greeter.getGreeting(); 
assert.equal(greeting, 'Hello World'); 
}); 
});

$ ./node_modules/.bin/mocha test/
test/index.spec.js:2
import assert from 'assert';
^^^^^^
SyntaxError: Unexpected reserved word
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)

$ ./node_modules/.bin/mocha --require babel/register
test index
✓ should instantiate with defaults
✓ should provide a greeting
2 passing (7ms)

package.json :
"scripts": { 
"unit": "mocha --require babel/register”,
"test": "$npm_package_scripts_lint && $npm_package_scripts_unit" 
}, 
$ npm run unit
$ npm run test
$ npm test “test” is a special, ﬁrst-class script
Note: npm script values as variables

$ ./n_m/.b/istanbul cover ./n_m/.b/_mocha -- --require babel/register
test index
✓ should instantiate with defaults
✓ should provide a greeting
2 passing (5ms)
=============================================================================
Writing coverage object [./coverage/coverage.json]
Writing coverage reports at [./coverage]
=============================================================================
=============================== Coverage summary ============================
Statements : 100% ( 31/31 ), 2 ignored
Branches : 77.78% ( 14/18 ), 4 ignored
Functions : 100% ( 7/7 )
Lines : 100% ( 15/15 )
=============================================================================

package.json :
"scripts": { 
"coverage": "istanbul cover _mocha -- --require babel/register" 
}, 
$ npm run coverage
➤

package.json :
"scripts": { 
"build": "babel --out-dir dist src", 
"watch": "$npm_package_scripts_build --watch" 
}, 
$ npm run build
$ npm run watch

package.json :
"scripts": { 
"build": "babel --out-dir dist src", 
"watch": "$npm_package_scripts_build --watch", 
"lint": "eslint src/", 
"unit": "mocha --require babel/register", 
"test": "$npm_package_scripts_lint && $npm_package_scripts_unit", 
"coverage": "istanbul cover _mocha -- --require babel/register" 
},

ES2015 is here and marks a transition.

ES2015 workflows

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to ES2015 workflows

Similar to ES2015 workflows (20)

More from Jarrod Overson

More from Jarrod Overson (20)

Recently uploaded

Recently uploaded (20)

ES2015 workflows