The Good and the Bad of Vue.js Framework Programming
If you’ve been following JS framework market trends, you may know that the main contenders in the competition are React and Angular. The latest survey by Stack Overflow confirms React’s supremacy again this year, with Angular used more among professionals. But there is another contender on that list.
jQuery firmly stands as the most used framework, while Angular and React share second/third places
With 15.2 percent, Vue.js is in 6th place. Vue.js exhibited incredible growth in the previous year (229 percent), which is enormous compared to React (34 percent). And with 4.4 million monthly downloads on NPM, it already covers a significant part of a market. So, in this article, we will examine what Vue.js is, its ecosystem, strengths, and weaknesses. We’ll also compare the tooling and features of Vue.js to its competitor frameworks to gain a more objective understanding of its qualities.
What is Vue.js
The Vue.js story begins in 2013 when Evan You was working at Google creating lots of prototypes right within a browser. For that purpose, Evan used handy practices from other frameworks he worked with, and released Vue.js officially in 2014.
In an interview with Evan, he reveals that initially Vue.js was an attempt to take the best of Angular and build a custom tool, but a lighter weight one: “For me, Angular offered something cool which is data binding and a data driven way of dealing with a DOM, so you don’t have to touch the DOM yourself.”
The name of the framework – Vue – is the same phonetically in English as view, and it corresponds to the traditional Model-View-Controller (MVC) architecture. Simply put, view is a UI of an application/website, and the core library of Vue.js focuses the view layer by default. But, MVC doesn’t mean that Vue.js can’t be used with a different architectural approach like the Component Based Architecture (CBA) used in React.
Model View Controller architecture
In its current form, Vue.js, developed by Evan You on a full-time basis, benefited by contributions from community members, and funded mainly by Patreon. Without the financial support of enterprises like Facebook (React) and Google (Angular), Vue still has achieved wide adoption on Github.
Vue.js tooling and ecosystem
In this section, we will provide essential links to Vue.js resources, tools, and documentation. Starting with a new framework requires getting acquainted with its ecosystem, so here’s a summary for you.
Introduction to Vue.js. The first things to get familiar with when starting to use the tool is its web resources, forums, and the framework installation. We’ve mentioned some of them, but for the sake of having everything in one place, the links are gathered here:
Tooling & libraries. Vue has an impressive package of tools for all basic programming needs offered on its main page:
Vue.js official CLI. Command Line Interface used for development and installation of the Vue framework core libraries, as well as third-party plugins.
Development Tools. Browser development tools used for debugging application built with Vue.
Vue Loader. Official loader for webpacks.
Vue Router. Routing and mapping components.
Contribution links. As Vue.js lives thanks to its contributors and funding on different platforms, we will mention them here as well:
As you can see, the ecosystem of Vue is pretty big. Now we are going to talk about using Vue, and what it has to offer as a tool.
The Pros of Vue.js
As any technology that gains popularity, Vue.js programming causes controversy across the community. And there are reasons why Vue became the second most loved framework in 2019. Let’s see what those reasons are.
This point will be as small as Vue itself: the downloaded zip with the framework weighs 18 KB. As a featherweight, the framework is not only a fast to download and install the library, it also positively impacts your SEO and UX.
Virtual DOM rendering and performance
A Document Object Model (DOM) is something you’ll probably encounter when rendering web pages. A DOM is a representation of HTML pages with its styles, elements, and page content as objects. The objects stored as a tree structure are generated by a browser when loading a page.
The HTML DOM tree of objects
When a user interacts with the page, the objects change their state, so that a browser has to update the information and render it on the screen. But, updating the whole DOM is cumbersome. For the sake of speed, Vue.js utilizes virtual DOM: Think of this as a copy of an original DOM that figures out what elements to update, without rerendering the whole DOM. This approach makes page rendering pretty quick and improves application performance.
Performance is one of the key factors that may predetermine framework choice. Actual benchmarks are provided on the Vue comparison page. For example, when testing DOM components bound with data updated, Vue.js seems to be more performant that Angular and React. Of course, it’s far from the leading position where Vanilla.js has nested, and the benchmark includes old versions of frameworks, so you might take this into account. But, the general picture seems to be optimistic.
Part of test results: Vue seems to have troubles with partial data update, being more stable at the rest of DOM operations.
Keep in mind that any performance test depends on the case: In real life, most of the performance comes out of code optimization and quality.
Reactive two-way data binding
Another benefit in DOM manipulations is two-way data binding inherited by Vue from Angular. Two-way data binding is a connection between model data updates and view (UI). Bound components contain data that can be updated from time to time. With the help of two-way data binding, it’s easier to update related components and track data the updates.
The data is updated both in bound components
In Vue, the bound data is updated reactively as are DOM objects, which is excellent for any application requiring real-time updates. Developer-wise, Vue’s reactivity will make data updating clearer and easier to complete. There are some rules applied to make reactivity work, which we’ll describe in the cons section.
Single-file components and readability
Splitting the application code is actually an architectural approach called Component Based Architecture (CBA), and it’s also utilized in Angular and React. Such an architectural approach has lots of benefits:
Component reusability. Encapsulated components are basically chunks of code that can be reused as templates for similar system elements.
Code readability. As all the components are stored in separate files (and each component is just a single file), the code is easier to read and understand, which makes it easier to maintain and fix.
Good for unit-testing. Unit-testing is a QA activity aimed at checking how the smallest parts of the app work on their own. Having components greatly simplifies this task.
Integration capabilities and flexibility
Solid tooling ecosystem
During its 5 years of existence, Vue.js has gained a powerful set of tools to work with. The upcoming release of Vue CLI 3 is a complete rewrite that will deliver heaps of new functions. Vue CLI 3 will support Babel and TypeScript out of the box, provide unit testing, end-to-end testing tools, and a plugin installation system. And if that isn’t enough, Vue also has its own browser debugging tools, server renderer, and state manager.
Easy to learn
The most popular code editors like Sublime text, Visual Studio, and Atom support Vue, which makes trying it out easier. Newcomers are widely supported by the community that actively answers questions on Discord chat and forum. Additionally, you will find countless guides and courses right on the starting page of Vue.js.
We should give credit to Vue.js documentation. Whether you are a newbie who’s going to learn the framework, or you’re a tech-savvy dude searching for an issue reference: Vue documentation’s got your back here. It’s well-structured and covers all the possible topics, precisely describing everything from installation to more in-depth things like reactivity and scaling of the app. More importantly, there is also a section comparing Vue with other JS frameworks, and naming things that those have in common (e.g. virtual DOM in Vue and React, template syntax in Vue and Angular).
As we’ve mentioned, Vue.js exists thanks to its community. Because of that, community members are pretty active both in the Discord chat and forum. As evidence of community activities, just look at the number of Vue.js tags on Stack Overflow that now numbers more than 41 thousand.
Vue.js seems to be actively discussed in development community
But, there is always the other side of the coin. So, now let’s look at the Vue.js weak points.
The Cons of Vue.js
The adoption of Vue across enterprises like Xiaomi and Alibaba helped popularize the framework and created demand in the labor market. With Vue.js increasingly popular in China, a significant part of its content and discussions is, not surprisingly, in Chinese.
The Chinese Great Firewall makes things a little different in that country, because lots of popular resources are currently unavailable there. That makes learning and using React or Angular more difficult. Vue comes as a more preferable variant.
So, when searching for Vue content, you will obviously face forum discussions, plugin descriptions, and instructions in Chinese. This may be a problem for English-speaking-only engineers.
We have mentioned the two-way data binding implemented in Vue to manage DOM updates. While it’s a handy tool to keep components in sync, there is one issue concerning the way the reactivity system, as it’s called, works.
In plain language, the Vue.js app consists of components that a user can interact with. Each component has its watcher that rerenders the data each time a user triggers the component. The reactivity system rerenders only those chunks of data that were triggered. The thing is that it’s not that smart and often makes mistakes during data reading, so it requires data to be flattened.
However, this is a known issue and it is addressed in Vue’s documentation, providing guidance on how to set up reactivity properly.
Lack of support for large-scale projects
Vue.js is still a young framework. Its community and development team size is still incomparable with more mature Angular. Neither does it enjoy financial support from large enterprises. To be adopted in the large scale-projects, the technology should be stable and strongly supported, so that issues can be solved quickly. While Vue doesn’t have that many problems with that, and there is even a demand coming from enterprises like IBM and Adobe, it is still used in relatively small projects.
Risk of over flexibility
We have mentioned flexibility, which is a controversial quality in terms of a big project. Giving your development team too many options might result in philosophically different programming approaches battling inside one team. And, as a result, it is an ultimate nullifier instead of a working software.
While the ecosystem is pretty wide, and there are all the required tools to start developing with Vue, it’s still not as big as React or Angular. To be more precise, just compare the number of plugins available for React and Vue.js: The difference is in hundreds. Existing plugins that can be used with other frameworks are often not supported as well, but that can be just a matter of time.
Lack of experienced developers
Vue.js is a relatively young technology that just started gaining popularity. But it seems we have to wait a couple of years until its mass adoption with the labor market filled with experienced Vue.js developers. Currently, the search for experts can be accomplished via a dedicated platform called VueJobs.
What is the best fit for Vue.js?
Considering all the conceptual and technical aspects of Vue.js, you might question where it might fit the best. Besides its direct purpose, building one-page applications and working on web pages, it’s also suitable for a number of tasks.
Dealing with prototypes (without too much skill)
First and foremost, Vue.js was designed for prototyping. With the proper data-binding, it’s also great to handle a lot of animations, interactive elements, and graphics. Learn your front-end, install Vue CLI, and you’re good to go with clickable prototypes.
Keeping focus on UI
Vue.js keeps a solid focus on working with UI, as it requires only HTML, CSS, and JS to work with it, without too much Vue-specific stuff. For example, IBM used Vue as a front-end framework for its Hybrid Cloud, because of its light weight, gentle learning curve, and reliance on HTML, CSS, and JS.
Even considering Vue.js’s cons, it still can be used in large projects. Most of the issues are addressed in the documentation, so it’s a question of search. And for those who are already interested, we suggest to staying tuned for the upcoming update of Vue.js 3.
This article is a part of our “The Good and the Bad” series. If you are interested in web development, take a look at our blog post on