Efficient JavaScript Developmenttools, strategies, tips and tricks

Wolfram Kriesing, uxebuwolfram@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

!

Efficient how?

• in the team - NS, docs, CS, ..

• fixing code - debugger, firebug

Erklären WO Effizienz zum Tragen kommt!

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): item_ids = request.POST.list("ids")

code

Patterns

• solve your problem

• solve it again

• copy+paste•

• you got a pattern

• abstract it

• reuse the pattern

AJAX

Let's code together!

for (var i=0; i<s.length; i++)if (i%2) 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“; }}

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; i<s.length; i++) node.innerHTML = i%2 ? „is even“ : „is odd“;

Coding Style, etc.

• less to think

• all code looks the same

• do code, don‘t style

• stay focused

But!

d.declare(obj, null, {func1:function(){}

});

var obj = {};obj.func1 = function(){}

var obj = new Object();Object.prototype.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.comhttp://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?

d.query("h2") .style({position:"absolute", color:"red"}) .anim({left:300}, 500)

NO

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!ctrl+a, ctrl+e, up, down, tab, shift+tab, but not ctrl+r

• console.log("See this %s", var, obj, array)

• monitorEvents($("id"))

http://getfirebug.com/console.htmlhttp://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, uxebuwolfram@uxebu.com

http://twitter.com/uxebu