Why I picked VueJs for ASP.NET Core Web development
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 some code too. All this learning is supposed to be for the purpose of getting things accomplished after all.
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:
- What does it allow me to do that isn’t easy with the technologies I’m currently using?
- How valuable are these new features for delivering better software and a better user experience?
- How many bytes is the minified version?
- How intuitive is the syntax or coding style that it introduces?
- How quickly can I be productive with it, in other words, how long is the learning curve?
- Does it require that I use any other new technologies and if so, what is the learning curve for them?
- Does it have enough developer adoption that it’s likely to have a long shelf life?
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
How Does Reactivity Help?
Set the text of a message in a div.
Get that value of a form input field.
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:
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.
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.
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.