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

18. Widget
AjaxWidget

19. Widget Widget
AjaxWidget HistoryWidget

20. Composability

21. X
Composability

22. OO Code in JS
is Crippled
Evented Code

23. Instead of
calling a
method

24. {
widget.activate();

25. User Code
Widget

26. User Code
1:1
Widget

27. User Code
1:1 Sync
Widget

28. Trigger an
Event

29. }
element.trigger("activate")

30. User Code
Listener Listener Listener

31. Advantages

32. Familiar Model

33. {
$("div").click(function() {
})
// do stuff

34. Evented Code
Fits More
Cleanly with
Requirements

35. “When the user
picks an item
from the
autocompleter”

36. Real Example

37. Caveat: Simple
Technique

38. I’ve Used This
Technique on
Large Projects

39. Tabs

41. div.ui-tabs

42. click keypress
div.ui-tabs

43. click keypress
div.ui-tabs
tabactivate

44. click keypress
div.ui-tabs
tabactivate

45. click keypress
div.ui-tabs
tabactivate

46. a) open pane
b) mark tab selected
tabactivate
default
analogy: typing in text box
triggers a change event

47. a) open pane
b) mark tab selected
tabactivate
return false
default

48. Tech in the
Example

49. Arista Theme

50. Sass and
Compass

51. (try to avoid
using JS to set
up layouts)

52. Staticmatic

53. jQuery BBQ
(Ben Alman)

54. Demo