I went ahead and read through the Vue.js 2.0 official docs and built a quite simple app that provides filtering for data fetched from a json-server and displays the filtered data in a sortable table and a few D3 charts.
Vue.js offers a well-thought out, developer-oriented, and performant front-end stack without all the React.js new-lib here, new-lib there fuss and Angular 1 performance issues. However, React.js developers can enjoy an almost identical stack simply by using Mobx.
- Documentation is great.
- The concepts are easy to grasp.
- Result: Easy to get started with.
Vue feels like one of those "top-down" frameworks, like Angular 1, where it is very easy to just start hacking and get something done.
- Component composition.
- All props are transparently wrapped into observables & tracked.
- Result: Very little boilerplate with great performance.
Vue components have props and data properties that Vue transparently wraps into observables so that it can track where each variable is used. Also, components can have computed properties, which Vue automatically updates when the props, data properties or computed properties which they depend on change. The end result is out-of-the-box reactive components. No Angular 1 watcher mess or performance issues.
This architecture also allows Vue to track the parts of the DOM which are supposed to change when the setters of an observable are called. Then Vue will only re-render relevant parts in the DOM tree. As result, Vue is simply fast.
Also, contrary to React, Vue is built with multiple-instance support in mind. This makes it a good fit for even smaller widget-like apps.
- By default templates use a HTML-based syntax.
- Result: Great flexibility, low learning curve for all, and ease of use.
Much like Angular 1, the default Vue templates are HTML enriched with some Vue specific attributes. This is great for any developer who has previous experience with HTML as you can get started with coding views right away. Many of the template attributes and directives have their Angular 1 counterparts, but overall the Vue templating syntax is a bit cleaner. Especially with a few well-chosen shorthands
- CLI with official templates.
- Single file components that leverage HTML-highlighting.
- Result: Easy to get started with, ok editor support.
The official Vue-CLI has templates for simple JS, Webpack and Browserify projects. The templates have working hot module reloading and automatic linting with a human friendly error overlay. The installation was painless and initial development experience A+.
Syntax highlighting is handled by using .vue files that are HTML files that are transformed into corresponding templates, JS and scoped CSS. This enables developing Vue apps in any editor that support HTML highlighting and analysis.
The single annoying issue I ran into was not being able to get ESlint autofixing working in .vue files. As .vue files need to be preprocessed ESlint is unable to autofix them out of the box. Even though I was able to find an eslint plugin vuefix that worked alone, it did not work with the html plugin that .vue files otherwise require.
- Good official libraries.
- Hard to find other Vue.js 2.0 libraries.
- Result: Less usable libraries than for React.js or Angular 1.
The Vue.js community provides official libraries for routing and state management in larger apps. Both of these seem awesome. So the infrastructure for building even very big apps exists and that should not be a problem.
However, the library economy of Angular 1 and React.js is huge. Usually, whatever you need you can just Google for it and find either a Github repository or a Stack Overflow answer pointing you to the right direction. With Vue.js the situation is very different. There are significantly less well-built and maintained libraries.
Additionally, in case you're successful in finding a suitable library, chances are that it'll work only with the 1.X branch. Vue.js 2.0 is quite new and the differences to 1.X are quite small. Not all repositories are clear on the version they're meant for.
For example, I spent quite while trying to find an implementation of virtualized lists for Vue.js 2.0, which are a must for me when handling longer lists. I was eventually able to find a solution, just to install it and find out it would not work with Vue.js 2.0. Additionally, Vue.js seems to be particularly popular in China, which does not make the job any easier. For example the README of the vuefix eslint plugin is written in Chinese.
I really like Vue.js. It really offers a well-thought out, developer-oriented, and performant front-end stack, where you don't have to spend time every other day thinking if you should rewrite your whole implementation using a new, possibly better state/CSS-in-JS/whatever library. It feels like it has been built by front-end developers to front-end developers with simplicity in mind. Overall, I don't feel that there's anything particularly wrong with any of Vue.js decisions.
I personally could see myself using Vue.js in a project if I would need to build a widget-like app that would be embedded to a web-page. For example, when you have a website that is managed with a CMS like WordPress and you just need to embed something dynamic next to the server-rendered content. When you're trying to do something else than a full-page SPA, React.js does not feel like a good fit. Also, if you're a developer who hasn't yet spent time learning React.js or you just don't like it, Vue.js might be a good fit for you. Especially, if you have to switch a lot between making full-blown SPAs and embedded widgets and you like to have a single tool for everything you do.
Did you enjoy this article?
Give us a clap!