Upgrade to Pro — share decks privately, control downloads, hide ads and more …

So you wanna make a jQuery plugin… jHERE deconstructed.

So you wanna make a jQuery plugin… jHERE deconstructed.

Out there on the Internet web developers can find a big universe of jQuery plugins for any need you can think of. Do you need a tooltip? There’s a plugin for that. Do you need to handle cookies? There’s a plugin for that. Do you want a map in your website? You are in luck, there’s jHERE for that!
Why do people create all these plugins? Mostly because they need a reusable component that can be easily be included into their web apps. So they build it, and then they are nice enough to make it available to everybody.
A few months back I created jHERE, with the goal of providing a super simple API for something usually complicated: maps. With jHERE you can create maps, markers, info bubbles, heatmaps and even render KMLs with one line of code.
To make life easier for the users, jHERE is however quite a complex jQuery plugin. First of all it depends on a 3rd-party API (HERE Maps) that is lazy-loaded when the plugin is first instantiated. Additionally it was built to work not only with jQuery, but with other jQuery-compatible APIs as well, e.g. Zepto.js and Tire.js. Finally, jHERE is extensible. In order to save bytes, only a small set of simple functionalities is included in the core. More advanced features can be added by writing extensions.
This talk is about the journey from the first prototype of jHERE to the final, polished version of the plugin. I will start with the basics of writing a jQuery plugin, I will dive into leveraging Promises/Deferreds when 3rd-party libraries are required for the plugin to work, and I will show how to write the minimum amount of code that is essential to guarantee compatibility with other jQuery-like libraries. Then I will go into extensibility and talk about a way to support plugins for a plugin. And finally, how can you make sure a piece of code maintains the right behavior after you make changes and across releases? You can’t, unless you write tests for it, so we’ll have a look at unit testing for jQuery plugins.
I promise you will see quite some code but also pretty slides.

Notes, info and useful links here:

Massimiliano Marcon

May 15, 2013

More Decks by Massimiliano Marcon

Other Decks in Programming