jQuery was created in a far away 2006. At the time it was a huge time saver for many developers. Solving a lot of nasty crossbrowser issues, jQuery was a de-facto library in every new project.
Today browsers become smarter every day and the need of jQuery slowly fading. Many people tell it’s a good time to throw the library away claiming there is no place for jQuery in our modern world.
I think different and the article is about to tell you why.
jQuery costs size
I divide all the web page files in four categories:
- Critical content — the first 100vh of the website (Must be delivered ASAP. E.g. the first screen on our awesome https://phoenix-startup.com💜)
- Main content — all the text, styles, pictures, videos user has come to see.
- Scripts — all your animations, forms submission and other pretty interactions. User possibly will use any of them.
- Other — ads, analytics, tracking. User doesn’t need any of it.
A typical website or webapp scripts (logic) is the 3rd category files. This means user will need it after getting all the html, css and maybe some pictures. Let me explain it a bit: after getting the page user will spend some time watching your content (text, pictues) decising what to do, where to click or where to scroll. That means plus 187ms* of background work doesn’t make any sense.And, yeah. You can’t promise your jQuery-less code will perform much faster 😉
As a bonus a GUI tool to create your own build of jQuery: http://projects.jga.me/jquery-builder/
And the last but not the least. Try to fix your main loading speed and performance issues before starting to blame jQuery. Have a look on Google Chrome Dev Tools metrics, discover your server ping, optimize images (and automate it), kill unnecessary libraries etc.
Bad For Newbies
Many people say it’s a bad decision to start learning web development craft with jQuery. They say beginners would not understand the stuff deep enough.
My position is opposite. I’m sure it’s a-w-e-s-o-m-e to reach cool results (well, any results!) fast at the beginning. It highly motivates you and gives a faith to complete learning.
It’s obvious for me that after becoming a bit stronger one will definitely dig deeper and learn everything he needs about web api and all the other cool JavaScript things.
Reinventing the Wheel
Yes it’s possible to create all the things from scratch. Simply don’t forget to:
- Make it perfect like John Resig done.
- Keep an eye on updating your stuff.
- Think about dependency injection and modular loading.
- Crossbrowser compatibility https://twitter.com/jeresig/status/590199945174634497
- Make it chainable.
- Teach it every new team member.
Many of jQuery’s functionality has already been redone in http://youmightnotneedjquery.com offering sweet vanilla snippets. Like this:
jQuery
$(el).fadeIn();
Vanilla JavaScript (IE10+)
el.classList.add('show');el.classList.remove('hide');
.show { transition: opacity 400ms;}.hide { opacity: 0;}
But if you give it a tiny think you will notice than jQuery’s .fadeIn() is far more complicated and flexible:
- It not simply increases opacity to 1, it displays an element with a proper display: {value};
- It offers callbacking. The vanilla variant should have used something like this.
- It offers chaining.
Please don’t be blind and choose carefully.
Chaining
One can’t do something like this:
Vanilla JavaScript
let body = document.querySelector(‘body’);
body.classList.add(‘state-success’).classList.remove(‘state-error’);
// TypeError: body.classList.add(...) is undefined
Personally I adore jQuery for providing an ability to chain my code out of the box:
jQuery
let form = $('#js-form'); //get the form
form.removeClass('state-error') //remove red color.addClass('state-success') //add green color.find('.js-success-message-text') //get the success text.fadeIn() //show the success text.end() //get the form again.find('.js-error-message-text') //get the error text.fadeOut() //hide the error text
Plugins
During the last 10 years jQuery community has grown really big. And so does the jQuery plugins list: https://plugins.jquery.comYou will find a huge collection of nice ready-to-use plugins there.
Conclusion
jQuery did an incredible epic work in the past. But things do change. Today JavaScript rises tremendously fast and Babel makes all those features accessible right now, most browsers tend to update itself immediately, wasm is coming, AI invades the world…
Nevertheless, ol’ good jQuery is still usable and really helpful in some cases. It’s too early to bury the library.
Think.
* It will take about 47ms to download jQuery 2.1.1 (28.87KB gzipped) on average mobile networks (5Mbps) and 140 ms to initiate jQuery 2.1.1 on Chrome 50 LG Nexus 5.