O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

ES2015 workflows

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

  • Seja o primeiro a comentar

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

×