Sharing Top Content from the Angular-sphere.

Bootstrap Native: Using Bootstrap Components without jQuery — SitePoint

  • 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.
  • 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: – – script CDN URLs are available and listed on the Bootstrap Native documentation page.
  • Other Differences – If we perform a side-by-side comparison of the components, it’s clear how Bootstrap Native is not a literal port, and in some cases removes functionality, while in others it adds something new.
  • In Bootstrap, we need to use some jQuery code to modify the value hardcoded in the = 2000; – Bootstrap Native, on the other hand, exposes a data-duration attribute on the component root element and so the process is easier: – – div id=”carousel” class=”carousel slide” data-ride=”carousel” data-interval=”false” data-duration=”2000″ -…

Giulio Mainardi introduces the Native JavaScript for Bootstrap project (Bootstrap Native), which provides vanilla JavaScript Bootstrap components.

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:

Bootstrap Native: Using Bootstrap Components without jQuery — SitePoint