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

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

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

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

Where do I start?

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

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(\"ids\")

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

Let's code together!

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“;
}
}

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

But!

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(){}
}

Docs and Tests?

DocTests
• tests
• docs

Coding JavaScript
sucks!?

Not anymore!

And every day less!

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

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

Code Folding

Template

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

Comment out

Macros

Code Analyzer
• syntax coloring
• knows 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 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/

Try it first (1)
d.query(\"h2\")
.style({color:\"red\"})
.anim({left:300}, 500)
Are you sure this works?
NO
d.query(\"h2\")
.style({position:\"absolute\", color:\"red\"})
.anim({left:300}, 500)
save one reload!

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

CSS + JS!?

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

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

Hands on

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

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

JS in Browser

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

Inspect the data

*.toJson()

*.toString()

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

Fix in Place

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

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

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, ...

IE8

debugger;
• programatic breakpoint
• set on the fly

debugger;

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

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

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

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