I'm a big fan of Vue.js.
Every time I say that, the first response is, of course, "What do you like about Vue over React, Angular, or Ember?" Many people these days feel overwhelmed by how quickly JavaScript moves, so it's understandable that yet another JavaScript framework gives them pause.
This post is not intended to say that using other frameworks is bad, or that you should switch all your existing projects to Vue. On the contrary, many incredible apps have been built by teams using React, Angular, Ember, and more! Each framework has unique pros and cons, and it's important to consider what's important to you and your team before settling on one.
I started using Vue when I was doing consulting work, before I joined the imgix team. Because of the nature of consulting, I'd actually worked on apps built with both Angular and React before I heard of Vue. Like many people, I was a bit dubious about the advantages of component-based JavaScript architecture at first, but quickly came to enjoy the more structured approach to building and maintaining front-end applications. All of these frameworks let developers build complex frontend apps faster and more maintainably than ever before.
Vue.extend({
template: `
<div class="counter">
<h1>Current count: {% raw %}{{count}}{% endraw %}</h1>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
`,
data: function() {
return {
count: 0
};
},
methods: {
increment: function() {
this.count += 1;
},
decrement: function() {
this.count -= 1;
}
}
});
A simple counter component, showing Vue’s basic syntax.
One of my favorite things about Vue is its small API surface area. This is awesome for a number of reasons. First, it means Vue is easy to learn. That's great for onboarding new developers to a project. In my experience, developers new to Vue are often able to be quite productive after only a day or so. It also means that once you are familiar with Vue, you're able to hold more of its API in your head, which means less time spent repeatedly looking things up in docs, and more space for your application's business logic.
As of version 2, Vue weighs only 23KB minified + gzipped. That's just over half of React's 44KB, and significantly smaller than Angular at 125KB or Ember at 110KB. As the web trends towards smaller, faster apps, those size differences add up quickly. The Vue team has also shown a commitment to making sure all the tools in the Vue ecosystem stay small and fast. With Vue 2, you can even separate the template-to-virtual-DOM compiler and runtime. This means that if you precompile your templates (as many people do now), the base Vue package sent to the browser can weigh as little as 17KB.
Vue 2 is also much more performant than version 1, improving initial rendering speed and memory consumption by ~2-4x in most scenarios. Of course, internal improvement is great, but largely meaningless if Vue is slower than other frameworks. Thankfully, that's not the case! In most scenarios, Vue outperforms React by a fair margin.
Vue.extend({
template: `
<div class="rectangle">
<h1>Total area: {% raw %}{{area}}{% endraw %}</h1>
<label>Width</label>
<input type="number" v-model="width">
<label>Height</label>
<input type="number" v-model="height">
</div>
`,
data: function() {
return {
width: 10,
height: 10
};
},
computed: {
area: function() {
// Automatically recalculated only when `this.width` or
// `this.height` changes.
return this.width * this.height;
}
}
});
A simple rectangle calculator component, showing Vue’s computed property syntax.
Vue is unique in that it is one of the only major JavaScript frameworks that's independent from a technology company. Its creator, Evan You, works on it full-time thanks to Patreon support. This means that the Vue team is free to focus on the things they think are most important, without corporate oversight dictating the direction or resources allocated to the ecosystem. Even though it's a relative newcomer to the JavaScript framework landscape, Vue has a thriving ecosystem. The first-party tools include a CLI for scaffolding apps, router, validator, and AJAX tools, Vuex (Redux/Flux-like state management), dev tools, and more.
What initially drew me to Vue is how easy it is to integrate into existing systems. Unlike many other JavaScript frameworks, Vue works equally well for building out entire single-page applications, or for sprinkling components in to existing apps (even server-rendered apps). This, combined with how easy it is to learn, meant I was able to try it out without having to wait for a greenfield project. Vue’s comprehensive documentation and examples mean many developers are able to jump in immediately; all it requires is a basic understanding of JavaScript syntax.
If you've been thinking about trying Vue, now is a great time. It's becoming increasingly popular, and version 2 has really made it a flexible, powerful option.
