Efficient JavaScript Development

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 Efﬁzienz 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(quot;idsquot;)

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

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(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!

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(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

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

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

http://blog.uxebu.com	28
http://uxebu.com	16
http://www.slideshare.net	12
http://hub.uxebu.com	2
http://192.168.10.100	1
http://www.onlydoo.com	1

Efficient JavaScript Development

by wolframkriesing

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 60

Statistics

Efficient JavaScript Development Presentation Transcript