Twitter's Bootstrap is a popular CSS & JavaScript library for rapid web-development, encompassing CSS and JavaScript. RequireJS is the new black for defining and loading JavaScript in web apps.
Bootstrap’s JavaScript components are written as jQuery plugins. Unfortunately, the jQuery plugin pattern isn’t compatible with the AMD pattern used in RequireJS.
Fear not, RequireJS has some tricks up it’s sleeve. We can still declaratively load Boostrap as long as we make sure jQuery is loaded first.
The Setup
This is our RequireJS setup file. Here you can read all about it.
// file: js/require-setup.js
//
// Declare this variable before loading RequireJS JavaScript library
// To config RequireJS after it’s loaded, pass the below object into require.config();
var require = {
shim : {
"bootstrap" : { "deps" :['jquery'] }
},
paths: {
"jquery" : "//code.jquery.com/jquery-2.1.1.min",
"bootstrap" : "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"
}
};
I’ll explain a few things about what’s going on above.
- jquery and bootstrap paths are created. These act as references for the libraries in RequireJS.
- We use a shim to load the bootstrap library. A shim automatically adds a wrapper around a JavaScript library that makes it AMD-compatible / RequireJS-friendly.
- jquery is declared as a dependency of bootstrap. Whenever we load boostrap, RequireJS makes sure *jQuery is loaded first
- jQuery 1.7 support AMD. No shim is required.
In researching RequireJS, you may have seen an export option in the configuration. This is not needed for Bootstrap 3. All code is executed in closures and added to jQuery as a plugin. There is nothing to export.
The Code
This is our simple JavaScript file, loading all the modules it needs and executing our code.
// File: /js/app.js
// 'jquery' returns the jQuery object into '$'
//
// 'bootstrap' does not return an object. Must appear at the end
require(['jquery', 'bootstrap'], function($){
// DOM ready
$(function(){
// Twitter Bootstrap 3 carousel plugin
$("#element").carousel();
});
});
We explicitly call jquery to load the jQuery library into $. We call bootstrap to add it’s plugins into jQuery.
Luckily for us RequireJS is very smart. Behind the scenes, it will only make one HTTP request for jQuery regardless of the times jquery is loaded directly or as a dependency.
The Markup
Finally here is what your HTML may look like
<html>
<head>
<script type="text/javascript" src="js/require-setup.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>Bootstrap</title>
</head>
<body>
<div id="carousel">...</div>
</body>
</html>
Don't Do This
Because we declared jquery as a dependency of bootstrap, you technically only need to reference boostrap to load jquery as well. I do not recommend this approach.
// NOT RECOMMENDED
require(['bootstrap'], function(){
// DOM ready
$(function(){
// Twitter Bootstrap 3 carousel plugin
$("#element").carousel();
});
});
That’s bad. A benefit of using RequireJS is explicitly seeing the dependencies that a page or module uses. So if we’re using jQuery we should explicitly load it’s library, scoped to within our module. Not rely on an undeclared window.jQuery.
We're All Done
Because Twitter's Bootsrap is standard a jQuery plugin, it's thankfully pretty straight-forward. I hope this helped shed some light on both RequireJS and Twitter's Bootstrap. Thanks for reading.
You may also want to read about loading individual Bootstrap 3 components.
The article was authored using Markdown for Sitecore.
