tools, strategies, tips and tricks

1. Efficient JavaScript
Development
tools, strategies, tips and tricks
Wolfram Kriesing, uxebu
wolfram@uxebu.com

2. 1. Writing Code
2. Running Code
3. Debugging Code
4. Fixing Code

3. Writing Code
• coding style, conventions, etc.
• editors
• customize your editor
• templates
• code analyzer
• try it first

4. Coding Style, etc.
• less to think
• all code looks the same
• code not style
• stay focused

5. Useful Editors
What is „useful“?
faster writing of code, auto completion, code analyzer, syntax check
and coloring, dive in
• komodo
• aptana
• eclipse
• many others ...

6. Customize your editor
• keyboard shortcuts
• folding, bookmarking
• make your editor do what you want!

7. Templates
• no typos
• for the whole team
• docs built in
• copy with pride
http://www.activestate.com/Products/komodo_ide/edit_features.mhtml

8. Code analyzer
• syntax coloring
• knows the API of your library
• understands your code
• links code (dive in)
• auto completion
• JSLint built in

9. 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-output
http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/

10. Try it first
dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500)

11. Try it first
dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500)
Are you sure this works?

12. Try it first
dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500)
Are you sure this works?
• try the code in FireBug first
• you learn more about your library
• play with the code
• maybe there is even a better way

13. Running Code
• loading times, order, etc.
• environments
• ajax requests
• inspect and fix

14. Loading the Code
• syntax errors
• any 404s
• need a build

15. Watch the traffic
• Charles
• HTTP Live Headers
• Fiddler
• etc.

16. Environments
• browsers
• phones
• air
• widgets

17. AJAX Requests
• FireBug reveals it all
• watch out with XD requests
•

18. Inspect and Fix
• fix the DOM
• fix the CSS
• see inheritance chains
• validate before trying

19. Debugging Code
• debuggers
• object inspection
• other sources
• isolating the problem

20. 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/

21. debugger;
• programatic breakpoint
• set on the fly

22. Object inspection
• console.log
• console.dir

23. Other Sources
• google your problem
• talk to a colleague
• sleep over it
•

24. Fixing Code
• trial and error
• alert, console.log, etc.
• in browser
• tuning

25. Trial and Error
• you know your code
• you think you know it
• you imagine you knew it
• you think you should try
• you fail

26. alert, console.log
• alert, confirm
• use numbered console.log
•

27. *.toString()
• see the source
• missing function name (you know it)
• parameters
• fix it in place!

28. Tuning
• console.time
• console.timeEnd
• console.trace

29. thx
http://blog.uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.com