Your SlideShare is downloading. ×
0
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Efficient JavaScript Development

2,745

Published on

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.

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×