Efficient JavaScript Development
Upcoming SlideShare
Loading in...5
×
 

Efficient JavaScript Development

on

  • 4,999 views

The slides that belong to the talk I gave at the Ajax in Action 2008.

The slides that belong to the talk I gave at the Ajax in Action 2008.

Statistics

Views

Total Views
4,999
Views on SlideShare
4,938
Embed Views
61

Actions

Likes
1
Downloads
75
Comments
0

7 Embeds 61

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
http://www.uxebu.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Efficient JavaScript Development Efficient JavaScript Development Presentation Transcript

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