don't leave windows broken
TRANSCRIPT
Don’t Leave Windows Broken
Kenju Wagatsuma
Agenda: ->
❖ 1m : Self Introduction ❖ 5m : 0. Goal & Outline ❖ 8m : 1. Linting ❖ 8m : 2. Unit Testing ❖ 8m : 3. Know JavaScript Bad Parts
/** * Introduce Myself * * @kenju */
“me” = { “name” : “Kenju Wagatsuma ( KJ )”,
}
“me” = { “name” : “Kenju Wagatsuma ( KJ )”, “company” : “Recruit Technologies Co.,LTD.”,
}
“me” = { “name” : “Kenju Wagatsuma ( KJ )”, “company” : “Recruit Technologies Co.,LTD.”, “profession” : “Android Development”,
}
“me” = { “name” : “Kenju Wagatsuma ( KJ )”, “company” : “Recruit Technologies Co.,LTD.”, “profession” : “Android Development”, “favs” : { 'Music' : ‘Stevie Wonder', 'Hobby' : ‘Acoustic Guitar & Singing’, 'Sport' : 'Rugby' } }
/** * 0. Goal & Outline * * @author me */
Goal
Don’t Leave Windows Broken
#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.
Quiz
Refactor This Code
Bad Sample
Bad Sample : Answer
This is the Broken Windows
How to avoid?
❖ Linting ❖ ❖
How to avoid?
❖ Linting ❖ Unit Testing ❖
How to avoid?
❖ Linting ❖ Unit Testing ❖ Understand The Bad Parts of JavaScript
/** * 1. Linting * * @author me */
What is Lint?
❖ Generically, lint or a linter is any tool that flags suspicious usage in software written in any computer language
ESLint
What is ESLint?
❖ is an open source JavaScript linting utility ❖ ❖
What is ESLint?
❖ is an open source JavaScript linting utility ❖ is written using Node.js ❖
What is ESLint?
❖ is an open source JavaScript linting utility ❖ is written using Node.js ❖ and easy installation via npm
How to ESLint?
How to ESLint?
Why is ESLint?
❖ JavaScript is loosely-typed so that is prone to developer error
❖ ❖
Why is ESLint?
❖ JavaScript is loosely-typed so that is prone to developer error
❖ JavaScript has no compilation ❖
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
Live Coding Linting
/** * 2. Unit Testing * * @author me */
What is Unit Test?
❖ Testing done on each module ( function, methods, etc. ) in isolation, to verify its behaviour
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
What is Karma?❖ is testing development ❖ is not a testing framework,
nor an assertion library ❖ (on which Jasmine, QUnit or
other testing frameworks run)
❖ is an open source testing framework for JavaScript
❖ runs on any JavaScript-enabled platform
❖ does not require a DOM
What is Jasmine?
Unit Testing
Karma
Jasmine
Web Browser
Write Unit Testing
Execute Unit Testing
Where Unit TestingRuns On
0. Install Karma/Jasmine# Install Jasmine $ npm install -g jasmine
# Install Karma $ npm install -g karma-cli
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
… … …
1. Initialise Directory. ├── karma.conf.js (config file) ├── spec │ └── MainAppSpec.js (Test) └── src └── MainApp.js (Main File)
2. Set configure file(karma.conf.js) … … files: [ 'spec/*.js', 'src/*.js' ], … …
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); });
});
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; }
5. Run Karma# Run Karma $ karma start karma.conf.js
… … (Test Result would show here)
Live Coding Testing
/** * 3. JavaScript : * The Bad Parts * * @author me */
Read This.
1. ==‘’ == ‘0’ // false 0 == ‘’ // true 0 == ‘0’ // true
false == ‘false’ // false false == ‘0’ // true
false == undefined // false false == null // false null == undefined // true
2. forgotten ‘var’
3. Reserved Words
And Much More.
/** * Happy Coding! * */
/** * Appendix * */
Blog
“The Art of Debugging”
@see https://remysharp.com/2015/10/14/the-art-of-debugging
Blog
“朝Lint活動で細かな技術的負債を返済する”
@see http://techlife.cookpad.com/entry/2015/09/15/190000
Blog
“karmaを使ったテスト駆動開発入門（ついでにJasmineも）”
@see http://qiita.com/shinofara/items/b3677ffdfc0c7e45e8d4
Discussion
“JavaScript unit test tools for TDD”
@see http://stackoverflow.com/questions/300855/javascript-unit-test-tools-for-tdd
Documentation
“Getting Started with ESLint”
@see http://eslint.org/docs/user-guide/getting-started
Documentation
“Jasmine - introduction.js”
@see http://jasmine.github.io/2.4/introduction.html
Book
“JavaScript : The Good Parts”
@see http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf
/** * Contacts * */
“contact” = {
“Twitter” : “@kenjuwagatsuma”,
“GitHub” : “https://github.com/KENJU”,
“Blog” : “https://medium.com/@kenjuwagatsuma”
}