Don't Leave Windows Broken

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

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
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” }