JS Application Dev
-
10 Commandments

Xavier Cambar
Hull.io
@xcambar
http://github.com/xcambar

1

Thou shalt not use globals

Never. Seriously!

You will:
  • Avoid security breaches
  • Gain reusability
If you need configuration, use XHR or data-* attributes

2

Thou shalt have a build process

Benefits are numerous:

  • Testing
  • Static analysis
  • Minification
  • Reporting

3

Thou shalt polyfill

i.e. provide missing native facilities

  • Don't write your own implementation
  • Reduce amount of engine-specific code
  • Surprisingly, polyfills may perform better than natives

4

Thou shalt not generate
client-side code on the server

If you generate
  • Functions: start over!
  • Component configuration: go back to Commandment 1

5

Thou shalt name your functions

  • Eases profiling
  • Teaches functional programming (Think reusable)
  • One exception allowed: in your testing tools

6

Thou shalt not use ==

Use === instead. Always.

Don't forget that:
  • 0 == '0' and 0 == '' BUT '' != '0'
  • == does not test operands, it tests coerced operands
  • === tests
    • Equality of value on primitive types (String, Number, Boolean)
    • Strict equality (same pointers) for anything else

7

Thou shalt differentiate
'', 0, undefined, null, false

 

  • Mostly a corollary of Commandment 6
  • They have very different semantic meanings

8

Thou shalt beware and know your scope

for (var i = 0; i < 20; i++) {
    var rand = Math.random()*1000;
    var duration = parseInt(rand);
    setTimeout(function logTheCrazyVar() {
        console.log(i);
    }, duration);
}
for (var i = 0; i < 10; i++) {
var duration = parseInt(Math.random()*1000);
setTimeout(function () {
i -= parseInt(Math.random()*10);
}, duration);
}
console.log('i:', i, 'duration:', duration);

9

Thou shalt use events or callbacks whenever you can

 

  • Makes your code more portable
  • Avoids variable leaking

10

Thou shalt spread the MDN joy

 

  • Contains detailed documentation
  • Provides fast, valid polyfills
  • https://developer.mozilla.org/fr/

+

GIMME MOOAAAR!

Thanks dudes!

http://xcambar.github.com/parisjs_22