Organizing jQuery Projects Without OO

3,127 views

Published on

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

No Downloads
Views
Total views
3,127
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Organizing jQuery Projects Without OO

  1. 1. { Evented...
  2. 2. Why You Shouldn’t Write OO jQuery
  3. 3. Why You Shouldn’t Write OO jQuery Troll
  4. 4. Organization
  5. 5. Organization X
  6. 6. Code Reuse
  7. 7. We’re Used to It
  8. 8. Strategy
  9. 9. Widget
  10. 10. Widget
  11. 11. Widget
  12. 12. Widget function function function
  13. 13. Widget AjaxWidget
  14. 14. Widget AjaxWidget HistoryAjaxWidget
  15. 15. Widget AjaxWidget super HistoryAjaxWidget
  16. 16. Widget super AjaxWidget super HistoryAjaxWidget
  17. 17. Widget AjaxWidget
  18. 18. Widget Widget AjaxWidget HistoryWidget
  19. 19. Composability
  20. 20. X Composability
  21. 21. OO Code in JS is Crippled Evented Code
  22. 22. Instead of calling a method
  23. 23. { widget.activate();
  24. 24. User Code Widget
  25. 25. User Code 1:1 Widget
  26. 26. User Code 1:1 Sync Widget
  27. 27. Trigger an Event
  28. 28. } element.trigger("activate")
  29. 29. User Code Listener Listener Listener
  30. 30. Advantages
  31. 31. Familiar Model
  32. 32. { $("div").click(function() { }) // do stuff
  33. 33. Evented Code Fits More Cleanly with Requirements
  34. 34. “When the user picks an item from the autocompleter”
  35. 35. Real Example
  36. 36. Caveat: Simple Technique
  37. 37. I’ve Used This Technique on Large Projects
  38. 38. Tabs
  39. 39. div.ui-tabs
  40. 40. click keypress div.ui-tabs
  41. 41. click keypress div.ui-tabs tabactivate
  42. 42. click keypress div.ui-tabs tabactivate
  43. 43. click keypress div.ui-tabs tabactivate
  44. 44. a) open pane b) mark tab selected tabactivate default analogy: typing in text box triggers a change event
  45. 45. a) open pane b) mark tab selected tabactivate return false default
  46. 46. Tech in the Example
  47. 47. Arista Theme
  48. 48. Sass and Compass
  49. 49. (try to avoid using JS to set up layouts)
  50. 50. Staticmatic
  51. 51. jQuery BBQ (Ben Alman)
  52. 52. Demo

×