Extensible Plugin Development      Shane Riley (@shaneriley)             Hashrocket
Plugins!
Plugins!Not just for slideshows and autocompletes
Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuse
Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with options
Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with optionsPortabi...
Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with optionsPortabi...
Anatomy of a Pluginhttp://docs.jquery.com/Plugins/Authoring
Got an Itch to Scratch?
There’s a Plugin for That!
Put the Plugin to Use
Put the Plugin to Use
Put the Plugin to Use
Put the Plugin to Use
Put the Plugin to Use
Oh Noes!http://www.cutestpaw.com/images/oh-noes/
Rebind Your Plugin
Modify Plugin
What About Updating?
Changing Options After the Fact
Changing Options After the Fact Difficult to change options once initialized
Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events
Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to k...
Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to k...
Proposed Improvements
Proposed ImprovementsProvide a plugin name as object property
Proposed ImprovementsProvide a plugin name as object propertyNamespace event bindings
Proposed ImprovementsProvide a plugin name as object propertyNamespace event bindingsOptionally live binding event or bind...
Where to Start?http://docs.jquery.com/Plugins/Authoring#Events
Store Methods in Plugin Object
Add Ability to Call Method
Initialize Plugin
Let’s Start Rewriting
Create Plugin Object
Move Event to Object Method
Create Initializer Method
Why Call the Method?
Initialize the Plugin
Create Unique Plugin Instance
Store Instance and Initialize
Override the Toggle Method
Override Original Method
Wait, what about our new option?
Add an anim_method Default
Change Method Name
Other Optimizations
Create a Tear-down Method
Add Live Binding and ContextsOptions:Binding:
Bind Event to Parent Element
Bringing it all together
New Development Pattern
New Development PatternCreated internal plugin object to containdefaults and methods
New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directly
New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate...
New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate...
New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate...
Benefits to This Method
Benefits to This MethodCan write your own overrides to suit yourindividual needs
Benefits to This MethodCan write your own overrides to suit yourindividual needsUpgrading to new plugin version is worry-free
Benefits to This MethodCan write your own overrides to suit yourindividual needsUpgrading to new plugin version is worry-fr...
Recommended ReadingjQuery Plugins are Broken: http://vurl.me/TPUTBuilding Stateful jQuery Plugins: http://vurl.me/TPUUjQue...
Twitter: @shanerileyGitHub: shanerileyWeb: shaneriley.comThis Presentation: http://vurl.me/TTUZ
Upcoming SlideShare
Loading in …5
×

Extensible jQuery Plugin Development

7,847 views

Published on

Have you ever had to exclude an element from a collection so you could run a plugin method with two different sets of arguments? Have you ever had to modify someone else's (or maybe your own) plugin for a specific use case and felt dirty for doing so? When dealing with plugins, do you frequently think to yourself there's got to be a better way to develop plugins? You're not alone. Shane Riley, the front-end development lead at Hashrocket, is tired of modifying plugins to suit a particular need and fearing the modified plugin will be overwritten by future Shane when he realizes there is a new version out. To that end, he set out to change the way he, and hopefully others, develop plugins to eliminate this worry and hassle and returned with a solution that's not only super-extensible at the plugin level, it's also completely customizable at the element level once the plugin has been initialized. Intended for those who have experience writing and/or modifying plugins, Shane will walk through the process he now uses in his own plugin development to ensure that if the plugin doesn't exactly suit your use case, you can make it easily and without having to change the core code of the plugin.

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

