Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ES2015 workflows

1,327 views

Published on

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

Published in: Technology
  • Be the first to comment

ES2015 workflows

  1. 1. ECMAScript 2015 @jsoverson
  2. 2. var that = this;
  3. 3. function Klass() {
 
 }

  4. 4. function Klass() {
 
 }
 
 
 Klass.prototype.myMethod = function(){}
  5. 5. function Klass() {
 
 }
 
 Klass.prototype = Parent.prototype;
 
 Klass.prototype.myMethod = function(){}
  6. 6. Klass.prototype.myMethod() { console.log('In my Method!'); }
  7. 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. 8. ES2015 to the rescue!
  9. 9. Me
  10. 10. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  11. 11. ES2015 used to be known as ES6
  12. 12. You can play around here http://bit.ly/es6console
  13. 13. function (x) { return x * 2 } x => x * 2 Becomes
  14. 14. [1,2,3].map(x => x * 2)
 .reduce((p,n) => p + n) ➤
  15. 15. { update : function(data) {/*…*/}, retrieve : function() { fetch('http://example.com')
 .then(res => this.update(res)) } }
  16. 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. 17. class JavaScrap extends Person {
 constructor(name) {
 super(name);
 this.shout('i <3 js');
 } shout(msg) {
 this.say(msg.toUpperCase());
 }
 } ➤
  18. 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. 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. 20. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  21. 21. Reality Check : ES 2015 vs ES 5
  22. 22. Source to Source compiling a.k.a. Transpiling
  23. 23. npm install eslint
  24. 24. wat? Where’s Babel ?
  25. 25. If you can’t lint, if you can’t test, then you’re just toying around.
  26. 26. class Greeter {
 constructor(greeting = 'Hello', target = 'World') {
 this.greeting = greeting;
 this.target = target;
 } getGreeting() {
 return `${this.greeting} ${this.target}`;
 }
 }
 
 export default Greeter;
  27. 27. $ ./node_modules/.bin/eslint src src/index.js 4:1 error Unexpected reserved word ✖ 1 problem (1 error, 0 warnings)
  28. 28. ./node_modules/.bin/eslint —-init
  29. 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. 30. $ ./node_modules/.bin/eslint src src/index.js 12:2 error Illegal export declaration ✖ 1 problem (1 error, 0 warnings)
  31. 31. .eslintrc : "ecmaFeatures": {
 "modules": true
 } See: Specifying Language options in eslint
  32. 32. $ ./node_modules/.bin/eslint src $ No output means we’re good!
  33. 33. package.json : "scripts": {
 "lint": "eslint src/"
 },
 $ npm run lint Enables you to run : Note: no “./node_modules/.bin/” prefix
  34. 34. npm install mocha
  35. 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. 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. 37. npm install babel
  38. 38. $ ./node_modules/.bin/mocha --require babel/register test index ✓ should instantiate with defaults ✓ should provide a greeting 2 passing (7ms)
  39. 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. 40. npm install istanbul
  41. 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. 42. Enables you to run : package.json : "scripts": {
 "coverage": "istanbul cover _mocha -- --require babel/register"
 },
 $ npm run coverage ➤
  43. 43. Building your distributable
  44. 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. 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. 46. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  47. 47. ES2015 is here and marks a transition.
  48. 48. Thanks -jsoverson

×