jHERE deconstructed

Maps Made Easy

With jHERE, you can easily add interactive maps to your website. In only 5KB (2KB Gzipped), you get a powerful map API, highly customizable markers, event handling and info bubbles. Bonus features are KML support and data visualization via heatmaps.

You can find the documentation here and contribute to the project by forking it on Github.

Slides

Slides are available on Speaker Deck.

Handouts

Part 1: Write jQuery Plugins with TDD
What is Test Driven Development? How do you write mocks? What are spies? How do you run unit tests for JavaScript and in particular for jQuery plugins?
Part 2: Lazy load 3rd party deps and make plugin extensible
We are wrapping a 3rd party library, beacuse the API is really hard to use. Why should a developer bother to drop a script tag to load the 3rd party library, and take care of keeping it up to date? Can't we do it within our plugin instead? And how can we make the plugin extensible so we keep the code small and add functionalities as plugins for the plugin?
Part 3: Make it work with jQuery-like libs
We have a jQuery plugin that works pretty well, and it is easy to use. There are however some environments where you don't really want to use jQuery, for instance jQuery is not great when it comes to mobile devices. It isn't only a matter of bytes over the wire, it is also a matter of time it takes for the browser to parse the whole jQuery code. So, how can we make our plugin compatible with smaller/faster libraries?
(*) Document your plugin
Bonus section: documentation. How can we document our code so we can easily export some useful documentation for the developers that will use it?

miniHERE

miniHERE is a smaller version of jHERE: it is a jQuery plugin that wraps the HERE maps API and makes it easy to add maps to websites and programmatically change the zoom level of the map. It has a zoom bar and supports drag and mouse wheel for pan and zoom.

The source code is available on the jhere-resources repository. In there you'll find step by step guidance to building miniHERE with TDD, loading 3rd party dependencies via $.Deferred and creating a mini-website by taking advantage of the fantastic Docco.

You will need Node.js and npm to install everything that is needed to follow the tutorial. Phantom.JS is optional but nice to have.

Get in touch

You can get in touch with me on Twitter or just email me at .

Fork me on GitHub