1995 – what a year! Rapper Coolio releases his album “Gangsta’s Paradise”, Galileo satellite finally reaches the Jupiter orbit, “Golden Eye” and “Desperado movies” are on a silver screen, and Mr. Brendan Eich creates new programming language. That language was called Mocha at first, then LiveScript, and finally Javascript. There is a legend, telling that it took him only 10 days – there are also voices claiming that he had hangover all that time. Let’s make it clear, despite fact, that most of us in Idego are Python lovers, we are all aware of how powerful Javascript is and we don’t believe in this story. Although we’re agree on fact, that there are some mysteries in JS logic.
“1” == 1 // -> true“” == false // -> truetypeof NaN // -> “number”
Javascript has gone through a tough journey since 1995. Starting as a simple website scripting tool, JS developed, transformed, and changed a lot. Today it is one of the most famous programming languages. You might like it or not, but you can’t argue with the fact, that right now, Javascript is everywhere.
The blessing/curse of fame
When Javascript fame exploded, new libraries and frameworks started to pop like the mushrooms. Even the biggest companies in IT world like Google (Angular) or Facebook (React) has their own Javascript frameworks. The number of those is a bit overwhelming and finding yourself in it (especially when you starting your ride with Javascript) can be exhausting. But it’s not JS frameworks that we want to focus on. Decision about whether use them or not, should depend on the project that you’re working on. There is no need to reinvent the wheel if you want to create new car, but there is also no need to use bazooka, if you want to kill mosquito on the wall.
But there is one burning question, that is still dividing Javascript programmers all around the world, no matter if they’re experienced or not. The question is: “To jQuery or not to jQuery?”
“I don’t know how to help you, but use jQuery” – but what is jQuery?
jQuery itself is a library of pure Javascript methods. It is a collection of tools that lets its users build web applications in much easier and quicker way, comparing to JS syntax. It also addresses issues that were not taken care of by default by previous generations of browsers. You can see jQuery on many websites and plugins. One of the most popular front-end CSS framework “Bootstrap” needs jQuery to work.
Advantages of jQuery
But did how it all start? Why there was so much need for using libraries and to “be able to” work with Javascript? Well let us give you one example. Let’s assume that it’s 2010 and we want JS to return us height and width of some element. It’s also important that this code will work in any type of browser. In this Javascript syntax will be looking like:
var x, y;
if (self.innerHeight) {
x = self.innerWidth;
y = self.innerHeight;
} /* All except Internet Explorer */
else if (document.documentElement && document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight; } /* Explorer 6 Strict Mode */
else if (document.body) {
x = document.body.clientWidth; y = document.body.clientHeight;
} /* Other Explorers */And now let’s compare it to jQuery:
var x = $(window).width();
var y = $(window).height();It just speaks for itself.
One of the biggest issue for Javascript, back in the 2006, was compatibility with all browsers. Internet Explorer was a king of this market back in those days. Each browser was like a different app that needed its own testing. jQuery fixed that and made this all easy. All you needed to do was simply stick to jQuery functions and your code would work in all browsers. Release of this library, was like godsend for all front-end developers. Javascript syntax very quickly get in a shadow of his new child.
Native Javascript renesanse – is jQuery no longer needed?
Over past decade many things have changed. Browsers have become a lot more standardised, even Internet Explorer. This created a situation where main advantage of jQuery, wich was standardisation was not longer needed. But the real game-changer event was the release of the newest HTML5. Now, due to popluarity of HTML5 APIs, of which most require Javascript, there is a need to acknowledge native JS syntax – and actually use it. More and more jQuery lovers are moving back to native Javascript development these days. Let us get you through some of the Javascript methods and functions.
Selectors:
The true jQuery power lays in his Sizzle engine. It gives opportunity to find any element by its selector. For most of developers this is still main/only reason to choose jQuery. Javascript had no native className method for grabbing elements with classes which were the best for HTML/CSS development. Until now.
/* jQuery */ $('.someClass');
/* JavaScript */ document.getElementsByClassName('someClass');
The same goes with id selectors
/* jQuery */ $('#someID');
/* JavaScript */ document.getElementById('someID');We can also find element by its tag, with ‘getElementByTagName’
Class manipulation
Class manipulation is super easy in jQuery. In native syntax, just easy.
// jQuery $('div').addClass('someClass');
// JavaScript
var div = document.querySelector('div'); div.classList.add('someClass');Removing class, same as above.
// jQuery $('div').removeClass('someClass');
// JavaScript
var div = document.querySelector('div'); div.classList.remove('someClass');The same goes with toggle class.
Attributes actions.
In jQuery, the naming convention isn’t as precise as native. It’s also much shorter.
/* jQuery */ $('.someClass').attr('disabled', true);
/* JavaScript */ document.querySelector('.myClass').setAttribute('disabled', true);That was adding attributes. How about removing them.
/* jQuery */ $('.someClass').removeAttr('disabled');
/* JavaScript */ document.querySelector('.someClass').removeAttribute('disabled');If we want print the attribute’s value in the console, this is what we need to do:
/* jQuery */ console.log($('.someClass').attr('title'));
/* JavaScript */ console.log(document.querySelector('.someClass').getAttribute('title'));
CSS manipulation
Well, CSS is definitely nicer in JQuery, but native Javascript’s has very similar implementation and its worth knowing:
/* jQuery */ $(myelement).css({ "background" : "#EEE", "color" : "#FFF"
});
/* JavaScript */
var elem = document.querySelector(myelement); elem.style.background = '#EEE';
elem.style.color = '#FFF';There are a lot more examples that we could mention here, but you probably get our idea by now.
So now what?
Should we drop jQuery? In our company some of us are using this library in many of our web projects. All we wanted to point, is that for many developers jQuery was kind of solution or a cure for all JS demons, and there will be no other alternative ever. There are many jQuery developers without any understanding of native Javascript (this is of course bad approach, we don’t recommend it). After all JQ is only substitute of JS, so there is nothing that you could not achieve with it’s native syntax.
Embrace new technologies. Future is here, and future is native.
Andrzej Kopera • Sep 05
