efficient javascript development
DESCRIPTION
tools, strategies, tips and tricksTRANSCRIPT
Efficient JavaScript Development
tools, strategies, tips and tricks
Wolfram Kriesing, [email protected]
1. Writing Code2. Running Code3. Debugging Code4. Fixing Code
Writing Code
• coding style, conventions, etc.
• editors
• customize your editor
• templates
• code analyzer
• try it first
Coding Style, etc.
• less to think
• all code looks the same
• code not style
• stay focused
Useful Editors
• komodo
• aptana
• eclipse
• many others ...
What is „useful“?faster writing of code, auto completion, code analyzer, syntax check
and coloring, dive in
Customize your editor
• keyboard shortcuts
• folding, bookmarking
• make your editor do what you want!
Templates
• no typos
• for the whole team
• docs built in
• copy with pride
http://www.activestate.com/Products/komodo_ide/edit_features.mhtml
Code analyzer
• syntax coloring
• knows the API of your library
• understands your code
• links code (dive in)
• auto completion
• JSLint built in
JSLint
• finds IE traps (trailing comma)
• gives JS insight (parseInt, ===, ...)
• understand type coercion
• finds missing var statements
• undefined variables (myVar vs. myvar)http://jslint.com
http://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-outputhttp://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/
Try it firstdojo.query("h1").style({color:"red"}).anim({left:300}, 500)
Try it firstdojo.query("h1").style({color:"red"}).anim({left:300}, 500)
Are you sure this works?
Try it first
• try the code in FireBug first
• you learn more about your library
• play with the code
• maybe there is even a better way
dojo.query("h1").style({color:"red"}).anim({left:300}, 500)
Are you sure this works?
Running Code
• loading times, order, etc.
• environments
• ajax requests
• inspect and fix
Loading the Code
• syntax errors
• any 404s
• need a build
Watch the traffic
• Charles
• HTTP Live Headers
• Fiddler
• etc.
Environments
• browsers
• phones
• air
• widgets
AJAX Requests
• FireBug reveals it all
• watch out with XD requests
•
Inspect and Fix
• fix the DOM
• fix the CSS
• see inheritance chains
• validate before trying
Debugging Code
• debuggers
• object inspection
• other sources
• isolating the problem
Debuggers• IE8, developer tool bar
• FireBug
• Drosera
• Venkman
• Microsoft Script Debugger
• Visual Studio Express
• pi.debugger, FireBug Lite, ....
http://www.nczonline.net/blog/2008/03/22/falling-in-love-with-the-ie8-javascript-debugger/
debugger;
• programatic breakpoint
• set on the fly
Object inspection
• console.log
• console.dir
Other Sources
• google your problem
• talk to a colleague
• sleep over it
•
Fixing Code
• trial and error
• alert, console.log, etc.
• in browser
• tuning
Trial and Error
• you know your code
• you think you know it
• you imagine you knew it
• you think you should try
• you fail
alert, console.log
• alert, confirm
• use numbered console.log
•
*.toString()
• see the source
• missing function name (you know it)
• parameters
• fix it in place!
Tuning
• console.time
• console.timeEnd
• console.trace