Why I use VueJs and JQuery Together!

Like many ASP.NET developers, I have been using JQuery for years and love it. More recently I have wanted to add reactivity to my pages and Vue is my pick for how to do that. For more background you can read my post on why I picked VueJs for ASP.NET Core web development.

In that post I also talk about why I chose to load Vue from a CDN and why I don’t use webpack. The next question that anyone on this journey will encounter is “should I ditch JQuery?”

Should I Ditch JQuery?

You can, and that might be the right decision for you depending on your application needs. But I decided to us VueJs and JQuery together.

Gasp!

There are plenty of articles about how you shouldn’t mix JQuery with Vue but all I can guess is that the people are writing from a theoretical standpoint rather than experience, or perhaps they are going the SPA route with something like webpack. But, my experience is that Vue and JQuery actually can co-exist quite nicely on the same page. At some point I’ll write an article about that but for now let me just say that obviously you shouldn’t use the two of them to repeatedly manipulate the same DOM nodes. That’s not going to end well.

But Vue’s virtual DOM and differences engine makes it really smart about only updating DOM nodes that have changed. It’s technology in this area is really quite impressive. So if you are maintaining one area of the DOM (even if it’s under Vue’s control) using JQuery that’s not likely to be a problem provided you are not specifically using Vue to change that area of the DOM.

Let me say this though, if you do keep JQuery and use it with Vue, at first you need to TRY HARD to always do things the Vue way rather than using JQuery to do what you know. You will find that most everything you want to do with regard to page rendering can be done better with Vue than with JQuery. And by “better” I mean, less code and more maintainable code. If you keep JQuery, don’t let it keep you from learning Vue. 😃

Why I kept JQuery

Why do I still use JQuery if I’m embracing Vue? Good question. I use it for several reasons. The first reason, and biggest reason really, is that I use it for doing the AJAX communication with the server. Vue doesn't provide an official way of implementing AJAX, however most articles will mention Axios as the standard library to use with Vue for this purpose. I chose not to use Axios. Why?

First, as of this writing the current version is v0.18 and when I was doing my evaluation a couple years ago the version was even earlier. Such a low version number doesn’t instill confidence if you know what I mean. Then I realized that to get the kind of browser compatibility support that I need a polyfill would also be required since it relies on fetch. When I compared the byte size of Axios and the fetch polyfill to the size of JQuery, I wasn’t saving that many bytes and I was going with something that felt a bit too leading edge for my tastes. For something as critically important as AJAX communication to the server it was worth a few extra download bytes to the client to be able to use a battle hardened library like JQuery.

Also, I like to do some keydown event processing on my pages to make the escape key for example close dialog boxes, or have the up arrow and down arrow keys trigger custom scroll functionality. Well it turns out that how key codes are stored on the JavaScript event object has been in a state of flux across browse versions and doing key code event processing without the help of a library like JQuery raises a lot of compatibility issues and would be a real pain to write. The comment below that I borrowed from my JavaScript makes the complexity of the situation a bit more clear:

//Yuk!
//9/18/17 the key pressed could be in any one of three places due to browser compatibility issues.
//e.keyCode has been used forever and is well supported but "depreciated", e.which feels somewhat newer
//but also "depreciated", and the new kid is e.key which is not well supported and is a yuckier implementation
//given that it can be a single char or a word like "ArrowDown", and the word isn't even consistent across
//browsers, (Down in IE/Edge otherwise ArrowDown).  Yuk!
//NOTE: jquery normalizes this stuff and provides a normalized e.which.  So it's best to use jquery.
$(document).keydown(function (e) {
	//event processing goes here
});

So having JQuery for that makes life much easier.

And finally, while rare, there are cases where accessing the DOM directly proves useful and JQuery of course makes that much easier than using plain JavaScript. For example, I use DropZoneJs for providing a great UI experience for uploading photos to the website. When writing the JavaScript to incorporate DropZoneJs into the website, JQuery made life easier.

So there you have it. I kept JQuery.

What was the Total Weight?

I’m using JQuery 3.2.1 currently and it weighs in at 29.54KB minimized & gzipped, so add that to VueJS which for me weighs in at 30.84 minimized & gzipped.

This information comes directly from the FireFox developer tools network tab. See the transferred column below :

So there you have it, we have access to both Vue and JQuery and the total weight to the client is 60.38KB. In my mind, that combination packs an enormous amount of functionality per byte. I'm pretty happy with that.