Thursday, 1 December, 2016 UTC
Summary
Do you use Bootstrap's JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project, which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript.
Why?
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 refers 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 are 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:
- jq 3.1.0 + bootstrap.js = 34.5 + 11.2 = 45.7
- jq 3.1.0 slim + bootstrap.js = 27.2 + 11.2 = 38.4
- jq 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
- jq 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0
Native JavaScript for Bootstrap:
- 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 [38.4, 50.0] KB, while with Bootstrap Native the range shrinks to [8.9, 19.9] KB.
Browser Support
Regarding browser support, it is 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 is possible to use minifill, a potentially lighter custom polyfill supplied by the project author itself.
Continue reading %Quick Tip: Use Bootstrap Components without jQuery%