jQuery vs Vue.js

Why using jQuery? Why bothering? Isn’t it dead? Isn’t it way too messy? Is it still being used in nowadays projects? Is it still…

and so on and on…

jQuery is still alive and as far as I know, it’s doing fine.

The latest version of jQuery is 3.6.0 and was actually released in the current year (2021).

There are still tones of companies looking for developers with jQuery among the required tech stack. People are still building plugins for it, using them in commercial/private projects (so did I). It’s been there for years and most likely it will remain for years to come.

Modern JS

When we talk about modern JS, we mostly (at least I and many people with which I had the opportunity to talk/chat) mean: React / Angular / Vue.

I already had a chance to play with all of them, and by far Vue.js is a win — but this is not the main topic here.

At one point of using Vue.js I even thought:

“Vue.js is … terrifying…”

There is nothing to fear about, it’s just that… compared to jQuery it’s so much better in many fields, and this is what makes it terrifying! What Vue.js offers for example is:

• Less code to write,
• Cleaner code,
• Modularity,
• TS support,
• Reactivity,
• Super easy to learn (from the perspective of jQuery / TS person),
• Growing popularity,
• The simplicity of usage,

Don’t get it wrong — this is not a perfect tool, there are bugs that are constantly being fixed.

Another cool example is that I had my “todo” list of what I want to implement in my project — I’ve finished it so fast that I thought:

“I must’ve forgotten something”

I didn’t — coding with Vue.js goes really smooth.

Long Story Short — Moving Forward

I’ve been using jQuery for years now and I had this feeling that it’s time to grab something modern (not just for my future self, but also out of curiosity), Vue.js allowed/allows me to learn modern vanilla JS solutions.

How Hard Is It to Learn Vue.js?

Like always “It depends” — I will present that in my case:

• A couple of years with Vanilla JS and jQuery,
• 1y + with Typescript,
• One project in React (messy as hell, written a few years ago),
• One big update in Angular (4+?),

It took me…. 2 weeks to learn Vue.js to the point where I feel confident enough to work with it.

However these 2 weeks were not like 24/7 in tutorials, rather I was reading the manuals during Christmas (while others stared on the TV I followed the official Vue.js manuals).

In my opinion, Vue.js is super easy to learn — official documentation is well written, consists of good examples, use cases, and explanations. All that is left afterward is just writing your own code.

React and Angular are way too big, way too complicated — compared to both of them Vue.js is a little/compacted grain of salt — but works the way it should.

But What About Vue CLI, Vuex, Etc.

You don’t need this to start using Vue.js — the really necessary packages that I use are:

• Vue-router,
• i18n (however I use my own implementation which I’ve described here)

Can You Safely Use Vue.js Alongside jQuery?

The answer is — up to some degree.

The problem is that jQuery or Vanilla Js update/ insert/ remove the elements (their values) by manipulating DOM directly — Vue.js doesn’t like that, and it won’t be informed that something was changed by other libraries.

Vue.js is meant to update the DOM by manipulating the delivered data (that is — changing the state of variables automatically reflects in changes of DOM)

Turning World Upside Down - Separation of Logic vs Single File Component

The biggest issue in switching to Vue.js is changing the way of thinking of the code, its structure — the way it should be written.

In my case I moved to Single File Components — this was one big no(!) for me as all the time I’ve been separating js / HTML / CSS — this is no longer the way to go in terms of Single File Components.

In the old school solution we would go this way:

• styles.scss
• script.js
• index.html

While in Vue.js we have simply:

• component.vue — which consist of template (HTML), script (js) and style (CSS) sections

That is — I got one file with my solution. Nobody says that You can’t separate the logic — but I wanted to follow the Vue.js coding standards from scratch and to learn modern js.

Less Code — Make It Easier to Read and Maintain

One of the things worth mentioning is that we are no longer relying on the let $element = $(element) or $element.on('click', () => {}) , instead, we have $refs and @event.

Seems like nothing big, but this already makes code clean. Consider your template code with something like this (attaching an event):

  public attachModuleContentLoadingViaAjaxOnLinks(): void
  {
      let _this = this;
      // ... other code here
      $(element).off('click'); //prevent stacking
      $(element).on('click', (event) => {
          event.preventDefault();
          _this.loadModuleContentByUrl(href);
      })
  }

In jQuery this depends on the place where we call it, while in Vue.js it’s almost always referencing to the root so there is no need to create a copy of this to use other contexts in on — this could be solved somewhat with bind but I could never get along with this concept.

So if we transform this to Vue, we get something like this:

<template>
  <div @click.prevent='loadModuleContentByUrl' ref="divElement"></div> <!-- This is the `on click` -->
</template>

<script>
export default {
  methods: {
    attachModuleContentLoadingViaAjaxOnLinks(href): void {
      this.loadModuleContentByUrl(href); // that's the only thing that remains from previous code
    },
    loadModuleContentByUrl(href){
      // ... other code here 
    }
  }
}
</script>

Removal of $(selector), Reducing the Need to Update DOM

In Vue.js there is no longer a need to grab selectors this way, we can simply do this.$refs.divElement wherever we need that DOM element

It doesn’t seem to be much but this already reduces the code, we get rid of small repeatable code in a lot of places this way.

Additionally, we no longer need to manually update the values / DOM elements whenever we do some change in other script — this is possible due to reactivity meaning that if we update a variable in one place… it’s all usages in other places are also being updated — this reduces the code significantly.

From the perspective of jQuery the process would look like this:

• set some value (hardcoded) in HTML (template),
• update it in one place (grab the $(selector) )
• then update it in all the other places, adding tones of $(selector).find.parent
• maybe add the if dom element is not existing ,

I think you get the point — you pretty much like duplicate tones of code.

While from the perspective of Vue.js You pretty much do something like this:

• Define the initial value of a variable — bind it to HTML (template),
• Update the variable, wherever You need by calling: this.variableName = "something"
• Eventually, update child component from the parent this.$refs.component.variableName = "something",

Simply saying, Vue.js handles updating all occurrences of a given variable!

Vue.js — Cons (Compared to jQuery)

Vue.js is not perfect — this is something that needs to be understood here. Bugs happen and so there was a bug in 3.0.0 with which I struggled but was then fixed in 3.0.2 — but hey, that’s normal.

The only real cons I can write about - in terms of technical solutions/concepts is “partial TS support”, meaning “no Typehint support in Vue.js methods” (this however works in CLI — never used that one, just saw some information here and there).

The biggest downside is lack of well known jQ plugins for Vue

As an example, I wanted to use data tables for Vue.js but I couldn’t find any decent working component with the same functionality. This forced me to write my own lite version of that plugin — and so it shows how simple it actually is to recreate code in Vue.