Front-end roadmap 2017 — No jQuery please
In one of our latest Roadmap meetings with the Front-end developers at Aviva Solutions we decided we would like to challenge and discuss using jQuery in new projects. We want to have less dependencies, faster Time To First Byte (TTFB) and more effectively using our development stack with Webpack, ES6, Sass and Browsersync.
But wait.. ‘no jQuery please’?! Yes, we want to reduce the usage of jQuery this year. A lot of frameworks, tools and plugins have jQuery as dependency so we have to slowly phase out jQuery.
jQuery is needed for this project because the syntax and abstraction layer is useful for cross-browser support
Yes, you’re right. But you can work without jQuery. You should train yourself to make sure you always know which code in jQuery is used. It’s a common mistake - made by every front-end developer — to use a library without reading, research and reviewing this library. It’s very important to know what you’re using. Like: I‘ve bought a car. I’ve seen it, sat in it, but didn’t look under the hood. But when I want to start and drive the car, it turnes out a few wires are missing. Oops ..
document.querySelectorAll. For example
$(document).find('.element'); can be achieved by
Traversing the DOM is possible without jQuery. Complicated DOM travering is difficult with only vanilla JS, so you may want to use Sizzle. This engine is used in jQuery, but it’s possible to use this in your project without jQuery (https://github.com/jquery/sizzle#sizzle).
element.addEventListener(eventName, eventHandler); or replacing the element’s HTML
element.innerHTML = string;. The jQuery source is also using innerHTML (https://j11y.io/jquery/#v=git&fn=jQuery.fn.html).
Less dependencies, more handcrafted code
The reason I want to phase out jQuery lies in the fact that more and more ECMAScript functions are supported in browsers. It’s possible to use more native browser and ECMAScript tooling these days.