Part 1: Write jQuery Plugins with TDD

Notes

jHERE was born almost 2 years ago – it was still called jOVI back then. I built the very first version of it before I interviewed for a job at Nokia. I had a phone call with a recruiter that offered me the opportunity to work at Nokia Maps in Berlin. The job seemed interesting, so before they called me for the technical interviews I did my homeworks, looked at the product they were building, the public APIs they had, etc.

I was already familiar with Google Maps, and I was trying to familiarize myself with the Ovi maps API. The 2 APIs had lots of similarities, but they had one in particular, which is a commonality of many maps APIs out there: they were damn hard to use and remember.

Therefore, as an exercise I implemented a simple jQuery wrapper to make things easy.

This is how the plugin was born. Since then it changed a lot, and so did my way of working.

In October/November 2012 at Nokia we were working very hard to launch a new brand, HERE.com: I decided it was a good occasion to revamp jOVI and I made jHERE.

Every night for a couple of weeks I would go home and work on jHERE. Then I made a pretty website. So far 25K people have seen it, and in general developers seem to like it. I personally love it, jHERE is so simple I can prototype complex location or map apps in minutes.

"jHERE deconstructed" follows the journey from the initial idea to the current version of jHERE. I am not saying this is the only way you should be making jQuery plugins, it is just my way. However there are perhaps some concepts, ideas and tools that can be useful for you if you ever decide to build plugins for jQuery.

To follow this journey we will look step by step at miniHERE. We will first setup a boilerplate that can be used as the base for any jQuery plugin.

Then we'll have a look at test driven development, mock objects and spies. We will use Jasmine to setup our tests, establish our expectations, make the tests fail and then write the code that makes them pass.

You can follow this step by step tutorial by looking at the Github repository (start with the README file).

Tools

Resources