Using dojo classes





Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014


Using dojo classes

Posted on .

This is part one in a … five? Let’s go with five. Five-part series wherein I talk about how I built a simple app that uses the Instagram API.

In this post, I’m going to focus on the classes I used to build the app. There are only two:  bearpanther.InstagramSearch and bearpanther.BingGeocode. Hopefully the name of each conveys their purpose.

Why (and how) did I decide to build these classes? Well, here’s the thing…I first built the app as a good old single file, spaghetti code app. It started as a simple idea. And then I kept adding stuff. And more stuff. When I ended up with more than a few hundred lines of JavaScript, I decided that it was an unmaintainable mess. So, with the hope that I would be able to look at the code in six months and actually know what it does, I decided to refactor some of the functionality out to a couple of classes. (If you need a primer of this style of JavaScript class, take a look at the Classy JavaScript with dojo.declare tutorial over on They do a better job than I ever could at explaining how to create a class with dojo.) Oh, and there’s also that whole code-reusability thing too. I guess I’ve got that going for me…

Where was I, oh yeah– classes. In both cases, a class is created to talk to some API.

The instagram class has two main methods:  search_by_loc and search_by_tag. Each takes one argument and returns a deferred. You might notice that those methods use esri.request. This is a helper method in the ArcGIS API for JavaScript library. (If you’re wanting to use this class with dojo but not the ArcGIS API for JavaScript, substitute for esri.request and it will do the same thing.)

The bing geocode class does basically the same thing. Its find_location method takes a location (an address, place name, zip code, etc., basically anything you can enter in and expect to be sent to a location) and returns potential locations as lat, long coordinates using a deferred.

I mentioned that these classes return a deferred. You might be saying to yourself, “what the hell is a deferred?” Well, a deferred is a handle to the result of some asynchronous task. Say what? What I mean is, it’s a way of being notified when some task (of which you have no idea how long it will take) finishes. This is easier to explain with a simple example– like a call to some remote web service :).

In this app’s case, I want to search Instagram’s database of photos. Using a deferred basically let’s me say “get some photos from instagram and give me a heads up when they return”. Oh, and since it’s asynchronous, it doesn’t stop the app from doing other things while the search happens (in other words, it doesn’t lock up your browser). This way, the app can just show a loading icon while it waits for the goods from instagram. The bing class works the same way– while bing does it’s thing and converts a place into lat, long coordinates, the app continues to be responsive.

There’s a bit more going on under the covers to integrate the classes into the app:  you need to set up a baseUrl as well as a module path so that dojo knows where to find the classes once they’re referenced. Again, I’ll leave it to the dojo documentation for those things.

So there you have it, the two classes I used to build my instagram search app.


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (2) ...