What's the problem with jQuery?
Please don't hate jQuery. It isn't a problem at all, every web developer loved once jQuery because it makes some painly tasks in the frontend pretty easy to achieve and it still reliable. Nowadays, a lot of developers use other frameworks like Angular, React or simply write Vanilla JS. The reason why, is that most of them don't need to support older versions of Browsers anymore:
 |
|
|
|
|
|---|---|---|---|---|
| Latest â | Latest â | 10+ â | Latest â | 6.1+ â |
And its possible to provide a wide range compatibility to any browser by writing your own JS code, so in most of the cases you won't need jQuery anymore. It's also pretty bad to include jQuery if you are only using 10% of it (thing that a lot of developers do). The latest version of jQuery is about 71.68 KB Gzipped, so it's a considerable size to your app if you care about the final size (with plugins and other stuff). To this size you need to count the Bootstrap JavaScript size too, about 30 KB.
So the problem with jQuery is about the size that you add to your application, because the one thing you need to know is, that you aren't better or less because you use jQuery, however you need to be wise and know when to include it.
What's the solution?
If you want to use the Boostrap Framework with all its JavaScript features like Dropdowns, Tabs etc without jQuery, you will need to use the open source library Bootstrap Native. Bootstrap Native is a library developed with Vanilla Javascript for both Bootstrap 3 and Bootstrap 4, featuring superior performance compared to the original jQuery Plugins. It is compatible with RequireJS/CommonJS. The biggest advantage of using Bootstrap Native will be the size of your project, because its only 20Kb minified and 6.5Kb gZipped.
We recommend you to visit the official repository of the library at Github to get more information about it.
How to use Bootstrap Native
bootstrap.native is UMD (Universal Module Definition) compatible. It will work correctly in CommonJS and AMD environments, but falls back to exporting to window in a normal <script> tag environment. The components are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE10 will thank you. The library comes with a custom polyfill you can use right away. As mentioned, you can use the Boostrap Native library with Boostrap 3.x or 4.x:
Boostrap 3.x
The following snippet shows how to use Bootstrap native in the version 3 of bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load the Boostrap CSS as you usually do from the CDN or a local copy -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Here your document markup -->
<!--
Instead of loading jquery.min.js and bootstrap.min.js
Load bootstrap.native from the CDN or a local copy of the library
-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"></script>
</body>
</html>Bootstrap 4.x
The following snippet shows how to use Bootstrap native in the version 4 of bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load the Boostrap CSS as you usually do from the CDN or a local copy -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<!-- Here your document markup -->
<!--
Instead of loading jquery.min.js and bootstrap.min.js
Load bootstrap.native 4 from the CDN or a local copy of the library
You won't need to load tether neither !
-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"></script>
</body>
</html>Happy coding !
