Angular vs. Vue (again...)

Navigation

• Navigation
• Introduction
• History
• Learning curve
• Popularity
• Vue
• Syntax and Complexity
• Structure and Flexibility
• Data Rendering
• TypeScript
• MVC/MV VM
• Conclusion

Introduction

This nice little (maybe a bit biased) article is about comparing two of the most popular JavaScript frameworks: Angular and Vue. I will try to give a brief overview of the history, syntax, structure, and popularity of both frameworks. I will also try to give you a brief overview of the advantages and disadvantages of both frameworks. The basis of this text is formed by various comparative articles I could find online on this topic, as well as my own expertise in the respective frameworks. I hope you will enjoy reading this.

History

Angular, developed by Google, was first released in 2010, making it the oldest of them all. It is a TypeScript-based JavaScript framework. With the release of Angular 2 (and the dropping of the “JS” from the original name – AngularJS), a fundamental change occurred in 2016. Angular 2+ is now known only as Angular. Although AngularJS (version 1) is still being updated, we will focus on Angular in this discussion.

https://angular.io/

Vue, also known as Vue.js, is the newest member of the group. It was developed by former Google employee Evan You in 2014. In recent years, Vue has gained a lot of popularity, even though it is not supported by any major company. The latest version is always announced on the official Vue website on the “Releases” page. Contributors to Vue are supported through Patreon. It should be noted that Vue also has its own GitHub repo and works with TypeScript. Vue is supported by the Laravel project,GitLab, and snyk, among others.

https://vuejs.org/

Learning curve

Vue is easier to learn, especially when switching from React or Angular. Vue.js uses pure JavaScript, and the templates in Vue.js are written in HTML. Therefore, there is no need for Vue developers and engineers to learn any programming language other than JavaScript.

If you know JavaScript well enough, you can be working with Vue within a day with the help of the manual.

Angular, on the other hand, is complex and has a steep learning curve. To use Angular, you first need to understand other concepts like TypeScript and MVC (Model View Controller). Therefore, it is very difficult for beginners to learn.

Even after years of working with Angular, it can be difficult to fully understand it. It is a niche for experienced users and developers.

• Winner - Vue

Popularity

Angular is supported by a large community that has been growing steadily since Angular was first released. It is downloaded about 500,000 times a week and has more than 70,000 stars on GitHub.

From a job's perspective, Angular has a larger market. Most large companies prefer Angular because of the ease of developing and handling large, complicated web applications. As an Angular web development company, some use the Angular framework to develop enterprise-level web solutions.

The huge popularity of Angular also means that you can get different solutions from different users. You can also get support from experienced developers without going through the tedious process of technical support.

Vue is a growing community. Although it has quickly become a popular framework, it still has a smaller market compared to React or Angular.

It will take a few more years for Vue to create enough jobs. Vue relies mostly on the open source community, but knowledge sharing is not as advanced compared to Angular.

• Winner - Angular

Vue

Vue is a smaller, lightweight version of Angular. It uses third-party elements and applications to integrate many needed features and functionalities. You also need to add other third-party libraries, as there are very few built-in core libraries in Vue.

This reduces both the size and complexity of the code and makes it easier to use and navigate. The newer version of Vue is smaller and faster compared to other existing frameworks.

The difference with Angular is that there are many more built-in functions and libraries. This makes Angular a monolithic framework that requires a lot of memory. Although many of these elements are very useful and necessary, others will most likely never be used.

This leads to a lot of unnecessary complexity.

• Winner - Vue

Syntax and Complexity

Vue is extremely easy to use and learn. The syntax is easy to understand and the code of your Vue application will be neat, short, and clean.

As mentioned earlier, Angular is much more complex to use than Vue. Because of the rigid structural rules, performing simple actions also requires long lines of code. The syntax of an Angular application is also much more complex when comparing Angular to Vue.

• Winner - Vue

Structure and Flexibility

Vue is not very structured and therefore offers a lot of flexibility to the developer. It provides official support for numerous build systems, which gives you the flexibility to design your application as you see fit. There is no single way to structure the application. You can use an HTML or JavaScript file to write your templates.

Angular, on the other hand, has a much more defined application architecture. This is especially helpful when building large applications. Many large companies prefer Angular to other frameworks because it provides a standard architecture to all developers.

Depending on the type of developer/team you are, you should weigh which is better for you – flexibility or structure.

• Winner - Draw

Data Rendering

Vue.js uses virtual DOM's, a simplified copy of the DOM. Using the virtual DOM, the framework sorts out a performance-optimized default configuration. So, when the application data changes, the virtual DOM is rendered instead of the user interfaces.

This drastically improves the application's runtime and load time. It is also much more efficient to update views using the virtual DOM.

Angular, unlike other frameworks, does not use virtual DOM's. Instead, watchers are used to simplify the data rendering process. Watchers keep track of old data values and update only the parts of the original DOM whose values have changed.

• Winner - tie

TypeScript

Since Angular is a TypeScript-based JavaScript framework, all resources and documentation are written in TypeScript.

Even the framework itself is written in TypeScript, which provides ample opportunity to control the code within a well-defined structure. This is an added advantage, especially if you are building large-scale applications.

The new version of Vue.js is also a 100% rewrite in TypeScript. Vue3 offers full support and, thanks to its structure, a clearer foundation for projects of all kinds.

• Winner - Vue

MVC/MV VM

Angular uses the MVC framework (Model-View-Controller). This means that the application is broadly divided into three logical parts: the model, the view, and the controller.

This divides the application into different components, keeping the user interface layer separate from the application logic layer. Using Angular, developers can write well-structured code and divide longer code into sections. This is an excellent aid when developing large, complex web applications with multiple pages.

Vue.js uses the JavaScript framework's MV VM (model-view-view model) model. The model layer contains the logic behind the application, while the view layer contains the user interface logic. In the view model layer, the view and model layers interact with each other and exchange data.

This creates a bidirectional data binding, that is, a bidirectional flow of data within Vue applications.

It is easier to handle the HTML blocks in the MV VM model. It is also easier for Vue developers to test units in the MV VM model. But in comparison, the blocks in the MVC framework work together more efficiently.

• Winner - tie

Conclusion

In most cases, you probably wouldn't choose between Angular and Vue alone. They are completely different libraries with very different feature sets and learning curves. Vue is the clear choice for less experienced developers, and Angular is preferred for those working on larger (enterprise level) applications.

A large library like Angular requires more diligence when it comes to staying current, while Vue is less demanding in this regard, and the fact that the two most recent major versions of Vue are in separate repositories helps.

It should also be noted that Vue was developed by a developer who used to work on Angular for Google, so that's another thing to keep in mind, although that wouldn't have much impact on your decision.