Don't Leave Windows Broken

Don't Leave Windows Broken

How to refactor and refine your code in JavaScript!
1. Linting
2. Unit Testing
3. JavaScript : The Bad Parts

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

December 06, 2015
Tweet

Transcript

  1. Don’t Leave Windows Broken Kenju Wagatsuma

  2. Agenda: -> ❖ 1m : Self Introduction ❖ 5m :

    0. Goal & Outline ❖ 8m : 1. Linting ❖ 8m : 2. Unit Testing ❖ 8m : 3. Know JavaScript Bad Parts
  3. /** * Introduce Myself * * @kenju */

  4. “me” = { “name” : “Kenju Wagatsuma ( KJ )”,

    }
  5. “me” = { “name” : “Kenju Wagatsuma ( KJ )”,

    “company” : “Recruit Technologies Co.,LTD.”, }
  6. “me” = { “name” : “Kenju Wagatsuma ( KJ )”,

    “company” : “Recruit Technologies Co.,LTD.”, “profession” : “Android Development”, }
  7. “me” = { “name” : “Kenju Wagatsuma ( KJ )”,

    “company” : “Recruit Technologies Co.,LTD.”, “profession” : “Android Development”, “favs” : { 'Music' : ‘Stevie Wonder', 'Hobby' : ‘Acoustic Guitar & Singing’, 'Sport' : 'Rugby' } }
  8. /** * 0. Goal & Outline * * @author me

    */
  9. Goal Don’t Leave Windows Broken

  10. None
  11. #2 “Software Entropy” One broken window, left unrepaired for any

    substantial length of time, instills in the inhabitants of the building a sense of abandonment - a sense that the powers that be don’t care about the building.
  12. Quiz Refactor This Code

  13. Bad Sample

  14. Bad Sample : Answer

  15. This is the Broken Windows

  16. How to avoid? ❖ Linting ❖ ❖

  17. How to avoid? ❖ Linting ❖ Unit Testing ❖

  18. How to avoid? ❖ Linting ❖ Unit Testing ❖ Understand

    The Bad Parts of JavaScript
  19. /** * 1. Linting * * @author me */

  20. What is Lint? ❖ Generically, lint or a linter is

    any tool that flags suspicious usage in software written in any computer language
  21. ESLint

  22. What is ESLint? ❖ is an open source JavaScript linting

    utility ❖ ❖
  23. What is ESLint? ❖ is an open source JavaScript linting

    utility ❖ is written using Node.js ❖
  24. What is ESLint? ❖ is an open source JavaScript linting

    utility ❖ is written using Node.js ❖ and easy installation via npm
  25. How to ESLint?

  26. How to ESLint?

  27. Why is ESLint? ❖ JavaScript is loosely-typed so that is

    prone to developer error ❖ ❖
  28. Why is ESLint? ❖ JavaScript is loosely-typed so that is

    prone to developer error ❖ JavaScript has no compilation ❖
  29. Why is ESLint? ❖ JavaScript is loosely-typed so that is

    prone to developer error ❖ JavaScript has no compilation ❖ ESLint discovers problems with their JavaScript code without executing it
  30. Live Coding Linting

  31. /** * 2. Unit Testing * * @author me */

  32. What is Unit Test? ❖ Testing done on each module

    ( function, methods, etc. ) in isolation, to verify its behaviour
  33. Why Unit Test? ❖ 1. Examples of how to use

    all the functionality of your module ❖ 2. A means to build regression tests to validate any future changes to the code
  34. What is Karma? ❖ is testing development ❖ is not

    a testing framework, nor an assertion library ❖ (on which Jasmine, QUnit or other testing frameworks run)
  35. ❖ is an open source testing framework for JavaScript ❖

    runs on any JavaScript- enabled platform ❖ does not require a DOM What is Jasmine?
  36. Unit Testing Karma Jasmine Web Browser Write Unit Testing Execute

    Unit Testing Where Unit Testing Runs On
  37. 0. Install Karma/Jasmine # Install Jasmine $ npm install -g

    jasmine # Install Karma $ npm install -g karma-cli
  38. 1. Initialise Directory # Initialise $ karma init Which testing

    framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine … … …
  39. 1. Initialise Directory . ├── karma.conf.js (config file) ├── spec

    │ └── MainAppSpec.js (Test) └── src └── MainApp.js (Main File)
  40. 2. Set configure file (karma.conf.js) … … files: [ 'spec/*.js',

    'src/*.js' ], … …
  41. 3. Write Test First (./spec/MainAppSpec.js) describe("CalculationUtil Test", function() { //

    CalculationUtil.sum() it("100 plus 300 is 400", function() { expect(CalculationUtil.sum(100, 300)).toBe(400); }); // CalculationUtil.multiply() it("300 multiply 3 is 900", function() { expect(CalculationUtil.multiply(300, 3)).toBe(900); }); });
  42. 4. Write Program (./src/MainApp.js) var CalculationUtil = CalculationUtil || {};

    CalculationUtil.sum = function(x, y) { if (typeof x !== 'number' || typeof y !== 'number') return; return x + y; }; CalculationUtil.multiply = function(x, y) { if (typeof x !== 'number' || typeof y !== 'number') return; return x * y; }
  43. 5. Run Karma # Run Karma $ karma start karma.conf.js

    … … (Test Result would show here)
  44. Live Coding Testing

  45. /** * 3. JavaScript : * The Bad Parts *

    * @author me */
  46. Read This.

  47. 1. == ‘’ == ‘0’ // false 0 == ‘’

    // true 0 == ‘0’ // true false == ‘false’ // false false == ‘0’ // true false == undefined // false false == null // false null == undefined // true
  48. 2. forgotten ‘var’

  49. 3. Reserved Words

  50. And Much More.

  51. /** * Happy Coding! * */

  52. /** * Appendix * */

  53. Blog “The Art of Debugging” @see https://remysharp.com/2015/10/14/ the-art-of-debugging

  54. Blog “ேLint׆ಈͰࡉ͔ͳٕज़తෛ࠴Λฦࡁ͢Δ” @see http://techlife.cookpad.com/entry/ 2015/09/15/190000

  55. Blog “karmaΛ࢖ͬͨςετۦಈ։ൃೖ໳ʢ͍ͭͰʹ Jasmine΋ʣ” @see http://qiita.com/shinofara/items/ b3677ffdfc0c7e45e8d4ɹ

  56. Discussion “JavaScript unit test tools for TDD” @see http://stackoverflow.com/questions/ 300855/javascript-unit-test-tools-

    for-tdd
  57. Documentation “Getting Started with ESLint” @see http://eslint.org/docs/user-guide/ getting-started

  58. Documentation “Jasmine - introduction.js” @see http://jasmine.github.io/2.4/ introduction.html

  59. Book “JavaScript : The Good Parts” @see http://bdcampbell.net/javascript/ book/javascript_the_good_parts.pdf

  60. /** * Contacts * */

  61. “contact” = { “Twitter” : “@kenjuwagatsuma”, “GitHub” : “https://github.com/KENJU”, “Blog”

    : “https://medium.com/@kenjuwagatsuma” }