Email: sales@altexsoft.com

Phone: (877) 777-9097

Request for Proposal
imgonline-com-ua-Resize-jFKczVwLxu

The Good and the Bad of Vue.js Framework Programming

Reading time: 10 minutes

While JavaScript is fully-fledged on its own, its ecosystem means much more than the language itself. Tools like frameworks make a developer’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 the developer 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 again this year, with Angular used more among professionals. But there is another contender on that list.Most popular web frameworks roster

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.

Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue.js is also used both for desktop and mobile app development with Electron framework. 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, 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.

MVC Architecture scheme

Model View Controller architecture

Source: best-practice-software-engineering.ifs.tuwien.ac.at

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:

Visit Vue.js official website

Introduction guide

Join the community on the forum

Use Discord chat to keep in touch with community members

Vue.js page on GitHub

Install Vue.js via an NPM package manager

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:

Patreon

Open Collective

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.

Tiny size

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.

Virtual DOM tree The HTML DOM tree of objects

Source: W3Schools

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.

Framework benchmarks

Part of test results: Vue seems to have troubles with partial data update, being more stable at the rest of DOM operations.

Source: stefankrause.net

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.

Two-way data binding explained

The data is updated both in bound components

Source: theprogrammingtree.blogspot.com

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

Every piece of your future application/web page in Vue is a component. Components represent encapsulated elements of your interface. In Vue.js, components can be written in HTML, CSS, and JavaScript without dividing them into separate files.

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

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). Between 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 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

A tool can reach mass adoption only when it’s easy to understand, which might be the case with learning Vue.js. To start coding, Vue doesn’t require in depth knowledge of libraries, JSX, and TypeScript, as is often the case with other front-end technologies. 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 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).

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  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

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 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.

Reactivity complexity

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.

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 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.

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 in 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. 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

The Good and the Bad of Angular Development

The Good and the Bad of JavaScript Full Stack Development

The Good and the Bad of Node.js Web App Development

The Good and the Bad of ReactJS and React Native

The Good and the Bad of Swift Programming Language

The Good and the Bad of Selenium Test Automation Tool

The Good and the Bad of Android App Development

The Good and the Bad of .NET Development

The Good and the Bad of Ranorex GUI Test Automation Tool

The Good and the Bad of Flutter App Development

The Good and the Bad of Ionic Development

The Good and the Bad of Katalon Automation Testing Tool

The Good and the Bad of Java Development

The Good and the Bad of Serverless Architecture

Add a comment

Comments

avatar