Pros and Cons of Developing Web Platforms With Vue.js

If you were to pick up your phone right now and conduct a search for “best JavaScript frameworks,” most of your search results would list Vue.js in their top 10. As JavaScript frameworks have become imperative in the world of web development, Vue.js has enjoyed a strong position as one of the most popular frameworks for developing web platforms.

Meanwhile, there is still some contention about the merits of Vue.js for your websites. In this article, we will examine the benefits and disadvantages of Vue.js for web platforms.

Introduction to Vue.js

Vue.js is an open-source JavaScript framework created by Evan You, a former Creative Technologist for Google. Probably owing to this, Vue.js appears to have been influenced in some aspects by Google’s Angular (in the use of a virtual DOM, for instance). Vue is mainly used to build user interfaces and single-page applications for desktop and mobile devices.

Vue.js currently has almost 3 million weekly downloads on NPM, nearly 200K GitHub stars and a rapidly-growing community of contributors who maintain and continuously develop the framework. Vue’s most significant selling point is its incrementally flexible architecture meaning it can gradually integrate additional markup to your HTML and progressively adapt to the developer’s needs.

Having acquired this much background, let’s examine the benefits of Vue.js.

Vue.js’ Pros

Size

Vue.js’ featherweight nature is one of the major pros of the framework. The downloaded zip with the framework weighs only 21kb. This makes for lightning-fast downloads and performance.

User-Friendly

Vue.js is widely known for being one of the easiest JavaScript frameworks to learn and work with. If you already know HTML, CSS, and JavaScript, all you need is to study the Vue.js guide, and you’re good to go. Knowledge of additional programming languages or libraries is not required. This makes Vue.js especially popular with beginner developers.

Vue.js has a Chrome and Firefox plugin, so you can start using it right from your browser.

Simplicity

Another benefit of Vue.js is that it allows developers to write as little code as possible to develop entire interfaces and applications. It was built to offer the best parts of Angular and React but with more simplicity.

More on simplicity, Vue.js has a well-defined architecture and simple structure that allows developers to add it to their web projects easily.

Component-Based Architecture (CBA)

In Vue.js, each piece of your web page is a component – elements of your interface encapsulated in a single file. So, all your HTML, CSS, and JavaScript are saved as one file. This approach has the following benefits:

• Reusability

Components can be reused as templates for similar system elements.

• Readability

Since the components are separated, they’re easier to read and maintain.

• Unit-testing

Unit-testing analyzes how the smaller parts of an app work on their own. Components help simplify the process.

Virtual DOM

A Document Object Model (DOM) represents HTML pages with their style, elements, and content as objects. When a user interacts with the webpage, the objects’ states change, requiring the DOM to be updated and re-rendered.

Without a virtual DOM, all the elements of the DOM would be re-rendered. This wouldn’t be an issue if the process wasn’t cumbersome and didn’t slow down the page. In contrast, a virtual DOM figures out which elements or objects have changed, then updates and re-renders only those elements. Thus, page rendering is much quicker and improves application performance.

Vue.js’s virtual DOM rendering speed and efficiency put it above Angular and React as a JavaScript web frameworks benchmark released in 2018 revealed.

Integration

Vue.js has exceptional integration capabilities. Since it only requires JavaScript, it does not require additional tooling to integrate into other applications' built-in JavaScript.

Vue.js CDN is another addition to the Vue.js toolset that expands its capabilities. Vue.js CDN comes with tons of third-party libraries and components that you can start using without setting up nodes and npm. All these ensure you can incorporate Vue.js in existing apps.

Solid Tooling Ecosystem

Since Vue.js’ inception, it has inculcated an impressive array of tools for any team of developers. Vue CLI 3 was beloved among Vue.js developers for introducing many more functions and features such as support for TypeScript and Babel out of the box, unit testing, and a system for plug-in installation.

Vue.js’ Cons

Vue.js is an impressive technology that is rapidly becoming a first choice for many developers around the globe. It certainly has immense benefits for a wide variety of projects. However, it is not without its demerits. The following are some of the disadvantages of Vue.js.

Overly Flexible

While its level of flexibility is a much-touted benefit of Vue.js for building light, single-page applications, and websites, it becomes a disadvantage when tackling larger projects. In addition, giving your development team excessive options is a way to trigger a “war of philosophies”, with several individuals having different preferences for reaching the same goal.

Lack of Scalability

Vue.js is an open-source JavaScript framework backed mostly by donations within the community of developers and companies employing the framework in their projects. This lack of stable support from large organizations means Vue.js lacks support for large projects. While big names like Adobe and IBM are starting to use Vue.js, it’s still in relatively small-scale projects.

Overly-Complex Reactivity

Vue.js’ approach to managing virtual DOM updates makes for better performance. However, the system (known as reactivity system) backs Vue.js into a tight corner on many occasions. Although innovative, the system makes mistakes sometimes during data reading and requires data to be flattened.

Thankfully, Vue.js is aware of the issue and addresses it in its documentation.

Limited Resources

While Vue.js has gained additional plugins and tooling over the years, and has a budding community, comparisons with Angular and React reveal just how limited its resources are compared to the more established frameworks. Usually, developers have to turn to other programming languages to overcome this hurdle.

Language Barrier

Vue.js’ adoption by large Chinese enterprises Alibaba and Xiaomi exploded its popularity among non-English-speaking Chinese developers. Besides, the Great Chinese Firewall makes many resources for learning React and Angular scarce in China, leaving developers there no choice but to turn to the easiest JavaScript framework to learn and use – Vue.js.

As a result, much of Vue.js content and discussions are in Chinese. So, when you need help and turn to Vue.js forums, a large chunk of the instructions, plug-in descriptions, etc. you’ll come across will be in Chinese. If you can’t read Chinese, this will be a problem.

Limited Talent Pool

Being a relatively young JavaScript framework, we might have to wait a little longer to see Vue.js achieve mass adoption. For now, there aren’t that many developers learning or using Vue.js outside China. Our team at Bravelab are among that few.

Conclusion

Vue.js has a lot of juicy features for web development. However, like all good things do, it is not without its cons. The key is to decide if it’s suitable for your project, and Bravelab can handle that for you. Vue.js may not pair well with large projects. However, irrespective of the size and complexity of your next project. Consult with us at Bravelab.io, we'll recommend and implement the most effective technology solutions for your project.

‍