No Downloads
Views
Total views
7,847
On SlideShare
0
From Embeds
0
Number of Embeds
817
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Typical plugin:\nAttach initializing function as method to $.fn\nTake options object as argument\nExtend defaults with passed in options\nRun plugin code on each element in collection\n
  • Our client would like an accordion effect on their blog for the rest of the post content.\n
  • The plugin development community is huge, and there is always more than one plugin for what you’re looking for.\n
  • Contrived example of plugin. Note that many options you’d normally see in jQuery UI accordion are omitted for brevity.\n
  • Extend defaults with options\n
  • Return collection for chainability\n
  • Cache jQuery object for click trigger and work from there\n
  • Initialize plugin event by calling with no options\n
  • Requirements change, and the animation method needs to change once a user has clicked on an anchor. This falls outside of what the plugin is capable of, and will require modifying the plugin to achieve.\n
  • To do this, you would unbind the click event and reinitialize the plugin with the new option, but you’ll need to add the option to the plugin as well.\n
  • In the plugin, add anim_method and use that property to call the appropriate method when animating.\n
  • If plugin needs to be updated, changes need to be retrofitted. A pull request could be submitted (if using Git), but not guaranteed it will be introduced into master.\n
  • \n
  • \n
  • \n
  • \n
  • Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
  • Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
  • Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
  • \n
  • This method of plugin development employs a local object to store the plugin methods. Reposition - update will be attached to events in this case.\n
  • If a string matching a method name is passed in, the method is called with the jQuery collection as the context. This allows you to refer to this in your methods as the jQuery collection. All other arguments to the tooltip method are passed through.\n
  • Init method binds the events related to the plugin.\n
  • \n
  • Abstract the defaults to object properties on the parent accordion object. Added name property to represent the plugin name.\n
  • Toggle callback for the click event is placed in method.\n
  • Init method used to bind toggle method to click handler. Note event is namespaced to match plugin name. Toggle method is called within an anonymous function in order to provide the ability to rewrite the toggle method after the event is bound.\n
  • If method is changed after initialization, we’re calling the new method instead of the pointer to the old one. This eliminates having to unbind and rebind events when the callback method changes.\n
  • Plugin name is derived from name property on our accordion object. Much easier to change plugin name this way if conflicts arise.\nFirst condition provides ability to call methods by name on an element collection.\n\n
  • Second condition will run plugin initialization. Separate copy of plugin created for encapsulation, each element added as a property on its parent object.\n
  • Data object written to store standalone instance for access outside plugin.\nInit called.\n
  • This is what our method override will now look like.\n
  • To override the toggle method at this point, accordion object is read and the toggle method is overridden.\n
  • What about our animation method option? Let’s add that back in.\n
  • Create a default property on the accordion object in the plugin.\n
  • The override method is now no longer needed, as we can override the animation method being called from outside the plugin.\n
  • \n
  • In our plugin example, this will unbind all namespaced methods and remove any data stored under the plugin name on the elements.\n
  • We can also add live binding and a context option to reduce the number of event bindings.\nIf context is set, event is bound to the context rather than each element individually.\nOtherwise event is live bound.\n
  • To bind to a parent element with a class of details, in our initializer we pass the context property.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Why you should consider writing your own plugins\nHow to use jQuery UI’s widget factory to aid in plugin development\nAddy Osmani and Zeno Rocha’s repo with recommended jQuery plugin patterns\n
  • \n
  • Extensible jQuery Plugin Development

    1. 1. Extensible Plugin Development Shane Riley (@shaneriley) Hashrocket
    2. 2. Plugins!
    3. 3. Plugins!Not just for slideshows and autocompletes
    4. 4. Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuse
    5. 5. Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with options
    6. 6. Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with optionsPortability between projects
    7. 7. Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with optionsPortability between projectsEasier to test
    8. 8. Anatomy of a Pluginhttp://docs.jquery.com/Plugins/Authoring
    9. 9. Got an Itch to Scratch?
    10. 10. There’s a Plugin for That!
    11. 11. Put the Plugin to Use
    12. 12. Put the Plugin to Use
    13. 13. Put the Plugin to Use
    14. 14. Put the Plugin to Use
    15. 15. Put the Plugin to Use
    16. 16. Oh Noes!http://www.cutestpaw.com/images/oh-noes/
    17. 17. Rebind Your Plugin
    18. 18. Modify Plugin
    19. 19. What About Updating?
    20. 20. Changing Options After the Fact
    21. 21. Changing Options After the Fact Difficult to change options once initialized
    22. 22. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events
    23. 23. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to keep track of all elements with plugin called on them for this purpose
    24. 24. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to keep track of all elements with plugin called on them for this purpose Difficult or impossible to unbind only those events
    25. 25. Proposed Improvements
    26. 26. Proposed ImprovementsProvide a plugin name as object property
    27. 27. Proposed ImprovementsProvide a plugin name as object propertyNamespace event bindings
    28. 28. Proposed ImprovementsProvide a plugin name as object propertyNamespace event bindingsOptionally live binding event or binding to acontext
    29. 29. Where to Start?http://docs.jquery.com/Plugins/Authoring#Events
    30. 30. Store Methods in Plugin Object
    31. 31. Add Ability to Call Method
    32. 32. Initialize Plugin
    33. 33. Let’s Start Rewriting
    34. 34. Create Plugin Object
    35. 35. Move Event to Object Method
    36. 36. Create Initializer Method
    37. 37. Why Call the Method?
    38. 38. Initialize the Plugin
    39. 39. Create Unique Plugin Instance
    40. 40. Store Instance and Initialize
    41. 41. Override the Toggle Method
    42. 42. Override Original Method
    43. 43. Wait, what about our new option?
    44. 44. Add an anim_method Default
    45. 45. Change Method Name
    46. 46. Other Optimizations
    47. 47. Create a Tear-down Method
    48. 48. Add Live Binding and ContextsOptions:Binding:
    49. 49. Bind Event to Parent Element
    50. 50. Bringing it all together
    51. 51. New Development Pattern
    52. 52. New Development PatternCreated internal plugin object to containdefaults and methods
    53. 53. New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directly
    54. 54. New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate and store standalone plugin instances
    55. 55. New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate and store standalone plugin instancesPlugin namespaced
    56. 56. New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate and store standalone plugin instancesPlugin namespacedTeardown method
    57. 57. Benefits to This Method
    58. 58. Benefits to This MethodCan write your own overrides to suit yourindividual needs
    59. 59. Benefits to This MethodCan write your own overrides to suit yourindividual needsUpgrading to new plugin version is worry-free
    60. 60. Benefits to This MethodCan write your own overrides to suit yourindividual needsUpgrading to new plugin version is worry-freeOverriding options, callbacks, methods mucheasier
    61. 61. Recommended ReadingjQuery Plugins are Broken: http://vurl.me/TPUTBuilding Stateful jQuery Plugins: http://vurl.me/TPUUjQuery Plugin Patterns: http://vurl.me/TPUY
    62. 62. Twitter: @shanerileyGitHub: shanerileyWeb: shaneriley.comThis Presentation: http://vurl.me/TTUZ

    ×