EngageBox drops jQuery in favor of plain Javascript

Published in Blog by Tassos Marinos on Thursday, 26 March 2020

EngageBox drops jQuery in favor of plain Javascript

It was time to keep my promise and set EngageBox jQuery-free as I did a few months ago with Convert Forms. Starting from EngageBox 4 (read the announcement post), its client-side script is now re-written in vanilla JS and there is not a single line of code in the front-end script referencing jQuery (or any other framework) anymore. Scripts are now using browser API directly resulting in a performance boost.

Why did I use jQuery in the first place?

The first release of EngageBox was published around 6 years ago. Back then there was no standard way in plain Javascript to query and manipulate DOM elements. jQuery made that really simple using CSS selectors.

There was no standard way to animate an element. On the other hand, defining animations with jQuery was a piece of cake.

The HTTP Request API was inconsistent between browsers while jQuery could help you perform AJAX requests really fast.

Last and most importantly, features built with jQuery would generally work in all browsers and would take fewer lines of code to implement.

Why do I drop jQuery now?

Sometimes you find yourself loading jQuery to do something that could be written in 10 or 20 lines of vanilla JS, with the same simplicity, and without loading 85~ extra kilobytes (jQuery minified size) in your app. You don't need a cannon to shoot a fly, right?

Thus, having in mind the rapid evolution of supported web standards in modern browsers and the enhancements that ES6 brought, plain Javascript now allows you do anything you usually do with jQuery with the same simplicity, and sometimes in an even more elegant way and without having to worry about cross-browser issues.

  • GitHub removed jQuery from their site
  • Bootstrap 5 to replace jQuery with vanilla JavaScript
  • Joomla 4 plans to remove the jQuery dependency

The time has come for me to take responsibility for the size and the quality of the code served to the browser, minimize application overhead, boost page load time, optimize UI performance and pay that technical debt that grew around jQuery over the years.

Lessons learned

The process of dropping jQuery dependency provided a great opportunity to write a few helper functions of my own, learn a bit more about browsers and the DOM and made me a better developer.

I will always be thankful for jQuery. It deserves respect and has its place in the development history.

It just doesn't make sense to use it anymore.