Efficient JavaScript Development

2,866
-1

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,866
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Efficient JavaScript Development

  1. 1. Efficient JavaScript Development tools, strategies, tips and tricks Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu
  2. 2. Efficient what ? • efficient code • writing code • fixing code • optimizing code
  3. 3. Efficient that ! • efficient code • writing code • fixing code • optimizing code
  4. 4. Erklären WO Effizienz zum Tragen kommt! Efficient how? • in the team - NS, docs, CS, .. • fixing code - debugger, firebug
  5. 5. Where do I start?
  6. 6. Use Namespaces! • globals suck • objects as namespace • easy mapping • directory structure comes by itself
  7. 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. 8. X A JA Patterns • solve your problem • solve it again • copy+paste • you got a pattern • abstract it • reuse the pattern
  9. 9. Let's code together!
  10. 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. 11. Coding Style, etc. • less to think • all code looks the same • do code, don‘t style • stay focused
  12. 12. But!
  13. 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. 14. Docs and Tests?
  15. 15. DocTests • tests • docs
  16. 16. Coding JavaScript sucks!?
  17. 17. Not anymore!
  18. 18. And every day less!
  19. 19. Useful Editors • komodo • aptana • eclipse • netbeans • many others ...
  20. 20. Customize your Editor • keyboard shortcuts • folding, bookmarking • make your editor do what you want!
  21. 21. Code Folding
  22. 22. Template
  23. 23. Templates • faster • no typos • for the whole team • docs built in • copy with pride
  24. 24. Comment out
  25. 25. Macros
  26. 26. Code Analyzer • syntax coloring • knows API of your library • understands your code • links code (dive in) • auto completion • JSLint built in
  27. 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. 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. 29. Try it first (2) • try the code in FireBug first • learn more about your library • play with the code • find better ways?
  30. 30. CSS + JS!?
  31. 31. Inspect and Fix • fix the DOM • fix the CSS • see inheritance chains • validate before trying
  32. 32. ReCSS • bookmarklet • reload your CSS • no ctrl+r • stay in context http://turtle.dojotoolkit.org/~david/recss.html
  33. 33. Hands on
  34. 34. In Browser • firebug • IE8 dev tool bar • webkit drosera • opera dragonfly • chrome tools
  35. 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. 36. JS in Browser
  37. 37. alert, console.log • alert hell? use confirm! • numbered console.log
  38. 38. Inspect the data
  39. 39. *.toJson()
  40. 40. *.toString()
  41. 41. *.toString() • function source • function parameters • even console.log.toString()
  42. 42. Fix in Place
  43. 43. Stacktrace http://eriwen.com/javascript/js-stack-trace/
  44. 44. Stacktrace • new Error().stack • arguments.callee • getStackTrace() • console.trace()? http://eriwen.com/javascript/js-stack-trace/
  45. 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. 46. IE8
  47. 47. debugger; • programatic breakpoint • set on the fly
  48. 48. debugger;
  49. 49. Watch the Traffic • Charles • HTTP Live Headers • Fiddler • etc.
  50. 50. Ajax Requests • FireBug reveals it all • watch out with XD requests
  51. 51. Other sources • google your problem • talk to a colleague • sleep over it
  52. 52. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×