Organizing jQuery Projects Without OO

  • 2,605 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,605
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

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