I've heard a few people argue that "React is the new jQuery". I think this is plain wrong on so many levels and I want to touch on two specific points.

jQuery was (and is) great

A few years ago, jQuery was the de facto JS framework. Building UI without it was simply not a thing.

Vanilla Javascript's API was not as good as it is today, and jQuery was bringing an awsome API, mostly for DOM manipulation, animations and AJAX. It was also focused on offering good cross-browser compatibility in a time of high inconsistency, especially with mobile growing.

jQuery is still very good today, it's just that it has lost relevance as other technologies have evolved.

What changed?

First, Vanilla APIs in most browsers have evolved, making DOM manipulation, animations and AJAX a breeze (all thanks to avances in JS but also HTML and CSS).

You don't really need an additional library when you can select DOM elements with document.getElementById('app'). The new fetch API is slowly getting implemented in new browsers, and other libraries such as Axios and Request solve this problem without requiring you to load all of jQuery simply to make AJAX calls.

Second, as the web is becoming more bloated, the amount of libraries that are imported in a project (and their sizes) is much more looked into today. jQuery is pretty heavy, mostly because it does a lot of things, and developers are looking for lighter, more specialised libs. That might be a place where jQuery has failed and allowed other libs to gain momentum; Being able to split or cherry-pick some of its functions would might have helped.

Second, dev technologies change quickly and the web is no exception, quite the opposite. You see a lot of web technologies come and go. When was the last time you heard of Ember.js? Or even Angular, despite all the pushes Google is still putting into?

We hear more about the fall of jQuery because its simplicity made it the first thing web developers learned.

Lastly, one of the main changes that have participated in killing jQuery is the fact that asset pipelines have become so common. Starting with Grunt, then Gulp and now Webpack, we preprocess our Javascript, allowing to use new cutting-edge APIs while staying cross-browser compatible. We're also able to write different languages that offer additional APIs or features, such as Elm, Typescript, etc.

All this doesn't make jQuery bad, or justify using it as an insult when comparing it to another technology. It only makes it irrelevant.

This last point about the evolution of the asset pipeline is what brings us to the second thing I want to talk about here. Comparing jQuery with React.

React is not a jQuery replacement

jQuery is meant to be simple and easy. Add a script tag to your header and voilà! you can use jQuery. That's it. And that's exactly what they claim on their website. Nothing more.

React is... more. I've googled a bunch to try to find a succinct description of what React is, but couldn't. Even the official doc has trouble. It mentions "building user interfaces". This implies a lot and already sounds more than what jQuery promisses. Then it mentions things like "state", "encapsulated components", "rich data", etc.

This is obviously much more than what jQuery offers. So you can't expect React to be as simple to add to your project, or learn, or use. Comparing it to jQuery is comparing apples to coq au vin. And just like apples are a great quick, healthy snack, coq au vin, much harder to prepare, is a better fit if you're receiving guests for a fancy diner. Apples? Not so much.

I liked jQuery when it was relevant. I still like it and sometimes feel like some of its features are still nice to use for some simple projects.

I also like React a lot. It can become complicated very quick (and how to avoid that is another post) but well taken care of makes your (and your team's) life much easier as you work on complex systems that keep growing.

It's just a matter of using the right tool for the right job. You won't find any React on this website - that would be an overkill. But if you go on some of my other posts, such as Counting, you'll find some Vue code for interactivity. jQuery could have been used, but I think that Vue is the new jQuery (mic drop).

Vue is the new jQuery

Please bear with me in this section, and do let me know if I say anything wrong. I barely have any experience with Vue, but the little experience I have with it actually reminded me of the jQuery time.

To me, Vue is something simple, easy to setup and easy to use.

Let's say that I want to add a button with a counter. The counter starts at 0, and every time the button is clicked, the counter increases, live on the page. And let's do it live!

Let start with the HTML.

<div id="counter">
  <span id="count">0</span>
  <button id="button">Add 1</button>
</div>

Now that we have the HTML ready, how can we get the 0 to increment when the button is clicked?

I can add jQuery to my page with a CDN link, and start using it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script>
  $('#button').click(function() {
    var countEl = $('#count');
    var count = parseInt(countEl.text());
    countEl.html(count += 1);
  });
</script>

We now tell jQuery to add a click event on the button. When the button is clicked, jQuery will get the count, increment it and replace the value. Pretty straight forward, but you can already see how DOM manipulation with jQuery always feels a bit hacky.

As we are reading the count value, we have to use parseInt to cast it to an integer, because DOM elements are always text. So we are not really incrementing an existing value, we are replacing the HTML of our #count div. The amount of manual labour done here shows how fast jQuery will hit a scaling issue as our code becomes more complex.

Instead, we could use Vue.

Just like jQuery, we can simply import Vue through a CDN link. This is one of the recommended way to import Vue by the official docs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

Because Vue allows us to do less manual DOM manipulation, we first need to update our DOM a little.

<div id="counter">
  <button id="button" v-on:click="incrementCount">Add 1</button>
  <span id="count">{{count}}</span>
</div>

We added a click handler on the button element (v-on:click) which will call the incrementCount method and replace the hardcoded 0 into a Vue template variable ({{count}}).

We can now write our Vue code.

new Vue({
  el: '#counter',
  data: {
    count: 0
  },
  methods: {
    incrementCount: function () {
        this.count++
    }
  }
})

We created a new Vue instance, with our #counter element as the root, making everything we declare inside our Vue instance accessible inside. This Vue instance has data holding our count (the same count we interpolated in the #count element) and methods. Clicking the button calls the incrementCount method which increments the count variable. Vue then takes care of rerendering our DOM, so we can focus on our data model only.

React, as stated, would not only be an overkill, I might just abandon the idea of making this button work inside this blog post, because it'd be too much work. As I said I don't have React on my blog, so I'd first have to install React. Right now I don't even have npm setup, so I'd have to setup npm, install React and Webpack, have a build pipeline, etc.

Please note that I could in theory add the CDN script link and start writing React code, but this method is not recommended for multiple reason, including the fact that writing React without ES6, JSX and other modern features is missing the point of React.

If you want more examples of migrating from jQuery to Vue, Sarah Drasner wrote a very nice piece on Smashing Magazine.

Vue, not React, is the new jQuery, in a great way

Here, I say it and a lot of other people say it.

Stop bashing on jQuery. It was a great technology during its high time and if you've been doing web development for more than a few years, you surely should remember the good days and appreciate what jQuery has done for you.

Stop comparing React to jQuery. React requires way more setup, for justified reasons, as it solves different problems. Vuejs seems to be a better candidate to replace jQuery, so go try it!