Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

8,128 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
  • Be the first to comment

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

×