Bootstrap Native: Using Bootstrap Components without jQuery
Original Source: https://www.sitepoint.com/use-bootstrap-components-without-jquery/
Do you use Bootstrap’s JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project (Bootstrap Native), which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript.
Why use Bootstrap Native?
The motivations of such a port are mostly related to performance.
One benefit is the potential performance gain that can come from the superior execution speed of plain JavaScript over jQuery, as reported in many benchmarks.
Another performance advantage is the reduced page weight. Let’s make a quick comparison. All the numbers below refer to minified gzipped files and are expressed in KBs. bootstrap.js refers to the original Bootstrap scripts, bsn.js to the Bootstrap Native scripts, and jq to jQuery. Here we’re looking at the bundled files that gather together all the components, but it should be noted that both libraries have a modular structure that allows the loading of only the needed components and their dependencies.
Bootstrap.js:
jQuery 3.3.1 + Bootstrap.js = 30.0 + 12.9 = 42.9
jQuery 3.1.0 slim + bootstrap.js = 23.6 + 12.9 = 36.5
jQuery 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
jQuery 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0
Bootstrap Native JavaScript:
minifill + bsn.js = 2.4 + 7.8 = 10.2
polyfill.io(on chrome 54) + bsn.js = 1.1 + 7.8 = 8.9
polyfill.io(on IE 8) + bsn.js = 12.1 + 7.8 = 19.9
(The polyfill.io size for IE8 was taken from here. These polyfills are discussed in the next sections.)
So, with the Bootstrap components the size varies over the range 36.5 to 50.0 KB, while with Bootstrap Native the range shrinks to 8.9 to 19.9 KB.
Bootstrap Native Browser Support
Regarding browser support, it’s comparable to the original Bootstrap jQuery-based script. That is, it supports the latest browsers on the major mobile and desktop platforms and IE8+. This is accomplished by means of two polyfill strategies.
The first revolves around the use of the Polyfill.io service. All you have to do is insert the relative script tag in the document to get a set of polyfills tailored to each browser:
<script src=”https://cdn.polyfill.io/v2/polyfill.js”></script>
The service can be configured to customize its response based on the features really used on the site. See the Pollyfill.io documentation for details.
Alternatively, it’s possible to use minifill, a potentially lighter custom polyfill supplied by the project author itself.
Bootstrap Native Usage
The usage is similar to the original Bootstrap scripts, except we’ll remove jQuery, replace the Bootstrap scripts with the ones supplied by the Bootstrap Native project, and, if necessary, include the polyfills.
So, before the end </body> tag we include the script for the Bootstrap Native components:
[code language=”html”]
<script src=”https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/bootstrap-native-v4.min.js”></script>
[/code]
Other CDN URLs are available and listed on the Bootstrap Native documentation page. Alternatively, the file can be downloaded and served locally.
If the polyfills are needed, they should be included in the <head> tag:
[code language=”html”]
<script src=”text/javascript” src=”https://cdn.jsdelivr.net/gh/thednp/minifill@0.0.4/dist/minifill.min.js”> </script>
<!–[if IE]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<![endif]–>
[/code]
This snippet employs the minifill polyfill.
See the Bootstrap Native project documentation page for more detailed usage instructions.
A Port?
To be precise, it’s not a literal port that replicates all the features of the original scripts. The Bootstrap Native author deliberately chose to leave out some slight functionality, particularly lesser-used features, mainly for performance reasons and to simplify the development.
Let’s take a look at some of these issues.
The Custom Events
These are the events triggered by many Bootstrap components during their life cycle. For example, a Modal fires two events — one when it’s opened and the other when it’s closed. (Actually, two events are fired in each case, one before (‘show’) and the other (‘shown’) after the action.)
Similar events are employed by a Tab to notify its observers when there’s a tab switch: a hide event is dispatched for the current tab and a show event for the tab that has to be shown.
Bootstrap Native, instead, provides these events only for the Carousel and the Button. The original Carousel triggers a couple of custom events when there’s a transition between two slides. The first event, ‘slide’, is fired just before the transition begins, while the other one, ‘slid’, is fired after the transition has completed. The event object passed to the handlers has two properties that supply information about the transition, direction, and relatedTarget.
The following jQuery snippet illustrates:
[code language=”js”]
$carousel
.on(‘slide.bs.carousel’, function(e) {
var caption = $(e.relatedTarget).find(‘.carousel-caption’).text();
console.log(‘About to slide to the ‘ + e.direction + ‘ to slide ‘ + caption);
})
.on(‘slid.bs.carousel’, function(e) {
var caption = $(e.relatedTarget).find(‘.carousel-caption’).text();
console.log(‘Slid to the ‘ + e.direction + ‘ to slide ‘ + caption);
});
[/code]
Bootstrap Native supports both events, but the event object doesn’t have the direction and relatedTarget properties. We can translate the previous snippet into vanilla JS in this way:
[code language=”js”]
carousel.addEventListener(‘slide.bs.carousel’, function(e) {
console.log(‘About to slide’);
});
carousel.addEventListener(‘slid.bs.carousel’, function(e) {
console.log(‘Slid’);
});
[/code]
What about if we need the custom events for some other component? It’s not too difficult to implement them ourselves. We can refer to the Bootstrap Native Carousel code and use the CustomEvent API.
First create the event objects:
[code language=”js”]
if ((‘CustomEvent’ in window) && window.dispatchEvent) {
slid = new CustomEvent(“slid.bs.carousel”);
slide = new CustomEvent(“slide.bs.carousel”);
}
[/code]
When a slide transition is about to start, the ‘slide’ event is fired:
[code language=”js”]
if (slide) {
this.carousel.dispatchEvent(slide);
}
[/code]
And, finally, when the transition has finished, the ‘slid’ event is triggered:
[code language=”js”]
if (slid) {
self.carousel.dispatchEvent(slid);
}
[/code]
Based on this model, similar code can be easily added to other components.
The CustomEvent API is not readily available on every browser, but the aforementioned polyfills cover it.
Continue reading %Bootstrap Native: Using Bootstrap Components without jQuery%
Leave a Reply
Want to join the discussion?Feel free to contribute!