React vs jQuery: how does each technology differentiate and who would “win” today?

What about React vs jQuery? Well, they are two very different libraries created at different times of the World Wide Web to address different problems.

Many people (including myself in the past) mistake one or both of them as frameworks but that is not accurate. Frameworks are full flavor development “environments” that provide as much functionality possible to help with the complete product’s lifecycle. Libraries, on the other hand, come with less functionality because they try to address more specific issues. In exchange they provide more freedom, allowing developers to choose how to approach the rest of the product development.

So let’s dive into the React vs jQuery topic. Let’s see together what makes each technology unique and what problems each one tries to solve.

JavaScript history

Back in 2010, I was still an undergrad university student taking a web development course. It included HTML, JavaScript, CSS, SQL and PHP.

JavaScript and also web development overall were very young at the time. Web pages were rendered from the server, while the front end was making just a little use of JavaScript’s capabilities. JavaScript was mostly used to add some dynamic behavior to the client’s browser like DOM events handling, form validations etc. Definitely not routing, state management, translations, and other more complex things.

At that time jQuery was rising. jQuery was created in 2006, but I think it wasn’t until 2008 that started to gain attention. By 2010 it was being used worldwide and considered a state of the art library. And if you went job seeking, interviewers asked for jQuery experience.

What is jQuery and how does it work?

jQuery created by John Resig, from the need to re-use functionality easily, without having to re-write it. It creates methods around common front-end tasks that require many lines of code and adds interactivity (animations, etc) in a fast and lean way. That being said, developers can invoke these methods with just a line of code.

We use it to manipulate the Document Object Model (DOM) directly (i.e. add/hide UI elements) and perform AJAX calls simply. Also, it invokes browser APIs in a cross-browser consistent way. jQuery was literally awesome for the time it first appeared! jQuery was a pioneer of JavaScript community packages and took client-side development to the next level.

Catching up with the present

Today, the JavaScript ecosystem has grown and changed a lot.

At first, most of the existing frameworks have created their own jQuery like functionality and also major browsers have made their APIs more consistent. On the other hand, today we also treat web development from a different perspective. In the example, we consider that manipulating the DOM directly is not the optimal development route. Because DOM elements carry around a lot of unnecessary data which make the performance go down when the web page is full of elements.

Today jQuery is a lot less relevant in the present world but not entirely obsolete. Especially when we need the support of legacy browsers (i.e. Internet Explorer older versions), it can be a charm. But web development has changed and higher level opinionated libraries like React have taken the lead. Not to mention that someone first needs to learn JavaScript basics and then jump to these libraries.

React vs jQuery: what are the differences?

React is a library for building User Interfaces (UI elements). If you are familiar with the Model View Controller architectural pattern, React stands only for the V (View).

React is different in the sense that it is a UI component management library as opposed to a utility library wrapping browser APIs. Using React implies that you adhere to a recommended methodology (component oriented structure) for defining your user interface, and structure your interactions around well-defined lifecycle methods. If you follow the advised conventions, you get optimizations for free. In the example, internally it minimizes the actual DOM changes that happen to keep the application performant.

A big difference between these two is that React works through the “virtual DOM”, whereas jQuery interacts with the DOM directly. The virtual DOM is a DOM implementation in memory that compares to the existing DOM elements and makes the necessary changes/updates. And that leads to much faster performance.

In React, A single component contains both the functional part of the View and the UI itself. That’s right! With React you code your UI elements in JSX, a syntax extension of HTML. Although it might sound counter-intuitive, it turns out it is much more efficient and you have better control and maintenance over your code.

React or jQuery: which should I learn?

Although, the roles played by jQuery and React somewhat overlap when it comes to user interface management, they are very different in the core. And by learning one doesn’t mean you can do all the things that the other does.

If you are starting now with web development I would suggest you learn the JavaScript fundamentals first. Then choose a modern technology – for me, this technology is React. React is my personal professional preference for the past 3.5 years.