While JavaScript is fully-fledged on its own, its ecosystem means even more than the language itself. Tools like frameworks make a software engineer's life much easier by providing the basis for smoother development. If the language is considered the alphabet, the framework can be thought of as the phrasebook, enabling you to construct sentences and communicate.
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 over Angular again this year
Top ten most popular web frameworks and technologies in 2022. Source: StackOverflow
With 18.82 percent, Vue.js is in 6th place among the most popular frameworks and technologies. And with 3.4 million weekly downloads on NPM, it already covers a significant part of the 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.
Vue.js is a progressive framework for JavaScript used to build web interfaces and single-page applications. Besides web interfaces, Vue.js is also used for desktop development with Electron framework and for building apps for Android and iOS with NativeScript, Ionic (read about pros and cons of Ionic mobile development), Framework7, Vuetify, and other mobile UI frameworks. The HTML extension and the JS base quickly made Vue a favored front-end tool, evidenced by adoption by such giants as Adobe, Behance, Alibaba, Gitlab, and Xiaomi.
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, a view is a UI of an application/website, and the core library of Vue.js focuses on the view layer by default.
Model-View-Controller architecture
In its current form, Vue.js, developed by Evan You on a full-time basis, benefits from contributions from community members and gets sponsorships via GitHub Sponsors and OpenCollective. 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 are its web resources, forums, and 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 is used for the development and installation of the Vue framework core libraries, as well as third-party plugins.
Development Tools. Browser development tools are used for debugging applications built with Vue.
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 is in the top ten most loved frameworks. Let’s see what those reasons are.
Tiny size
This point will be as small as Vue itself: The downloaded zip with the framework weighs 18 KB. As a featherweight, it is not only fast to install but 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 represents an HTML page with its styles, elements, and content as a tree structure of objects (nodes). The DOM tree objects stored as a tree is generated by a browser when loading a page.
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 node tree. This approach makes page rendering pretty quick and improves application performance.
Performance is one of the key factors that may predetermine framework choice. Tests show that Vue.js is 22 percent better in memory allocation, 19 percent faster at startup time, and 36 percent faster at DOM operations than React, which initially gave Evan You an idea of a virtual DOM to optimize app performance.
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.
Reactivity system and data binding options
Data binding is a connection between the data model (data source) and the view DOM or HTML template). One-way data binding allows information to flow in one direction, from model to view or vice versa. In the first scenario, changes to the source automatically update the DOM, but it doesn’t work in reverse since the DOM has read-only access to the model.
Two-way data binding enables data exchange between model and view in both directions. In other words, the model also listens to the events on the DOM and any updates on one side instantly reflect on the other. This approach removes boilerplate code and simplifies app development. At the same time, it’s harder to debug and more error-prone which makes the bidirectional flow a bad fit for large projects.
Vue comes pre-packaged with data binding — its reactivity system automatically keeps in sync model and view layers. By default, Vue supports one-way flow. However, developers can easily switch to a bidirectional scenario by using the v-model directive. So, you can choose between two options depending on your project needs (or personal preferences).
Single-file components and readability
A Vue application/web page is built of components that represent encapsulated elements of your interface. Components can be written in HTML, CSS, and JavaScript without dividing them into separate files.
Splitting the application code, called Component Based Architecture (CBA) is also utilized in Angular and React. Such an approach has lots of benefits:
Component reusability. Encapsulated components are chunks of code that can be reused in similar system elements.
Code readability. Since 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
An important aspect of any emerging technology is the ability to integrate with existing applications. With Vue.js it’s as easy as pie because it relies only on JavaScript and doesn’t require any other tools to work.
Vue also allows you to write the templates as you wish: using HTML, JS, or JSX (JavaScript syntax extension). Due to its components and lightweight nature, Vue can be used in nearly any project. And, we’re happy to report that switching from React or Angular won’t be a big problem, as Vue’s internal organization is basically a mix of the two.
Solid tooling ecosystem
During 8 years of existence, Vue.js has gained a powerful set of tools to work with. The foundation for the Vue ecosystem is Vue CLI (Command Line Interface) which comes with heaps of out features to speed up development. It supports TypeScript out of the box and provides end-to-end testing tools and a plugin installation system. And if that isn’t enough, Vue also has its own
Pinia, the official state management library for Vue that replaced Vuex,
and more.
Smooth learning curve
A tool can reach mass adoption only when it’s easy to understand, which is the case with learning Vue.js. All you need to start off is basic knowledge of HTML, CSS, and JavaScript, of course. Vue doesn’t require in-depth knowledge of libraries and additional technologies like JSX in React and TypeScript in Angular. All you need to start off is basic knowledge of HTML, CSS, and JavaScript, of course.
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.
Concise documentation
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 two-way data binding 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).
Community support
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 97 thousand.
Vue.js is actively discussed in the development community
The Cons of Vue.js
There is always the other side of the coin. So, now let’s look at the Vue.js weak points.
Language barrier
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 for local developers more difficult. Vue comes as a more preferable variant.
So, when searching for Vue content, you will face forum discussions, plugin descriptions, and instructions in Chinese. This may be a problem if you don’t know this language.
Lack of support for large-scale projects
Vue’s community and development team size is still incomparable with more mature Angular or React. Neither does it enjoy financial support from large enterprises. To be adopted in 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 and there is even a demand coming from enterprises like IBM and Adobe, it is mostly 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 working software.
Limited resources
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 the hundreds. Existing plugins that can be used with other frameworks are often not supported as well.
Let’s stay optimistic, though. New plugins for Vue are constantly appearing and even big companies are involved in this process. For example, in 2022, Microsoft released a Power BI component to be embedded in Vue applications.
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 Vue used for?
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 many 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 the focus on UI
Vue.js keeps a solid focus on 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 lightweight, gentle learning curve, and reliance on HTML, CSS, and JS.
Integration demand
If you have an existing application, and you want to add some interactivity to it, Vue can help with that. Since it’s based on JavaScript, it can be easily integrated into any project using JS. Moreover, it’s compatible with many back-end technologies and frameworks like Laravel, Express, Rails, and Django. Also, add here ease of learning to cover the aspect of team training.
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. Among global players utilizing Vue to build their websites are Grammarly, Upwork, Gitlab, Trivago, Nintendo, and even Google. This list is far from complete and evidently to be continued.
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
