jQuery vs Vanilla Javascript
What is jQuery and how it is different from Javascript?
jQuery is a Javascript library that is designed to help you write cross-compatible Javascript code that works in all browsers irrespective of browser incompatibilities.
In other words, you can write some jQuery and expect it to work in all the major browsers irrespective of how a particular Javascript feature behaves inside the individual browsers.
Most beginners in web development will start learning jQuery instead of vanilla Javascript because it makes it easy to get started with Javascript without much learning curve.
But underneath that facade, jQuery is just Javascript.
What is a Javascript library?
A Javascript library is just a collection of pre-written Javascript code that helps you worry less about the implementation details and browser compatibility issues.
Nothing more.
For example, here is the jQuery code for getting the height of an HTML element with a margin:
$(el).outerHeight(true);The above code works in most browsers including Internet Explorer.
But without jQuery, to achieve the same thing in Vanilla Javascript, you have to write the following code to get the same job done.
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
outerHeight(el);Credits: You Might Not Need jQuery
You don't have to understand the above code.
At least, you are not meant to as of now :D
But as you can see, it takes a lot more time and effort to code something in Vanilla Javascript.
The thing is, jQuery has a lot of pre-written code for the most common Javascript tasks that we come across in our day-to-day web development job.
And we can just use it to save some time and energy.
Got it but what is vanilla Javascript?
Good question!
What is vanilla Javascript?
Vanilla Javascript means pure Javascript that is written without the help of a Javascript library like jQuery.
That's all.
I understand, but why am I learning Vanilla JS instead of jQuery? jQuery looks much easier!
Hahaha...I can understand what you are thinking!
I have been there myself.
But...
Learning Vanilla Javascript is important
Learning jQuery is not bad but learning Vanilla Javascript will help you grow in your career.
Oh, how?
Most web development jobs today require you to have expertise with ReactJS, AngularJS, VueJS, etc.
But in order to start working with libraries like ReactJS, you should have the proper foundations of pure Javascript.
Your experience with jQuery doesn't help you with ReactJS or AngularJS in any way.
Not just that.
These days, Vanilla Javascript is becoming more powerful so that you don't have to use libraries like ReactJS or AngularJS.
So, learning Vanilla Javascript alone could help you land your dream job.
Web Components is one of the work-horses behind this slow yet steady transformation of vanilla Javascript.
Now, I can give you many reasons why you should learn vanilla Javascript, but let's see it in action so that you can realize it by yourself.
The Conclusion
You no longer have to worry about browser compatibility issues because most of the important features of Javascript are now supported by most browsers.
And the bottom line is website visitors don't care about all these things.
They just expect particular interactivity to work as expected, and we should deliver it if the user experience is important for a particular project.
Anyway, in the next lesson, we will talk about Code editors for Javascript development.
