The Hasan Dispatch logo

The Hasan Dispatch

Archives
Log in
Subscribe
September 15, 2019

Why I Stopped Using jQuery in 2019

jQuery was the training wheels that taught me JavaScript. Here's why I took them off, and what I gained by doing it.

#jQuery #JavaScript #Career

The jQuery Comfort Zone

jQuery was the first JavaScript library I ever learned, and for a long time it was the only one I felt comfortable with. The appeal was immediate: instead of fighting with browser inconsistencies and verbose DOM APIs, jQuery gave you a single chainable interface that worked everywhere. $('#button').click(function() { ... }) was dramatically more readable than the vanilla equivalent, and the ecosystem of plugins meant you could add a datepicker or a carousel without writing much code yourself. For a junior developer trying to ship features, jQuery felt like a superpower.

The comfort zone became a trap when the features I was building started requiring more than DOM manipulation. jQuery is excellent at selecting elements and handling events, but it has no opinion about how you structure your application, how you manage state, or how you keep the UI in sync with data as it changes. As the applications I worked on grew more complex, I found myself writing increasingly convoluted jQuery code that manually synced the DOM with a JavaScript state object, and the sync logic was where the bugs lived. The code was hard to read because the intent was buried under the mechanics of keeping the DOM updated.

The Breaking Point

The breaking point came when I was asked to build a form with conditional fields — show field B only if field A has a certain value, show field C only if field A and B both have certain values, and so on through a dependency chain that was five levels deep. In jQuery, this meant writing event handlers for every field that could trigger a change, and each handler had to know which other fields to show or hide based on the new value. The code worked, but it was fragile: adding a new conditional field required understanding the entire dependency graph, and a change to one condition could silently break another in a way that only surfaced in production.

React solved this problem by inverting the relationship. Instead of writing code that reacts to changes and updates the DOM, you describe what the UI should look like for any given state, and React handles the DOM updates. The conditional form that took two hundred lines of jQuery became fifty lines of React, and adding a new conditional field was a matter of adding a new conditional render — no event handlers, no manual DOM sync, no hidden dependencies between fields. The code was shorter, more readable, and dramatically easier to reason about, and once I'd seen the difference, I couldn't go back.

The Transition

The transition off jQuery wasn't instant, and it wasn't clean. The legacy codebase still had thousands of lines of jQuery, and we couldn't rewrite it all at once. What we did was adopt React for new features and gradually migrate existing features as they came up for significant changes. The migration taught me that big-bang rewrites almost never succeed in production environments — the incremental approach is slower but it's the only one that doesn't require freezing feature development for months while the rewrite happens.

What I gained by moving off jQuery wasn't just better code — it was a better mental model for building user interfaces. jQuery taught me to think in terms of actions: "when the user clicks this, do that." React taught me to think in terms of state: "given this state, render this UI." The second model is more powerful because it separates the description of the UI from the mechanics of updating it, and that separation is what makes complex applications manageable. jQuery was the training wheels that taught me JavaScript; taking them off was the step that made me a real frontend developer.

Don't miss what's next. Subscribe to The Hasan Dispatch:
Share this email:
Share on LinkedIn
GitHub
🙃
LinkedIn
Powered by Buttondown, the easiest way to start and grow your newsletter.