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
Tweet

More Decks by Massimiliano Marcon

Other Decks in Programming

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None