{   Evented...
Why You
Shouldn’t Write
  OO jQuery
Why You
Shouldn’t Write
  OO jQuery
        Troll
Organization
Organization

    X
Code Reuse
We’re Used to It
Strategy
Widget
Widget
Widget
Widget
function function function
Widget


AjaxWidget
Widget


   AjaxWidget


HistoryAjaxWidget
Widget


   AjaxWidget
                    super


HistoryAjaxWidget
Widget
                super


   AjaxWidget
                        super


HistoryAjaxWidget
Widget


AjaxWidget
Widget         Widget


AjaxWidget   HistoryWidget
Composability
X
Composability
OO Code in JS
 is Crippled
Evented Code
Instead of
 calling a
 method
{
widget.activate();
User Code




 Widget
User Code

1:1

 Widget
User Code

1:1   Sync

 Widget
Trigger an
   Event
}
element.trigger("activate")
User Code




Listener    Listener   Listener
Advantages
Familiar Model
{
$("div").click(function() {

})
   // do stuff
Evented Code
  Fits More
 Cleanly with
Requirements
“When the user
 picks an item
   from the
autocompleter”
Real Example
Caveat: Simple
  Technique
I’ve Used This
Technique on
Large Projects
Tabs
div.ui-tabs
click       keypress


    div.ui-tabs
click       keypress


    div.ui-tabs


   tabactivate
click       keypress


    div.ui-tabs


   tabactivate
click       keypress


    div.ui-tabs


   tabactivate
a) open pane
      b) mark tab selected

           tabactivate


             default

analogy: typing in text box
trigge...
a) open pane
b) mark tab selected
      tabactivate

     return false

       default
Tech in the
 Example
Arista Theme
Sass and
Compass
(try to avoid
using JS to set
  up layouts)
Staticmatic
jQuery BBQ
(Ben Alman)
Demo
Organizing jQuery Projects Without OO
Organizing jQuery Projects Without OO
Upcoming SlideShare
Loading in...5
×

Organizing jQuery Projects Without OO

2,718

Published on

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

No Downloads
Views
Total Views
2,718
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×