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.

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

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