Efficient JavaScript
   Development
   tools, strategies, tips and tricks



        Wolfram Kriesing, uxebu
          wol...
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, d...
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/           ...
X
    A JA     Patterns
• solve your problem
• solve it again
• copy+paste
• you got a pattern
• abstract it
• reuse the p...
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) no...
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...
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 completi...
JSLint
  • finds IE traps (trailing comma)
  • gives JS insight (parseInt, ===, ...)
  • understand type coercion
  • find...
Try it first (1)
d.query(quot;h2quot;)
    .style({color:quot;redquot;})
    .anim({left:300}, 500)

               Are yo...
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.ht...
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...
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/javascri...
Debuggers
• FireBug (Firefox)
• IE8, developer tool bar
• Drosera (Webkit)
• Visual Studio Express (IE7 pur)
• pi.debugger...
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
Upcoming SlideShare
Loading in …5
×

Efficient JavaScript Development

3,135 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,135
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
77
Comments
0
Likes
2
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

×