Getting started without NPM, Webpack, Babel, bundles, plugins, and what not…
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
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:
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.
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!
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.
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!
About Sorin Damian
With a BA and an MA in Computer Science, Sorin has over 13 years of experience in software development. He’s been working with .NET since version 2.0, with Angular since version 1, and is into TypeScript since the very start of his career in software development.
27 September 2021
“We’re Living the Golden Age of Reinventing Payments”
1 September 2021
Maxcode Appoints Robbert Ledeboer as New Managing Director
18 August 2021
The Past Month in the Headlines