Efficient JavaScript Development

tools, strategies, tips and tricks

Wolfram Kriesing, uxebuwolfram@uxebu.com

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

thx

http://blog.uxebu.com

Wolfram Kriesing, uxebuwolfram@uxebu.com