For web development, when all other considerations are equal, we recommend choosing Vue.
High quality documentation leads to better results – less time is spent wrestling with the framework or head-scratching about why something is working the way it is, and more time is spent making your project its best.
The Vue documentation is well written, comprehensive, and instructive. In addition to a Guide which introduces the various concepts of Vue with helpful examples, looking under the hood is encouraged and supported via a full documentation of the API.
Vue then goes the extra mile by providing a style guide which, for an organization which already has an established style guide, is most useful in illuminating certain potential pitfalls when working with Vue, as well as providing some simple examples and recipes.
Vue can help eliminate some common patterns of code that lead to poor performance, making your application faster and more responsive.
Vue uses a virtual DOM implementation. There’s a great deal to be said on this topic, and this should be considered an extremely pared-down summary.
While reading and writing to the real DOM is a fast and inexpensive operation, the knock-on effects – layout re-calculation and repainting – are slow and expensive operations. Vue, by using a virtual DOM and efficient diffing algorithm, updates as little of the real DOM as possible, and batches such updates, to allow for the minimum of costly knock-on effects, improving rendering time and responsiveness.
While directly manipulating the DOM can be faster if done carefully and correctly, in practice the dreaded WRW (Write-Read-Write) anti-pattern is all too common, leading to multiple costly repaints. A virtual DOM eliminates this issue.
A reactive framework automatically handles some of the work of keeping the UI up-to-date with new values, allowing your project’s developers to focus on business logic rather than presentation.
Like the React framework before it, Vue is reactive. This means that, with a little setup work, changing values in JS can create seamless, effortless changes within the UI that relies on those values. Instead of needing to imperatively manipulate the DOM to make updates, simply change the reactive property, and the node that relies on it will be re-rendered with the updated value in place.
You can begin integrating Vue into your existing project right away and begin experiencing its benefits, without needing to change the way the whole application works all at once.
Vue is fairly lightweight, and can be attached to a single given DOM node, even using the existing DOM structure as it’s template if it finds one, allowing Vue to take over an existing page and progressively enhance it.
This makes it a good candidate not just as the backbone of a new project, but also for introducing into an existing project to offer enhanced functionality in one small area of the application and slowly expanding from there.
Vue has a thriving ecosystem containing many elements that can be added to your application to add new functionality; and Vue is flexible enough to allow your developers to extend and enhance the way it works.
Vue focuses on, as the name suggests, the view aspect of the familiar MVC model (although Vue actually subscribes to the MVVM pattern). Other modules within the Vue ecosystem focus on routing (Vue-Router), state management (Vuex), and extend Vue.
There are many other Vue plugins within a healthy developer ecosystem, and creating your own plugins is easy and well documented.
Single File Components
Vue supports organizing structure, logic and styling together in the same file, enabling better organization of your application’s code that leads to less time wasted tracking down what piece of code is doing what in your project.
Single File Components are useful units for organizing the structure, logic and styling of a reusable component into an atomic form, and make it much easier to reason about the operation and composition of a given component compared to a more traditional approach. Separation of concerns is maintained without requiring the elements of a given component to be spread across many different files.
This approach borrows many of the best ideas of the standardized Web Components, without that standard’s compatibility limitations.
By using HTML and related familiar syntax, your project’s developers can start writing readable, easily understood application structure from day one.
In place of React’s JSX, or yet another DSL, Vue allows you to use the familiar syntax of HTML in your templates. Similar to angular, directives live as attributes on your elements, and custom elements can be declared, imported and used like standard html tags. It’s elegant and effective.
And if you’re a fan of Pug, you can use that instead (or in addition to) your HTML templates, eliminating the verbosity of HTML without losing any of the familiar syntax.
Vue does allow falling back to directly writing render functions, if for some reason your use case requires it, as well as supporting JSX if desired.
Vue comes packaged with a suite of tools that give your project’s developers a hand in getting your application code built and running, boosting productivity.
In order to take advantage of some of the features of Vue, you need a toolchain to build the scripts, extract the various components, and tie everything together. Vue comes with toolchain support out-of-the-box via the vue-cli, which even provides a limited web-based GUI for customizing certain aspects of your project and adding community-provided plugins.
Under the hood, vue-cli relies on webpack, and provides guidance and tools for interacting with it if the standard configuration isn’t sufficient for your project’s needs.
Vue can be used to create native mobile applications, and take advantage of the functionality of the platform that might not be available to web applications, like the accelerometer or push notifications.
Via Vue Native, developing cross-platform mobile applications using Vue is straightforward and powerful. Under the hood, Vue Native is really React Native, providing a wrapper around the latter’s APIs, so all of the same Pros and Cons that apply to React Native apply here, with the significant pro that the continued development on React Native directly benefits the Vue Native platform as well.
Vue is widely used in web application development. Using technologies that are widely accepted reduces future project risks that components will not continue to be maintained or accessing knowledgeable developers for maintenance will become prohibitively expensive or difficult.
Companies like Gitlab, Nintendo, Facebook and Netflix make use of Vue in their development toolset.
Using an open source technology eliminates the future risk that a vendor will change licensing terms or go out of business which could lead to unexpected costs to transition to a different technology.
Vue is MIT licensed. The MIT License is one of the most permissive open source licenses, allowing you to transform the original source, bundle it with your own application in any form, and does not require open sourcing the resulting application. The only requirement is to include the license and copyright notice originally bundled with the source code, making software under this license an excellent choice for inclusion in commercial products.