We were discussing about Vue.js in our company Slack last week and whether it would fit to some of our project needs. No one on the #javascript channel had tested Vue and thus no one had anything definitive to say about the framework. I originally heard of Vue from my PHP developer friends who were using Vue together with Laravel. Since then I have been interested in testing it and the interest grew especially after Vue.js 2.0 came out last month. Fueled by our internal discussion I decided to dive in a bit over the weekend when I had some spare time.
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.
Note: My previous JavaScript framework experience is mostly Angular 1 and React, which will show in my reflections.
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.
- Recovering Angular JS developers, whose souls riddle with the agony of coding-in-HTML, can opt-out and use JSX or plain JavaScript.
- 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
However, contrary to Angular 1 Vue.js templates are not actually used as-they-are but are rather compiled into Virtual DOM render functions. Because of this, Vue is very flexible in terms of how you want to represent your DOM. If you're a die hard JSX fan or like to build your DOM using plain JavaScript it is very easy to write your own render functions using JSX or plain JavaScript. Since Vue uses render functions already internally you don't need to do any tweaking to get all the magic and optimization goodness you get with the HTML-based template syntax.
- 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.
However, the competition in the JavaScript framework market is tough. If you're a React.js developer and have already spent the time to learn JSX and core React.js concepts there is not a lot Vue.js can offer. If you don't like the boilerplate or other parts of Redux, you can simply transfer your stores to Mobx and enjoy the magical reactivity that transparent observable wrapping and dependency tracking offers.