jQuery vs Vue.js
Perspective from years of using jQuery and switching to Vue.js
Why using jQuery? Why bothering? Isn’t it dead? Isn’t it way to 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:
Latest version of jQuery is 3.6.0 and was actually released in 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, use them in commercial / private projects (so did I). It’s been there with for years and most likely for years it will remain.
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 terryfing! What Vue.js offers for example is:
- less code to write,
- cleaner code,
- modularity,
- TS support,
- reactivity,
- super easy to learn (from perspective of jQuery / TS person),
- growing popularity,
- simplicity of usage,
Don’t get it wrong — this is not perfect tool, there are bugs which 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 tought:
“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 future self, but also out of curiosity), besides 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 on my case:
- couple years with Vanilla JS and jQuery,
- 1y + with Typescript,
- one project in React (messy as hell, written 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 the Christmas (while other 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, consist of good examples, use cases and explanation. All that is left afterwards is just writing Your own code.
React and Angular are way to big, way to complicated — compared to both of them Vue.js is a little/compacted grain of salt — but works the way it should.
But what abut 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 safelly use Vue.js alongside with 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 library.
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, it’s 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):
In jQuery this depends on place where we call it, while in Vue.js it’s almost always referencing to the root so there is no need to create copy of this to use other context 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:
Removal of $(selector) , reducing need to update DOM
In Vue.js there is no longer 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 repetatable code in 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 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 perspective of Vue.js You pretty much do something like this:
- define initial value of variable — bind it to html (template),
- update the variable, wherever You need by calling:
this.variableName = "something" - eventually update child component from parent
this.$refs.component.variableName = "something",
Simply saying, Vue.js handles updating all ocurences of 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 / concept 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 lak of well known jQ plugins for Vue
As an example — I really wanted to use datatables for Vue.js but I couldn’t find any decent working component with the same functionallity. 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.
Few words of summary
I could naturally write so much more about it, but nobody is simply going to read endless chunk of text.
