• Save
Extensible jQuery Plugin Development
Upcoming SlideShare
Loading in...5
×
 

Extensible jQuery Plugin Development

on

  • 4,486 views

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 ...

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.

Statistics

Views

Total Views
4,486
Views on SlideShare
4,123
Embed Views
363

Actions

Likes
0
Downloads
0
Comments
0

7 Embeds 363

https://app.codegrid.net 282
http://lanyrd.com 65
https://staging-codegrid.herokuapp.com 9
http://coderwall.com 4
https://twitter.com 1
http://localhost 1
http://eventsp2.wordpress.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Extensible jQuery Plugin Development Presentation Transcript

  • Extensible Plugin Development Shane Riley (@shaneriley) Hashrocket
  • Plugins!
  • Plugins!Not just for slideshows and autocompletes View slide
  • Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuse View slide
  • 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 optionsPortability between projects
  • Plugins!Not just for slideshows and autocompletesAbstract repetitive code for reuseAllow customization with optionsPortability between projectsEasier to test
  • 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 keep track of all elements with plugin called on them for this purpose
  • 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
  • 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 binding to acontext
  • 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 and store standalone plugin instances
  • New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate and store standalone plugin instancesPlugin namespaced
  • New Development PatternCreated internal plugin object to containdefaults and methodsAbility to call methods directlyCreate and store standalone plugin instancesPlugin namespacedTeardown method
  • 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-freeOverriding options, callbacks, methods mucheasier
  • Recommended ReadingjQuery Plugins are Broken: http://vurl.me/TPUTBuilding Stateful jQuery Plugins: http://vurl.me/TPUUjQuery Plugin Patterns: http://vurl.me/TPUY
  • Twitter: @shanerileyGitHub: shanerileyWeb: shaneriley.comThis Presentation: http://vurl.me/TTUZ