Using Bootstrap Map? You Might Not Need jQuery…

I’ve been working with Allan Laframboise to add examples of how to use Esri’s popular Bootstrap Map framework without a dependency on jQuery. The Dojo-Bootstrap library, a Dojo port of the Twitter Bootstrap JavaScript modules, finally has a release candidate that is compatible with Bootstrap 3.x. This enabled us to replace the references to the Bootstrap JavaScript with references to the Dojo-Bootstrap modules and completely remove the reference to jQuery.

Bootstrap Map: Now with Dojo-Bootstrap
Now you can choose whether you’d like to get started using Bootstrap with jQuery or Dojo.

You can try out the new Dojo examples live at:

Lessen the Load

Because the new demos no longer load jQuery and because all of the dependencies of the Dojo-Bootstrap library (such as dojo/query, dojo/on, etc) are already included in ArcGIS API for JavaScript build, there is less overhead on initial page load. I’ve noticed a roughly 27% reduction in the total number and size of resources requested on the initial page load by the Dojo demo pages when compared to their jQuery counterparts.

Not So Different After All

One of the nice things about using Dojo-Bootstrap is that the HTML markup and CSS styles are exactly the same as you would use if you were using the jQuery-based Bootstrap modules. If you compare the jQuery and Dojo-Bootstrap versions of any demo, the only differences you’ll see are in the script tags, mainly replacing $() w/ query() in a few lines.

Opportunities for Optimization

Because Dojo-Bootstrap supports AMD, there are further opportunities for optimization using a custom build. The demos load unbuilt Dojo-Bootsrap modules from a CDN. Alternatively, you could download these modules and include them in your project in order to make a custom build. This would be particularly useful in applications that are expected to be used on a mobile device, where bandwidth is a limiting limiting factor.

Which Version is Right for Me?

Use the jQuery demos and templates as your starting point if…

  • You are just incorporating an Esri map into an existing jQuery/Bootstrap application
  • Your application uses other libraries that depend on jQuery (i.e. Backbone)

Use the Dojo demos and templates as your starting point if…

  • You are building an Esri map centric application from scratch
  • You just need an easy way to make an Esri map application responsive
  • You want to add a few UI components such as dropdowns, tabs, and modals to your Esri map application that will be easy to use/style (i.e. not Dijit)
  • You are going to do a custom Dojo build to optimize your app, especially for mobile

Regardless of which you choose, you should definitely consider using Bootstrap Map as your starting point when building a responsive mapping application.