Hey! Have you heard about Vue.js?
NOTE: This article was written in 2017. Like many frameworks and libraries for the web, Vue.js has grown and evolved since then. You may want to find something more current.
Vue.js, or simply Vue is yet another web application framework for building single-page applications (SPAs). It is small in size and renders fast, beating Angular 1, Angular 2, and React (as well as others) under a variety of conditions.
In this discussion “Vue” will be used generically, but specifically it is Vue.js version 2.1 or greater (at the time of writing 2.2 was just released) that is being referred to and the Vue ecosystem as a whole. There are some notable differences between the older versions of Vue, but this is not a history overview so those differences will not be discussed.
What is Vue?
In its own words (from its introduction):
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Getting Started
Vue has a variety of resources to help you get started: A useful introduction guide, excellent API documentation, and a curated list of other related resources (plugins, tutorials, podcasts, examples, and more) called “Awesome Vue”. Support is available through the official forum and Gitter chat.
Packages Overview
Technically the Vue package is just the view layer of a web app. However, “Vue” can also be thought off as an ecosystem for web development similar to how React is just the view layer, but also interchangeably used to discuss the broader ecosystem.
As part of the ecosystem Vue does have a pair of official companion packages for routing, Vue Router, and for state management, Vuex. These packages are referred to as “Core Plugins”. The use of the core plugins is completely optional, but using the three packages (Vue + core plugins) together provide a full solution for building complex applications.
If building a simple app then a developer may select only the Vue package. If the scope increases then one or both of the core plugins can be added. If the developer needs different functionality then packages from the greater community can be selected to match the app’s needs. It is this modular approach that helps keep Vue scalable, flexible, and non-monolithic.
Comparison with other SPAs
The template syntax used in Vue is heavily influenced by Angular 1 (by its own admission) and has some similarities with Angular 2+ (shorthand syntax for bindings and events for example). The data flow for components is reactive and takes inspiration from Elm. Vuex takes cues from Flux/Redux and has similar patterns.
An in-depth comparison of frontend frameworks is available here. The comparison covers React and Angular 1 & 2, Ember, Knockout, Polymer, and Riot. A detailed performance comparison (from a 3rd party) is available here.
Ultimately Vue comes off as a blend of many other frameworks — in a good, not Frankenstein’s monster sort-of way — and has a few of its own distinct traits.
Notable Features
Notable features in that they are particularly different from React and Angular 2.
Single File Components
Vue has a specialized type of file called “Single File Components” (SFC) which use the .vue extension. As the name suggests the required parts of a component occur within the same file: HTML template (<template> tag), JavaScript (<script> tag), and CSS styles ( <style> tag).
The SFC style of files is optional, but the vast majority of examples use them. At the very least it pays to be comfortable with reading them and understand how they work.
Support for the files are handled through plugins for bundlers such as Webpack, Browserify, and Rollup. Since a bundler is already in use to support SFC more plugins can be added to support multiple languages within the various tags:
- templates can be in HTML or Pug/Jade;
- scripts can be in ES5, 6, or 7 (using Babel) or TypeScript; and
- styles can be pure CSS, SASS/SCSS, or Stylus.
Other languages can also be used assuming an appropriate plugin is available for the bundler.
By using .vue files it becomes easy to track related templates, code, and style. The files are also convenient to edit.
A variety of editors, (Atom, Brackets, Sublime, Visual Studio Code, and others) support full syntax highlighting via plugins. A list of many of the available plugins is available from Vue Awesome.
Transitions
Vue has built-in support for rich transitions. Wrap a component with the <transition> component in the template markup and add a name attribute. The transition component will automatically apply CSS class names to the component to handle various stages such as entering and exiting. Define your CSS classes to control the specific behavior; sliding, fading, easing, etc… whatever CSS can do can be applied. Vue recommends using some of the transitions readily available in Animate.css. If CSS is not powerful enough then JavaScript can be used to define the transition and animation libraries such as Velocity.js.
The transitions can be applied from small elements (adding/removing list items) to large (the router view) and everything in between. The transitions can be made reusable to keep things DRY.
The items above are referred to as Transition Effects and Vue distinguishes those from Transitioning State.
Transitioning state is updating the state of an element on screen (instead of add or removing elements). This could be updating the numbers on a timer, transitioning colors, or scaling just to name a few. Transition effects can be applied to these items as well.
More information on Transition Effects is available here and Transitioning State is available here.
Hybrid Applications
The major frameworks of React and Angular have projects that leverage them to build mobile applications. Angular 1 and 2+ are used in Ionic 1 and 2 respectively, Angular 2+ is used in NativeScript, and React is used in React Native.
Vue is also being integrated into a library for building native mobile applications: Weex. While Weex may not be as far along as its competitors, it does have major backing in the form of Alibaba (the world’s largest e-commerce company) and has recently become an incubator project of the Apache Software Foundation.
While this may not address immediate concerns it does speak to adoption of Vue and future uses.
Tools
Vue Project Generator
Vue provides a command line, vue-cli, tool to help scaffold your project and leverages a variety of project templates to get started quickly using Webpack, Browserify, no build system, or use your own custom template.
Vue Developer Tools
Vue has a developer tools extension for Chrome and is available in the Chrome Web Store and the source is also available.
The developer tools support inspecting the component tree, viewing the data objects passed to the components, tracking the events raised by the components, and viewing the state of the Vuex global store.
A powerful feature is that the dev tools will take snapshots of the Vuex global store and allows the developer to move through those snapshots for time-travel debugging. Applying a snapshot will update the app in real-time and notify the components of data changes. This could be used to debug before and after an event or REST call that modified the application state.
Other Concerns
Type Safety
React can be statically checked using Flow. Angular 2 uses TypeScript. Type safety can be important in Enterprise applications and if this is a make or break feature than that’s just fine. Vue has TypeScript definitions and declarations that cover the base view package and the core plugins of Vuex and Vue Router.
Continued Development
React is backed by Facebook. Angular 2 is backed by Google. And Vue has… Evan You? Mr. You is the creator and he is now employed to work full time on the framework and is supported by donations from major organizations which he discusses in his blog post “Vue in 2016”. With the fact that Alibaba selected Vue for their Weex project the signs seem supportive of ongoing development.
My Thoughts
I’ve tried to stay largely neutral and objective up to this point.
I really like Vue.
Some caveats though: I have only built a small to medium project with Vue. I didn’t use type safety features and the app consumed files via XHR, but didn’t send any data back up to a server (it is a “read only” app).
Beyond the base Vue package I used the core plugins (Vuex and Vue Router); .vue files with HTML, ES6, and SCSS; the <transition> component for a quick fade transition when routing; and the Vue Developer Tools extension for Chrome.
For the build process I used Rollup, the Vue plugin for Rollup (rollup-plugin-vue), and the Vue template compiler for compiling the view templates during the build process. The process ended up being convoluted and I had to use some work arounds. On the rollup-plugin-vue homepage it actually states, at the very bottom: “This plugin is best for authoring component modules and plugins. Use webpack and vue-loader for authoring Vue.js applications.” Wish I had noticed that sooner.
Overall things went pretty well for development even if I ended up with a less than ideal build process. I’ll migrate over to Webpack and Vue Loader at some point.
Issues I had
- I probably should have paid closer attention to the transition documentation. I made the choice of using a subtle fade when switching views instead a more complex transition because it wasn’t as straightforward as I liked (given the effort I was willing to do for a bell and whistle feature) so I moved on quickly.
- Learning the patterns for working with Vuex slowed me down, but I imagine those with experience using Redux would have an easier time. It wasn’t difficult per se, but different than Angular.
- I didn’t use the command line scaffolding tools opting, instead, to figure it out on my own for greater understanding of the build process. There were a few frustrating points along the way and the Rollup/Vue plugins don’t seem as if they are as mature as the Webpack and Browserify counterparts. Given I didn’t notice the cavet above about not using rollup-plugin-vue for applications right away certainly compounded the problems. I likely would have just used Webpack from the start.
Things I like
- It’s fast to get up to speed. I found it quick and largely painless to get going. As it says on the homepage it’s approachable: “Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!”. I found that to be true.
- I enjoyed using the Single File Components (aka
.vuefiles). It keeps the folder structure clean and helps ensure that I’m focused on a particular component when writing styles without the annoyance of jumping between files (but hey there is still jumping around within a file). - It renders quickly. It seems fast, the homepage claims it’s fast (“Blazing Fast Virtual DOM”), and benchmarks confirm it.
- It’s light and organized in terms of how programming in it feels: easy and straightforward object definitions. This item is a bit more subjective, but try it out and I think you’ll agree — or at least it’s not worse.
- It’s small in file size at 23kb. In comparison a tree-shaken Angular 2 still comes in at 50KB with a regular size at over 110KB. React comes in around 40KB. See this breakdown for more details.
- It’s flexible. Optional core plugin libraries and various community options to choose from allow making the right choices for the right situation.
- The Vue Developer Tools are pretty nice and being able to look at the component tree and emitted events is useful. Because the app was a read only and all of the REST calls are done on load I didn’t need the time traveling debugging much (there was only one minor state property that changed during use), but I’m excited about using that feature in the future.
I think Vue is a great framework and it cherry-picked most of my favorite parts of Angular 1 and 2 and Backbone while it also applied many lessons learned from React, Flux/Redux, and Elm.
If a client, boss, or power-that-be said “Let’s use Vue” I’d have no qualms about doing so. Vue is definitely trending in popularity so it might not be too surprising to hear that phrase.
The biggest concern is the community is somewhat smaller and that has implications in terms of productivity for reusing packages, but the community is growing and I’m hopeful. That is not to say that it is a big concern. It’s actually a relatively minor one. There are a lot of packages and support is available — just less than for React and Angular.
It might be time to try Vue.js yourself.
Next Steps
You might want to start by looking at some official examples (or edit them, they are JSFiddles) or view the obligatory TodoMVC example and code, read the guide, or start building your own project. And don’t forget about all of the resources available at Vue Awesome.
You could even take courses from Laracast or Udemy. (Note the courses cost money and I haven’t taken them.)
