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 of background work .And, yeah. You can’t promise your jQuery-less code will perform much faster 😉 187ms* doesn’t make any sense 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 enough. deep My position is opposite. I’m sure it’s a-w-e-s-o-m-e to reach cool results (well, results!) fast at the beginning. It highly motivates you and gives a faith to complete learning. any 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. don’t forget to: Simply 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 offering sweet vanilla snippets. Like this: http://youmightnotneedjquery.com 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 an element with a proper display: {value}; displays 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 do something like this: can’t 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. //get the form again.find('.js-error-message-text') //get the error text.fadeOut() //hide the error text end() Plugins During the last 10 years jQuery community has grown really big. And so does the jQuery plugins list: You will find a collection of nice ready-to-use plugins there. https://plugins.jquery.com huge 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 early to bury the library. too 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.
