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.
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.
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.
Top comments (18)
Nicely wrapped comparison.
I'd prefer Angular in large projects because of its strict rules than vuejs.
When project becomes more larger it will be harder to maintain and trace if there are beginners working on it unlike Angular, which instruct them with some certain strict rules.
Actually it would be great also to mention React In This Comparison :)
Thanks for the share.
I'm not a Vue guy I use React but I know Vue is used in huge projects aswell so this is more a personal preference.
jQuery has been used in large projects. As long as you want, you can use anything in a large project. The question is the pain scale of maintaining it.
You can have very clean huge React projects if you and your team follow some rules.
agree. but isn't it just like Angular then? Only difference is Google makes the rules lol
Not really it's React then still.
It would be yes, but sadly I don't have any qualification using react at this moment :)
Maybe a future article will cover this ^^
Still good article though
Thanks :)
Angular.js and Angular are two different things. These terms cannot be used interchangeably.
Yes, exactly as I described in the upper part, :) I have adjusted the erroneous places.
vue is much better then angular 😁
Hi, I think Vue is interesting to integrate and evolve a big Legacy project. Angular is maybe a bit harder to get into but is very engaging once you get going. Vue 3 seems to me very promising, very little verbose, and coupled with vite / pinia it is formidable.
I have to disagree with regards to large projects being more suitable for Angular. We have a multi million line codebase in TypeScript Vue, have successfully moved major versions without too much effort and have a highly controlled codebase.
It is up to the engineering team to correctly architect a project no matter the technology. This comes with experience. So whilst Angular is more prescriptive, you equally wouldn't have an inexperienced team working on such a large project.
Once you reach a certain size the framework won't save you, only good engineers will.
"Angular uses a lot of memory because it comes with a lot of built in libraries"? Not correct. You only ship what you import in your apps, thanks to tree shaking. A bare bones Angular app is a few dozen kilobytes.
The Angular IVY compiler is very efficient and can produce very fast and light weight apps.
Also Angular is not MVC. They used to call AngularJS MVVM (VM for ViewModel) but even that's not what modern Angular is. It's a flexible framework that even allows you to build lightweight standalone web components if you want.
Since Angular is typically used for larger projects, many dependencies of the package are used. When you compare The amount of code of both Frameworks, used in Enterprise Projects, Vue winns by far. Even the core components of Vue are smaller. Tree shaking goes for vue as it goes for Angular.
Angular by standard adapts parts of the MV VM pattern, AND parts of the MVC pattern. Your right, i should have brought that up. Since Vue focused only on MV VM based on its custom components, my argument still stands.
Angular is supported by Google, I think Google will win anyway - my personal thought, :)
You underestimate how big the community of developers working on Vue is. The project is extensively covered and backed by several large companies and projects such as GitLab, Chrome Frameworks Fund, Laravel, DevExpress and more.