GiftOasis Technology Blog
GiftOasis Technology Blog

Why I picked VueJs for ASP.NET Core Web development

Apr 29, 2019
By Ron Clabo

Development Environment

I have been doing web development since 1995, and .Net Development since it was in beta back in 2001. I’ve seen a lot of technologies come and go. As a software developer there is so much to learn and technologies keep changing. Some of the changes are real advancements and quite wonderful, others are just shiny objects that will be tossed to the side by the industry as soon as the novelty wears off.

If history is any guide, later we will wonder why we ever wasted time on so many of these objects. While it’s true that being a software developer requires constant learning, we have to be very selective about which technologies we learn and embrace. There are only so many hours in the day and we have to actually write come code too. All this learning is supposed to be for the purpose of getting things accomplished after all.

Like many developers, I’ve used JQuery for a long time and it’s been great. But there have been a steady stream of new JavaScript libraries over the years such as Handlebars, Lodash, Backbone, Angular, React, Aurelia, Angular 2, and more recently VueJs. If there is something better than JQuery out there then I’d like to use it (provided it’ll be around for a long time!). So from time to time I’ve looked at JavaScript libraries/frameworks to see if they would provide enough benefits to be worth adopting, but for me non were until VueJs.

How I Evaluate JavaScript Libraries/Frameworks

One could write a whole blog post how to evaluate libraries/frameworks but when it comes down to it, for me, I want the library/framework to make my life better as a developer. That’s it. Really. What I’ve seen is that most every library/framework has good points and bad points. So I guess what I’m saying is that I want the good to out weight the bad, and not just by a little!

Here are some of the aspects I typically consider:

  1. What does it allow me to do that isn’t easy with the technologies I’m currently using?
  2. How valuable are these new features for delivering better software and a better user experience?
  3. How many bytes is the minified version?
  4. How intuitive is the syntax or coding style that it introduces?
  5. How quickly can I be productive with it, in other words, how long is the learning curve?
  6. Does it require that I use any other new technologies and if so, what is the learning curve for them?
  7. Does it have enough developer adoption that it’s likely to have a long shelf life?

Over time, I’ve learned that often by the time I get to the third point I have a decent idea whether it’s worth looking at further. Most aren’t, at least for me. I guess that because user experience is so important to me and in the web world that means that the total download time for the page is super important. So many of these frameworks/libraries would allow me to do great things easily but the cost (in bytes to download to client) is more than I’m willing to pay. So there is no sense in considering the package further. That’s how it was for one JavaScript framework after another, year after year, after year. Until VueJs.

Why VueJs is Worth Using

Vue offers lightweight reactivity which has previously been unavailable. Reactivity, of course, has been available for some time in many popular libraries like React and Angular but at a much higher downloaded byte cost and coding complexity that was too high for me to swallow. Of course those frameworks have large followings, and that’s great, but I could never get on board. Also, those frameworks were often touted for SPAs (Single Page Applications) and frankly, that’s just not what I build or want to build. In my world, here is my list of wants and need. I need to serve up web pages not a SPA for SEO reasons. I want to make those pages reactive so that I can improve the user experience. I need the page and all its assets to download quickly. I want to be empowered to create user experiences that website site visitors will love. AND, I want to be able to do that without a huge learning curve. Is that too much to ask? Until now, it was, and so I stuck with JQuery alone. Vue however, delivers on all these wants and needs. Happy Dance.

Vue and the Non-SPA Approach

vue logo

While Vue can be used to create a SPA, typically using webpack, it doesn’t have to be used that way. In fact Vuejs can be loaded directly from a CDN as a single file. I looked into webpack and liked its features, for example it allows JavaScript code to be written in ES6 and transpiled to ES5 for browser compatibility. But at the end of the day, like many people, I found that webpack configuration was overly complex and not particularly well documented. For me, the complexity introduced outweighed the benefits of webpack. So that’s why I load VueJs from a CDN instead. This means that currently I (gasp) write my JavaScript code in ES5 but I’m fine with that. Not having to use webpack simplifies the clientside architecture significantly and makes it much easier for new devs to get up to speed on the system.

