Efficient JavaScript Development

2,334 views

Published on

tools, strategies, tips and tricks

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

No Downloads
Views
Total views
2,334
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
31
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
  2. 2. 1. Writing Code 2. Running Code 3. Debugging Code 4. Fixing Code
  3. 3. Writing Code • coding style, conventions, etc. • editors • customize your editor • templates • code analyzer • try it first
  4. 4. Coding Style, etc. • less to think • all code looks the same • code not style • stay focused
  5. 5. Useful Editors What is „useful“? faster writing of code, auto completion, code analyzer, syntax check and coloring, dive in • komodo • aptana • eclipse • many others ...
  6. 6. Customize your editor • keyboard shortcuts • folding, bookmarking • make your editor do what you want!
  7. 7. Templates • no typos • for the whole team • docs built in • copy with pride http://www.activestate.com/Products/komodo_ide/edit_features.mhtml
  8. 8. Code analyzer • syntax coloring • knows the API of your library • understands your code • links code (dive in) • auto completion • JSLint built in
  9. 9. JSLint • finds IE traps (trailing comma) • gives JS insight (parseInt, ===, ...) • understand type coercion • finds missing var statements • undefined variables (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/
  10. 10. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500)
  11. 11. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500) Are you sure this works?
  12. 12. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500) Are you sure this works? • try the code in FireBug first • you learn more about your library • play with the code • maybe there is even a better way
  13. 13. Running Code • loading times, order, etc. • environments • ajax requests • inspect and fix
  14. 14. Loading the Code • syntax errors • any 404s • need a build
  15. 15. Watch the traffic • Charles • HTTP Live Headers • Fiddler • etc.
  16. 16. Environments • browsers • phones • air • widgets
  17. 17. AJAX Requests • FireBug reveals it all • watch out with XD requests •
  18. 18. Inspect and Fix • fix the DOM • fix the CSS • see inheritance chains • validate before trying
  19. 19. Debugging Code • debuggers • object inspection • other sources • isolating the problem
  20. 20. Debuggers • IE8, developer tool bar • FireBug • Drosera • Venkman • Microsoft Script Debugger • Visual Studio Express • pi.debugger, FireBug Lite, .... http://www.nczonline.net/blog/2008/03/22/falling-in-love-with-the-ie8-javascript-debugger/
  21. 21. debugger; • programatic breakpoint • set on the fly
  22. 22. Object inspection • console.log • console.dir
  23. 23. Other Sources • google your problem • talk to a colleague • sleep over it •
  24. 24. Fixing Code • trial and error • alert, console.log, etc. • in browser • tuning
  25. 25. Trial and Error • you know your code • you think you know it • you imagine you knew it • you think you should try • you fail
  26. 26. alert, console.log • alert, confirm • use numbered console.log •
  27. 27. *.toString() • see the source • missing function name (you know it) • parameters • fix it in place!
  28. 28. Tuning • console.time • console.timeEnd • console.trace
  29. 29. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com

×