my-code-sucks
my code sucks...
how to become a better (JavaScript) developerStefan Stölzle
Sr. Solutions Engineer, Asia Pacific Sencha Inc.
Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
Damaian Conway
Examples
'' == '0'; // false 0 == ''; // true 0 == '0'; // true false == 'false'; // false false == '0'; // true false == undefined; // false false == null; // false null == undefined; // true ' \t\r\n ' == 0; // true// TODO
function foo (x) {
if (x == 1) {
console.log('%s + 5 = %s', x, (x + 5));
} else {
console.log('NaN');
}
}
foo(1);
foo('1');
// => 1 + 5 = 6 // => '1' + 5 = 15
foo(true); foo(false);
// => true + 5 = 6 // => NaN
foo([]); foo([1]);
// => NaN // => Array[1] + 5 = 15
foo({});
foo({bar: 1});
// => NaN // => NaN// TODO
function foo (x) {
if (x === 1) {
console.log('%s + 5 = %s', x, (x + 5));
} else {
console.log('NaN');
}
}
foo(1);
foo('1');
// => 1 + 5 = 6 // => NaN
foo(true); foo(false);
// => NaN // => NaN
foo([]); foo([1]);
// => NaN // => NaN
foo({});
foo({bar: 1});
// => NaN // => NaN// TODO
for (var i = 1; i <= 20000; i++) {
$('.loremipsum').html(i);
$('.loremipsum').width(parseInt(i / 20000 * 100, 10) + '%');
}
// $('.loremipsum') is called 40,000 (= 2 * 20,000) times
// TODO
var loremipsum = $('.loremipsum'),
num = 20000,
i;
for (i = 1; num >= i; i++) {
loremipsum.html(i);
loremipsum.width(parseInt(i / num * 100, 10) + '%');
}
// $('.loremipsum') is called one time only
// TODO
Code Style Guides
// TODOTools
// TODOJSLint
The JavaScript Code Quality Tool
- Pros
- developed & maintained by Douglas Crockford
- "out of the box"
- Cons
- no configuration options
- limited rules
- undocumented
- developed & maintained by Douglas Crockford
JSHint
A JavaScript Code Quality Tool
- Cons
- 2 sets of rulesenforcing vs relaxing
- no custom rules
- no code style support
JSCS
JavaScript Code Style checker
- Cons
- very slow
- no potential bug detection
- only code style
ESLint
Pluggable JavaScript linter
- Pros
- potential bug detection and code style checks
- extensible w/ rules and plugins
- many plugins available ESLint Working with Plugins e.g. ESLint Ext JS plugin
- configuration file my .eslintrc
- very good ES6 support
- custom reporters
- broad IDE supportJetBrains, Visual Studio, SublimeText, Atom.io, etc.
- Cons
- configuration required
- slow
- d on't
- r epeat
- y ourself
- k eep
- i t
- s tupid and
- s imple
Q & A
stefan.stoelzle.me/my-code-sucksThank YOU
1