Angular Guy Takes Vue.js For a Spin

It feels like Vue.js hits a sweet spot between Angular and React. It reminds me of the simplicity of getting started with the old AngularJS while keeping the option to use your favorite tech stack: package manager (npm or yarn), language (JavaScript or Typescript), linting and formatting rules (ESLint presets or Prettier), unit testing framework (jest or jasmine), CSS preprocessor (Sass or Less).

Getting started without NPM, Webpack, Babel, bundles, plugins, and what not…

…or how to progressively enhance your static website without installing the whole NPM universe. If you want to add a bit of UI logic here and there in the middle of some preexisting static content, you don’t have to rebuild everything on top of Vue. You can include a script tag in the HTML to load the framework from a CDN and just start hacking away (remember those jQuery days?). You’ll miss some of the modern JavaScript goodies (so no ES6 syntax) because you are not using any of the tooling, but you might get some days of your life back in return:

Check it on GitHub

Tooling for everyone (that wants it)

I can totally see the appeal of Vue if you are a web designer and you simply want to get stuff done without having to learn a massive framework upfront (angular) or go through bending your mind to get used to working with an immutable state (react). You get a lot out of the box with almost no effort.

There are a CLI and a GUI for managing projects. If you are a command-line guy, then the CLI is what you expect (especially if you used Angular before). But you’re not reading this article in a terminal using Lynx, are you? Chances are you’ll like the web GUI and what it has to offer. Just run “vue ui” to get started.

For me, having a bundle analyzer out of the box was priceless.

Single file components

You can use “single file components” or split the HTML, CSS, and JavaScript into individual files. Both work equally well. I personally like having them together. But you’re supposed to separate HTML from CSS. “Why put them together”, you say? Well, I like my components small and cohesive. Having the code, the markup, and the styles that are closely related sit next to each other helps with cohesion IMHO. Thanks to VS Code and the Vetur extension, you get the proper editor experience even if you practically have a mix of code, markup, and styles in the same .vue file. The only downside I found is the lack of syntax highlighting in .vue files if you do code reviews in Azure DevOps.

Turning on “format on save” and linting with pre-commit hooks is awesome. No more discussions about formatting and coding style during the review.

Instant prototyping with the CLI is also possible. Create an app.vue file, run “vue serve” and enjoy. No need to create an entire project. See the single file component with the default “Vue” component next to the Vue devtools plugin below:

Check it on GitHub

Bundling for production is taken care of for you by the CLI and Hot Reload works out of the box (take that Angular). See the state preservation rules if you want to know what you can update without reloading the page and losing the state.

Making Angular developers feel at home

If you are used to building your components using classes, no problem. Vue supports class components to make you feel at home.

Check it on GitHub

Vue.js for React developers

I wouldn’t call myself a React developer, but I really enjoyed using the JSX syntax when playing with React. Here is a fun thing that you can do in Vue to achieve the exact same result as in the previous example. Render functions with JSX FTW!

Check it on GitHub

Angular guy just wanted to create a service

Services? Forget that stuff. You can just export/import stuff from ES modules. Easy, right? Except if you want to share state. Then there is this “small” detail to keep in mind: reactivity, which is related to the way Vue updates the DOM when data changes. Now go read about reactivity in Vue.

TLDR? If you are using Vue 2, you can keep your state in a shared Vue instance or use a proper state store (Vuex). If you are using Vue 3, then you can use the new reactivity API to make your state reactive without the extra bloat.

Not so green

The much-awaited Vue 3 was recently launched. It looks great as it comes with improved TypeScript support, a very promising Composition API, improved performance, and, on top of that, backward compatibility. The compatibility part sounds awesome, but it turns out there is a catch. Some features were removed (like filters). Technically, if it is not there anymore it cannot break, right?

Then there are the class components, which left me with a certain “you had to be there” feeling. Looks like they were an external library, then almost moved to the framework, and then dropped from the framework. But still, working if you use the “vue-class-component” library? It took me quite a while to untangle this as I wanted to use class components but I was not sure if they will be supported going forward. What was confusing was that some examples (from “the internet”) relied on attributes imported from the Vue package while others were using the external library. Come on, Vue, which one is the proper way? Spoiler alert: using the “vue-class-component” is the proper way and it works with both Vue 2 and 3.

Conclusion

Would I migrate an existing application from Angular to Vue? No. Would I recommend Vue to someone that wants to pick up a modern framework or to someone starting a project from scratch? Definitely!