July Modern Web UI talk: Build an ES6/ES2015 workflow for linting, testing, and test coverage.

1. ECMAScript 2015
@jsoverson

2. var that = this;

3. function Klass() {
}

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

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

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

7. 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 () {};
});

8. ES2015 to the rescue!

9. Me

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

11. ES2015
used to be known as
ES6

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

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

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

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

16. 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…

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

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

19. 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.

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

21. Reality Check : ES 2015 vs ES 5

22. Source to Source compiling
a.k.a.
Transpiling

23. npm install eslint

24. wat? Where’s Babel ?

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

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

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

28. ./node_modules/.bin/eslint —-init

29. $ ./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

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

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

32. $ ./node_modules/.bin/eslint src
$
No output means we’re good!

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

34. npm install mocha

35. 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');
});
});

36. $ ./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)

37. npm install babel

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

39. Enables you to run :
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, first-class script
Note: npm script values as variables

40. npm install istanbul

41. $ ./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 )
=============================================================================

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

43. Building your distributable

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

45. 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"
},

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

47. ES2015 is here and marks a transition.

48. Thanks
-jsoverson