Maintainable Javascript - HTML5 DevCon 2013
Javascript Maintainability - Nicholas Zackas
follow on twitter on: @slicknet
slides: slideshare.net/nzakas
Most of your time is spent maintaining code. Not new development.
Many of us are self taught. You have your own way of working.
But most of us work in teams
"Maintainable code works for 5 years without major changes"
What makes it so:
- intuitive (at surface level)
- understandable (when you dig deep)
- adaptable (can make small changes and not fall apart)
- extendable (can extend it easily)
- debuggable
- testable (has to be testable, otherwise people will be afraid to change it)
Be kind to your future self.
Considerations
1. Code style - if you don't have a guide then you should have one
Programs are meant to be read by humans and only incedentally computers
There are good js style guides out there such as: googles style guide, crockfords, jQuery core, dojo, idomatic.js
Checkout the latter
Comments:
- "there is no such thing as self documenting code" its a myth
- comments help withhigh level understanding
- comment every method
Avoid multiple statements on 1 line (confusing and also more likely to have merge conflicts)
Naming
- functioins begin with verb
- use logical names, don't have to be short
2. code should be broken down to be so simple its obviously right
3. Maintain separation of concerns
- keep javascript out of html
- keep HTML out of javascript
- keep individual css out of javascript e.g. element.style.cssText = "background-color: red; width: 250px;"
4. don't put code in the event handler method
- have the event object handler method call a method but don't pass the event object, extract and pass the params needed
5. Don't modify objects you don't own
- messes other people up
6. Avoid global functions and variables
7. throw your own errors (when you know a function will fail)
- by doing so you provide better error reporting
8. Avoid null comparisons
- its better to test for exactly for what you want
- if you expect an array then test for that
- use instanceOf to test for specific object types
9. Separate Configuration data
- configuration data is something which has a high liklihood of changing
- move config data into a separate config object or external json
- this include: urls, html created from js, strings displayed to user, settings, repeated unique values (e.g. css classname used alot)
Nicholas created props2js on github to convert
10. Automation
- as much as possible automatically check syle adherence
- use a build process to stuff like:
-- validate code
-- test code automatically
-- combine and minify
-- generate comments
jsdoc, yuidoc,
docco: puts comments side by side to code
jshint & jslint (jshint is less opinionated)
yui compressor BUT now many now use Uglify
grunt very popular (..keep an eye on it)
follow on twitter on: @slicknet
slides: slideshare.net/nzakas
Most of your time is spent maintaining code. Not new development.
Many of us are self taught. You have your own way of working.
But most of us work in teams
"Maintainable code works for 5 years without major changes"
What makes it so:
- intuitive (at surface level)
- understandable (when you dig deep)
- adaptable (can make small changes and not fall apart)
- extendable (can extend it easily)
- debuggable
- testable (has to be testable, otherwise people will be afraid to change it)
Be kind to your future self.
Considerations
1. Code style - if you don't have a guide then you should have one
Programs are meant to be read by humans and only incedentally computers
There are good js style guides out there such as: googles style guide, crockfords, jQuery core, dojo, idomatic.js
Checkout the latter
Comments:
- "there is no such thing as self documenting code" its a myth
- comments help withhigh level understanding
- comment every method
Avoid multiple statements on 1 line (confusing and also more likely to have merge conflicts)
Naming
- functioins begin with verb
- use logical names, don't have to be short
2. code should be broken down to be so simple its obviously right
3. Maintain separation of concerns
- keep javascript out of html
- keep HTML out of javascript
- keep individual css out of javascript e.g. element.style.cssText = "background-color: red; width: 250px;"
4. don't put code in the event handler method
- have the event object handler method call a method but don't pass the event object, extract and pass the params needed
5. Don't modify objects you don't own
- messes other people up
6. Avoid global functions and variables
7. throw your own errors (when you know a function will fail)
- by doing so you provide better error reporting
8. Avoid null comparisons
- its better to test for exactly for what you want
- if you expect an array then test for that
- use instanceOf to test for specific object types
9. Separate Configuration data
- configuration data is something which has a high liklihood of changing
- move config data into a separate config object or external json
- this include: urls, html created from js, strings displayed to user, settings, repeated unique values (e.g. css classname used alot)
Nicholas created props2js on github to convert
10. Automation
- as much as possible automatically check syle adherence
- use a build process to stuff like:
-- validate code
-- test code automatically
-- combine and minify
-- generate comments
jsdoc, yuidoc,
docco: puts comments side by side to code
jshint & jslint (jshint is less opinionated)
yui compressor BUT now many now use Uglify
grunt very popular (..keep an eye on it)
Comments
Post a Comment