This document discusses various tools and techniques for efficiently developing JavaScript code, including using namespaces to organize code, abstracting patterns into reusable components, leveraging code editors for formatting and linting, debugging interactively in the browser, and monitoring network traffic. Some specific recommendations are to use Firebug for debugging, JSLint for linting, and templating for code consistency.

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

2. Efficient what ?
• efficient code
• writing code
• fixing code
• optimizing code

3. Efficient that !
• efficient code
• writing code
• fixing code
• optimizing code

4. Erklären WO Effizienz
zum Tragen kommt!
Efficient how?
• in the team - NS, docs, CS, ..
• fixing code - debugger, firebug

5. Where do I start?

6. Use Namespaces!
• globals suck
• objects as namespace
• easy mapping
• directory structure comes by itself

7. Use Namespaces!
shop.page.cart.getItems() javascript
http://shop.de/api/cart/items/ URL
(r'^cart/items/$', views.cart.get_items), mapper
def get_items(request): code
item_ids = request.POST.list(quot;idsquot;)

8. X
A JA Patterns
• solve your problem
• solve it again
• copy+paste
• you got a pattern
• abstract it
• reuse the pattern

9. Let's code together!

10. for (var i=0; i<s.length; i++)
node.innerHTML = i%2 ? „is even“ : „is odd“;
for (var i=0; i<s.length; i++)
if (i%2) node.innerHTML = „is even“
else node.innerHTML = „is odd“;
for (var i=0; i<s.length; i++)
if (i%2==0)
node.innerHTML = „is even“;
else
node.innerHTML = „is odd“;
for (var i=0, len=s.length; i<len; i++){
if (i%2){
node.innerHTML = „is even“;
} else {
node.innerHTML = „is odd“;
}
}

11. Coding Style, etc.
• less to think
• all code looks the same
• do code, don‘t style
• stay focused

12. But!

13. var obj = {};
obj.func1 = function(){}
var obj = new Object();
Object.prototype.func1 = function(){}
d.declare(obj, null, {
func1:function(){}
});
var obj = new function(){
arguments.callee.prototype.func1 = function(){}
}

14. Docs and Tests?

15. DocTests
• tests
• docs

16. Coding JavaScript
sucks!?

17. Not anymore!

18. And every day less!

19. Useful Editors
• komodo
• aptana
• eclipse
• netbeans
• many others ...

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

21. Code Folding

22. Template

23. Templates
• faster
• no typos
• for the whole team
• docs built in
• copy with pride

24. Comment out

25. Macros

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

27. JSLint
• finds IE traps (trailing comma)
• gives JS insight (parseInt, ===, ...)
• understand type coercion
• finds missing var statements
• undefined vars, typos (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/

28. Try it first (1)
d.query(quot;h2quot;)
.style({color:quot;redquot;})
.anim({left:300}, 500)
Are you sure this works?
NO
d.query(quot;h2quot;)
.style({position:quot;absolutequot;, color:quot;redquot;})
.anim({left:300}, 500)
save one reload!

29. Try it first (2)
• try the code in FireBug first
• learn more about your library
• play with the code
• find better ways?

30. CSS + JS!?

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

32. ReCSS
• bookmarklet
• reload your CSS
• no ctrl+r
• stay in context
http://turtle.dojotoolkit.org/~david/recss.html

33. Hands on

34. In Browser
• firebug
• IE8 dev tool bar
• webkit drosera
• opera dragonfly
• chrome tools

35. Firebug
• has keyboard shortcuts! but not ctrl+r
ctrl+a, ctrl+e, up, down, tab, shift+tab,
• console.log(quot;See this %squot;, var, obj, array)
• monitorEvents($(quot;idquot;))
http://getfirebug.com/console.html
http://getfirebug.com/commandline.html
http://getfirebug.com/keyboard.html

36. JS in Browser

37. alert, console.log
• alert hell? use confirm!
• numbered console.log

38. Inspect the data

39. *.toJson()

40. *.toString()

41. *.toString()
• function source
• function parameters
• even console.log.toString()

42. Fix in Place

43. Stacktrace
http://eriwen.com/javascript/js-stack-trace/

44. Stacktrace
• new Error().stack
• arguments.callee
• getStackTrace()
• console.trace()?
http://eriwen.com/javascript/js-stack-trace/

45. Debuggers
• FireBug (Firefox)
• IE8, developer tool bar
• Drosera (Webkit)
• Visual Studio Express (IE7 pur)
• pi.debugger, FireBug Lite, ....
• Venkman
• Microsoft Script Debugger (IE6)
• Eclipse, Netbeans, ...

46. IE8

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

48. debugger;

49. Watch the Traffic
• Charles
• HTTP Live Headers
• Fiddler
• etc.

50. Ajax Requests
• FireBug reveals it all
• watch out with XD requests

51. Other sources
• google your problem
• talk to a colleague
• sleep over it

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