If you are curious I’m currently using Vue 2.5.16 which is 84.43KB minified, and only 30.84KB minified and gzipped. Yep, you read that right, my users only have to download 30.84KB over the net for me to have access to an elegant JavaScript framework that make it easy to add reactivity to my website pages. And you want to know the best part? Right now efforts are underway to create the next major version of Vue, 3.0, and a stated goal is to make it lighter and faster than 2.x . I have to tell you, in an era of bloatware, such a goal is so counter culture and music to my ears. Thank you Evan You and team.

How Does Reactivity Help?

The benefits of reactivity are obvious to anyone that has used a JavaScript framework that provides it. However, for those reading this article who don’t have experience with such frameworks, l’ll try to help you understand the benefits of reactivity. With reactivity you don’t need to write code to directly modify the DOM, instead by declaring a data model and adding a few additional attributes to your HTML Markup, Vue is able to make the DOM changes for you. And the best part is that the Vue attributes are very intuitive. Let me provide a few examples of doing something via JQuery and then in Vue to help make this more clear.

Example 1:

Set the text of a message in a div.

JQuery

HTML:        <div id="message"></div>
JavaScript:  $("#message").text(val);

Vue

HTML:        <div v-text="message"></div>
JavaScript:  this.message = val;

The HTML above tells vue that the div should contain the contents of the message data property, so in the JavaScript (within a Vue method) all that’s needed to place the contents of val into the message div is to set the message data property. With Vue, your markup indicates how it uses data from the data model, and Vue makes sure that any changes to the data model are automatically reflected in the DOM. This is reactivity.

Example 2:

Get that value of a form input field.

JQuery

HTML:        <input id="firstName" type="text" />
JavaScript:  var firstName = $('#firstName').val();

Vue

HTML:        <input v-model="firstName" type="text" />
JavaScript:  //this.firstName contains the value automatically.

Example 3:

Conditionally display a div.
Let’s say we have a div that we only want to exist in the DOM if the variable showMenu is true. In JQuery we’d need to write code which adds that div or removes it from the DOM anytime the showMenu variable changed. But with Vue we can just use the v-if attribute like this:

Vue

HTML:        <div v-if="showMenu">Some content is in here</div> 
JavaScript:  //None needed.

This new way of thinking takes a bit of time to get used to and at first you may not fully appreciate how much this will improve your life. But it boils down to this: In the past you used JQuery or plain JavaScript to modify the DOM and to get values from the DOM so you could provide interactivity to your pages, but with VueJs you declare which aspects of your page are tied to Vue data properties and then when you change the data in those properties the DOM will automatically reflect those changes. And for form fields the reactivity is bi-directional, so any changes in the field value will also change the related data property value.

It turns out that this is super powerful. No longer do you have to write procedural code to keep track of all the cascading dependencies of behavior you want to implement in your web page. You simply declare those dependencies. Then when one dependency changes, that change ripples through every other part of the page that depends on that aspect.

You no longer have to write code to manipulate the DOM or write code to get values from the DOM. You simply declare in the html how the elements relate to the data model and then work solely with the data model to get your field data or make the DOM dance. It’s so liberating. Once you get use to this new approach you won’t know how you lived without it. Really.

Final Thoughts

I’m not saying that Vue or reactivity is the answer to every web front-end problem, and I’m not saying that Vue is the only way to add reactivity to your web pages. What I am saying is that Vue is a great way to add reactivity to your pages and when served from a CDN without webpack it’s amazingly lightweight, 30.88KB minified and gzipped for version 2.5.16.

If you are like me, declaratively indicating how the HTML relates to the data model and working directly with the data model rather than with the DOM will take a little getting use to after so many years of using JQuery. But almost immediately you will feel how powerful this approach is. The volume of code you need to write will in most cases be less than with JQuery and the code will be more intuitive.

And the declarative nature of Vue makes it much easier to see in the HTML whether or not the element is being used in a dynamic way. With JQuery, scanning the HTML typically provides no such visual indication, so the developer needs to read through all the JavaScript (often in another file) to see which markup is being used dynamically.

If you are an ASP.NET developer and you haven’t taken a look at Vue, you owe it to yourself to give it a whirl. You will be glad you did.

Ron Clabo
Founder & President
Ron is the founder and President of GiftOasis. He is an Internet savvy entrepreneur who has extensive experiences in e-commerce, direct marketing and software development. He is passionate about small businesses including makers, designers, and artisans. Ron is as comfortable developing software as he is marketing products and analyzing business models.
Unique gifts made by small businesses in North Carolina
© 2019 GiftOasis LLC, All Rights Reserved