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

Like this? Share it with your network

Share

Efficient JavaScript Development

on

  • 5,058 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
5,058
Views on SlideShare
4,997
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 Presentation Transcript

  • 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