Creating Mapping Applications with the ArcGIS API for JavaScript and Dojo Bootstrap

When the design team doesn’t do Dijit*

Recently, our design team delivered a functional HTML wireframe that was developed with Twitter Bootstrap. Ordinarily that would not be a problem, but the application we’re working on is based on the ArcGIS API for JavaScript and as such relies entirely on Dojo. The developers wanted to be able to leverage as much of the designers work as we could without having to include jQuery – a dependency of Bootstrap’s JavaScript components. A little digging around lead me to Kevin Andre’s Dojo Bootstrap project – a pure Dojo implementation of Twitter Bootstrap. We were able to successfully use Dojo Bootstrap in our ArcGIS API for JavaScript based mapping application. This enabled us to leverage the declarative mark up and styles already written by the designers without adding a jQuery dependency.

Just in time for the 2013 Esri International Developer Summit, I’ve created a simple application that demonstrates how to incorporate Dojo Bootstrap with the ArcGIS API for JavaScript:

Not just for mapping apps

We had no problems incorporating other, non-mapping Dojo components such as dGrid and DojoX Charting widgets into our application. Although we didn’t use the built in UI components under dijit/layout and dijit/form, we still used Dijit’s base classes and mixins to create our own custom templated widgets.**

Dojo, the good parts

When I read about Dojo Bootstrap, I was very excited because one aspect of Dojo development that I’ve always had trouble working with was the Dijit UI framework. Don’t get me wrong, Dojo is a fine toolkit for JavaScript development, and it provides important features for developing rich JavaScript applications such as a promise API, AMD module loading, client-side internationalization, etc. However, to me, the built in layout, form, and other UI components (or Dijits) always seemed very heavy, impossible to style or theme, and to have an overly complicated life cycle that can be confusing to beginners. To me it feels like me of having to do ASP.Net WebForms development after years of doing ASP.Net MVC or WebPages development. Yuck. I understand that Dijit was developed long before lightweight UI frameworks that are popular today like Twitter Bootstrap, and I’m sure at the time it’s implementation was a perfectly reasonable way of creating a consistent look and feel across browsers (including IE6) while supporting advanced features like modularity and internationalization in the browser. That said, it’s long overdue for a refresh to take advantage of the CSS3 and HTML5 features offered in modern browsers.

Until then, thanks to the work of Kevin Andre and other contributors, Dojo developers have the choice of using a Twitter Bootstrap UI without the jQuery dependency.

* And really, can you blame them?

** UPDATE: At 2.0, Dojo Bootstrap will be implemented as Dijit widgets.