March 5, 2018

Tech Stack Modernization, Volume 4: Vue.JS

by Dave Sweeton

This is my 4th and final article about my experiences choosing a new modern tech stack. I originally described my requirements and process for choosing a stack, detailed why Angular didn't meet my needs, and then took a detour through some common build tools. In this article I'll talk about the framework I selected and how it worked out on my first project using it.

What is Vue.JS?
Vue.JS is a client side framework focused only on the view layer. In that regard it's similar in scope to React and Knockout.JS (my legacy favorite). At its core it handles rendering HTML templates based on your data objects, and automatically updating when state changes. Since Vue.JS is small, it doesn't do much else out of the box. Instead it works well with many other libraries and is easy for you and 3rd parties to extend.

Why not use React?

React has a similar focus as Vue.JS, but is more established and more popular; so why didn't I just use it? The two are close enough that if my team had experience in React, I likely would've selected it instead. (Likewise, there aren't enough reasons to switch a project from React to Vue.JS.) I didn't have existing knowledge to leverage though, so I went with Vue.JS because their comparison was compelling. By coming later, Vue.JS seemed to have a better approach than React (much the same way C# learned from Java's mistakes), and overall, Vue.JS seemed a fair bit simpler and likely faster or easier to optimize. I was (and am) concerned about the size of the Vue.JS developer community (compared to React, which is huge), but Vue.JS seems to be on a fast upward popularity trend, and large enough to sustain itself.

Vue.JS Review

After prototyping and selecting Vue.JS, we used it to write a new version of an application, with myself and two other developers. The project was to substantially revamp the UI of an ASP.Net WebForms project that started development in 2006 (it used Ajax, but it was early Ajax, predating the popularity of JQuery). By way of reviewing Vue.JS, I went back to the criteria from my original article to see how it fared:

1.High performance. Yes! I was able to build a complex UI with deeply nested components and make massive changes to the data model, and everything re-renders speedily. As one example, our app supports localization, which lets the user change their selected language dynamically at runtime. Via Vue.JS we bind every label to localized text and the culture affects how we render a lot of calculated data, so changes cascade everywhere. Even with loading the translations on the fly and a lot of server work to recalculate data, language changes are lightning fast!

2. Fast development. For the most part yes. Vue.JS has little boilerplate code and adding a new component is pretty fast. The ecosystem, with WebPack, NPM and various 3rd party libraries provided plenty of unaccounted-for slowdowns, but I think that would've occurred with other frameworks as well (though certainly less with Angular with its more controlled ecosystem).

3. Short learning curve. Yes and no. Certainly faster than Angular would've been, but I'd say the learning curve for Vue.JS appears deceptively short. Developers can go through the tutorials and pick up some concepts quickly, but it took more time and effort to become proficient in the details (partially due to my setup; see below). I'd guess that the curve is longer for Vue.JS than it was for Knockout.JS (which also appeared deceptively short for some developers).

4. Abundant resources. Yep, the docs on their site were easy to use and answered my questions almost every time. The forums helped out, as did StackOverflow.

5. Organization and structure. Vue.JS let me organize my components however I wanted to. I may revise things as the project grows, but it's pretty easy to find my way around.

6. Maintenance. Time will tell on this one, but we were able to make our code DRY, and encapsulate details in ways that should make it easier to maintain.

7. Debugging and diagnostics. Decent but not great. TypeScript helped prevent some runtime errors, but I still find myself doing a lot of manual debugging (console.log) because it just seems faster. I've used various browser plugins for Vue.JS, but none really wowed me or made my work drastically easier.

8. Flexibility. Yep, I was able to use a variety of libraries (including ones not specific to Vue.JS), and had the freedom to choose whatever I wanted.

9. Templating. Great, with some minor issues. The markup output by Vue.JS was much cleaner than Angular, and didn't require me to jump through hoops with whitespace or fake HTML elements. Having CSS next to my template (whether scoped or not) was fabulous! The templates were pretty clean and easy to read. The only complaint I have is that a component is only allowed to have one child element at the root, which sometimes led me to create a wrapper div where I didn't want one.

10. Longevity. Vue.JS still has a lot of buzz and hype; only time will tell if that translates into a lasting community.

The bad parts

I did have some troubles with my adoption of Vue.JS. I wanted to use TypeScript, which I did via a 3rd party library that used a class and decorator based approach. This worked well (and I liked the class based approach better), but broke my ability to have a single file per component. (The typescript had to be separate from my template.) And that meant that my code didn't look like Vue.JS samples (which made other developer's spin up harder). There's a new version of Vue.JS (2.5) that has better TypeScript support, but I haven't evaluated it yet.
I also wanted Vue.JS to work natively with Promises for data binding. I was able to build some code that adapted Promises to the framework (and there are other libraries that do this now), but it wasn't painless.

Having completed a decent sized project with Vue.JS, I'm still happy with the choice and would continue to use and recommend it for future projects. Interestingly, I heard a talk from a developer recently who started a new project with Angular and failed (for unspecified reasons), and ended up switching to Vue.JS.
I wouldn't suggest switching to it from React, and I also wouldn't recommend switching to it from Angular if you're happy with it. For teams coming from Knockout.JS, Angular.JS (aka 1.0), or some other framework, I'd strongly suggest trying out Vue.JS to see how it fits.
© Copyright 1995-2018 - STOUT SYSTEMS DEVELOPMENT INC. - All Rights Reserved
envelopephone-handsetlaptop linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram