Jquery and javascript
back

Your free e-book!

See when it is not worth using Scrum.
"Why Scrum Doesn't Work" Download

To jQuery or not to jQuery? Magical world of Javascript

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 // -> true
typeof 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.

Software Engineers - development team

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.


cto - Chris Gibas

Free 30-minute consultation with our CTO

Chris Gibas - our CTO will be happy to discuss your project! Let's talk!

More blog posts
Outsourcing — where is the best place to find a solid contract developer?

Idego

Substantive support - Oleksandra Bilokrys

Outsourcing — where is the best place to find a solid contract developer?

Stepping into the world of blockchain is not easy. Being a blockchain developer requires a unique set of skills. Talented and experienced Solidity developers are not easy to find, and they are quite expensive. Do you want to start applying a system of smart contracts within your company? Allow us to explain who the Solidity contract developer is and how […]

Why is it worth hiring a blockchain developer remotely?

In recent years, blockchain and cryptocurrency have gained a lot of attention. As it turns out, this technology has enormous business potential and there are already many companies all over the world that decided to adopt it for their various operations. Yet, even though blockchain’s popularity is growing fast, there are still only a few blockchain developers experienced enough to […]

Why is it worth hiring a blockchain developer remotely?

Idego

Substantive support - Oleksandra Bilokrys

Machine learning and Python — why is it a good combination?

Idego

Substantive support - Oleksandra Bilokrys

Machine learning and Python — why is it a good combination?

In the world of business that becomes more and more data-driven, it is important to stay updated on the topic of the most popular technologies. The group of languages that are most often used for machine learning includes Python. But, is it a good choice for those interested in implementing ML-based solutions in their companies? Machine learning-based systems already partially […]

What do you need to know about the UX design process?

Application design is not only about how an app looks, but also how it works. The total satisfaction from using an app, software, or website is called user experience (UX). A properly designed UX is very important for the brand’s success, especially if the company is functioning mostly on the Internet, like in e-commerce or entertainment applications. Learn how the […]

What do you need to know about the UX design process?

Idego

Substantive support - Oleksandra Bilokrys

Get a free estimation

Need a successful project?