Stop using jQuery, you can do better without it.

Introduction

Probably you have already heard comments of this kind and most likely you feel quite at ease using jQuery. Then you ask yourself why there are such lunatics in the world who so hate such a beautiful and fluffy library and what the hell should I stop using it. You will probably be surprised to learn that the cause here is not at all in hatred. Let's understand the situation.



Like many other developers, I started using jQuery in the late Bronze Age (2007), when the differences between browsers were just a splinter in the heel and the lack of common standards was so hateful. jQuery was, in its own way, a source of inspiration and a ray of light in these dark times, it was revolutionary. I fell in love with jQuery as soon as I started using it. I wrote some bright and fluffy extensions for jQuery and I also wanted to share the good news with everyone and gave a presentation about it a couple of times and even organized a small training session to familiarize the teams with this product. But then, a few years ago, I changed my mind.
')
Let's take a closer look at what is wrong with the use of jQuery in modern web development and how we can fix it.

Uniform

One of JQuery’s stunning killer features was the ability to smooth and sometimes make up for differences in how DOM works in different browsers and in their versions. But let's face it, since then a lot of things have changed, a lot of modern standards have appeared. For the most part, jQuery at best redirects the call to the standard DOM API, and at worst uses its own implementation of a particular feature. In the modern world, you can do without the use of selectors and jQuery utilities. You can easily replace the selector type:

$('div, span, article'); $('#formId :invalid'); 

on:

 document.querySelectorAll('div, span, article'); document.querySelectorAll('#formId :invalid'); 

Well, or for example utility type:

 $.isArray(array1); $.each(array, function(i, v) { // do something here }); 

easily replaced with:

 Array.isArray(array1); array1.forEach(function(v, i) { // do something here } 

Personally, I prefer to always keep standards; jQuery is not a standard; it's just a library.

Object wrapper

As you probably know, jQuery, after almost all its manipulations, returns to you a special object in which a certain result or its absence is wrapped. For example * $ ('span') * will return such an object to you. Not only does the object wrapper have its own homegrown methods, different from the generally accepted standards, but it still does not guarantee that inside the jQuery methods it will use only wrappers. Far from it, what will * this * be in an event handler function or what will be the first argument of such a function or the value of its special field * target *? A small example:

 $('button').bind('click', function(e){ var el = this; // Is it jQuery "object" or not ? Let's see the doc var event = e; // Is it jQuery "object" ? No, it's a special event-wrapper object var target = event.target; // Is it jQuery "object" ? Sure not, it's a simple DOM element }); 

And so, sometimes a wrapper, sometimes not, and sometimes a special wrapper, what is it all about, why do we need to complicate our lives so much? But there is a crutch, you say, what about the convention when all the “special objects” of jQuery start with the $ sign. Sort of:

 $('button').bind('click', function(e){ var $el = $(this); var _event = e; // Let's use an another special convention for jQuery's events wrapper, prefix _ var $event = e; // No, we should be coherent var target = $(event.target); // I'm sorry I forgot the dollar, because I'm just a human var target2 = $(target); // Oups, but I have to be sure that it's wrapped var var1 = someFunc(); // I forgot, this function should return $ or simple NodeList $(var1); // Nevermind ... }); 

JQuery as a reference for web development

I have heard this opinion many times that jQuery is a kind of benchmark for web development, if you are doing this it means you just have to use jQuery to succeed, because it’s good, it has eggs and it has a lot of such fluffy and tube plug-ins. For me, this is all garbage, it was partly true 5 years ago, but not now. It is like saying that in order to develop modern Windows 8/10 applications you need to use the pure Win32 API.

As I said above, jQuery is just a library, and by today's standards a low-level library. And things of this kind are not suitable for writing modern web applications. Nothing prevents you from using jQuery or the pure DOM / API standard to implement a particular low-level task, but writing the entire application and then also maintaining it is very difficult. I saw a bunch of big projects that turned into one big dish of spaghetti on the client side, where jQuery was not the root of evil, people just could not cope with the influx of code.

How can this be avoided? Use more appropriate solutions for this where you really need them, be it MV * or something else.

Testing

This part is inextricably linked with the previous one. As we all know, a person is lazy by nature, and good automata programmers are often lazy. Have you ever tested code using jQuery, because of the call chains, this is not a trivial task. And if we take into account the fact that often projects using jQuery gain weight so quickly that developers do not have time, do not want or can not reorganize their code. The result is disappointing, as you can talk about testing when even the author of the code is unable to understand what this code is doing.

In the MV * approach, this is much easier to solve.

Total

If you are convinced by this article and you want to try to live and work without jQuery, you can use the following links:

• JQuery - Blog about how to get rid of jQuery
• Beyond jQuery - A book on how to get rid of jQuery
• The cost of frameworks - Thoughts on saving time for developers
• Zepto.js - A small jQuery-compatible library, a kind of transition from jQuery cocaine to Zepto weed.

Who cares there is an English version of this article .