Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Efficient JavaScript Development

2,397 views

Published on

tools, strategies, tips and tricks

Published in: Technology, Business
  • Be the first to comment

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

×