#Thinking beyond JavaScript frameworks
A question on StackOverflow talked about how to add two numbers in JavaScript. The best answer talked about using jQuery to do that and another even mentioned using some jQuery plugin for basic arithmetic!
Although this question was a parody and a bit exaggerated, the point that it tries to make is quite clear- good old JavaScript is being forgotten as people try to go for the painless option! The situation is so bad (and overhyped) that people ask questions such as Do I need to know JavaScript in order to learn jQuery on public forums like Quora.
##Why did it happen? Back in the mid 2000s, when jQuery was emerging, it gave people an easy way to perform certain actions on JavaScript. For instance, AJAX was a complicated process with different declarations of the XmlHttpRequest to support different browsers. DOM manipulation was difficult. jQuery provided one line solutions to all of them. In addition to that, the use of jQuery ensured all browsers were supported. Even if there was a catch of the file size, everyone jumped at the very idea of using jQuery. Inevitably, it got popular. Over the years, many new frameworks like AngularJS and BackboneJS have risen to fame.
##The problem with frameworks The very first issue that I see is the size of the includes. You can argue that number of HTTP requests outweigh the size of the JavaScript includes, custom builds of frameworks like jQuery and Bootstrap allow you to keep only those functionalities that you require or you could use Google’s CDN. However, at the end of the day, with a slow internet connection (common to developing countries), your site will take considerable time to load.
These frameworks are not new languages in themselves. This essentially means that if you use one line of these frameworks, their equivalent commands are executed in the background. Therefore, if you are using thousands of operations in your code, it’s always a good idea to go back to just JavaScript. A comparison of jQuery’s each vs JavaScript’s for loop shows that the foor loop is almost 14 times faster!
It gets worse. Let’s say you you have worked with jQuery for a few years but never bothered to check how it works in the background. You apply for the job of a front end engineer and then realize that the questions being asked are totally different to what you know!
Another issue with the knowledge of just frameworks is functionality. Suppose you require to perform a certain action that your framework doesn’t support. What would you do?
##The concept of VanillaJS Since modern web developers have cultivated an obsession for JavaScript frameworks, the concept of VanillaJS came into being. You can choose the functionalities you need and get a custom build, but no matter what you choose, it will download an empty file.
The emphasis here is on the fact that framework less JavaScript has a lot of built in capabilities and above all, it comes built in with all browsers! Sometimes, using a framework just for the sake of it becomes unnecessary!
In the last decade, JavaScript has undergone many changes and all modern browsers support new versions of JavaScript. Hence, it has become easier to perform tasks that took a relatively bigger effort a few years back. Let’s revisit the two biggest drawbacks that we talked about earlier.
###AJAX
The old way.
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = false;
}
}
}
Today, just writing the following works (of course, the old IE versions are not supported)!
request = new XMLHttpRequest();
###DOM Manipulations Getting children-
var children = element.children;
Iterating through a loop-
var children = element.children;
Array.prototype.forEach.call(children, function(child, i){
//do something
});
Finding certain elements in the page-
var items = document.querySelectorAll('.selector');
Getting inner HTML or text content-
var text = element.textContent;
var innerHTML = element.innerHTML;
var outerHTML = element.outerHTML;
In case you are interested, here’s an exhaustive round-up of JavaScript equivalents of jQuery.
##Frameworks aren’t that bad either This post doesn’t try to prove that frameworks are evil. Don’t get me wrong, in large projects, it’s the numerous JavaScript frameworks that do the heavy lifting, saving hundreds or thousands of man hours. However, you must keep in mind that you must not solely depend on the frameworks to get your job done, especially when there’s a native way of doing it. In addition to that, if you are developing a plugin yourself, you must think twice before keeping some other framework as a dependency. It's not about dumping the frameworks, but you should not rely on them for every single project!
If this post got you thinking, I suggest you go through Mozilla’s article, A re-introduction to JavaScript, for those who know JavaScript already, or at least they think they do.