Angular vs React vs Vue: Which is better?
If you want to design manageable and flexible web applications, you may want to take a look at React, Vue.js, and Angular frameworks. Before starting the comparison, let me briefly discuss these great frameworks.
Architecture
Angular
Basically, angular is a JavaScript Framework that allows you to create reactive Single-Page-Applications(SPAs).
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
Angular supports two-way binding, two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components and more.
Used by powerful companies like Paypal, Google, Udacity.
Prons
- It has its own unit and e2e testing tool (Jasmine & Karma)
- It has a powerful routing
- There is an Apollo Library for GraphQL
- Supports mobile development with Ionic
- NgRx library can be used instead of Redux
- Standalone framework
- Services and Dependency Injection (DI)
- Two-way binding
Cons
- Verbose and complex
- Steep learning curve
- Version update is painful (Angular.js to Angular 2..14)
- It compiles useful or not all components at runtime
- The file size is a little bit higher than other frameworks
- Limited SEO options
- CLI documentation is lacking details
- Doesn’t have VirtualDOM
React
React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ‘V’ denotes the view in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
Used by powerful companies like Facebook, Netflix, Uber.
Note: React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.
Prons
- Powerful community, tutorial, documentation
- Fast renewal and update
- Uses all new features of ES6
- Easy to learn, reusable components
- VirtualDOM
- Easy creation with Create React App
- A rich resource of unit testing
- Native mobile support also includes Ionic
- State management also supports Redux, Recoil
Cons
- JSX syntax
- The high pace of development
- Somewhat slow documentation.
Vue
Vue.js core library focuses only on the View layer. It is called a progressive frame, because you can extend its functionality with official and third-party packages, such as Vue Router or Vuex, to convert it into a real frame.
Vue is not strictly associated with the MVVM (Model-View-ViewModel) pattern, its design was partly inspired by it.
With Vue, you’ll be working mostly on the ViewModel layer, to make sure that the application data is processed in a way that allows the framework to render an up-to-date View.
It was launched in 2014 by Google employee Evan You.
Vue can adapt to multiple environments Along with many libraries in Vue CLI. It works (TailwindCSS, GraphQL, routing, and state management) also some tools contain (Cypress for e2e testing).
Used by powerful companies like Alibaba, Trustpilot, GitLab.
Prons
- Good documentation
- Two-way binding
- VirtualDOM
- Simple unit testing
- Native mobile support with NativeScript
- Standalone framework
- Faster than alternative frameworks
- Easy to upgrade version
Cons
- Poor community than alternatives
- Release periods are relatively slowly
- Not enough English documents
- Poor developer team
Popularity
Angular
Angular is developed by Google. It’s often used in enterprise projects, and it powers over 98k websites based on BuiltWith‘s data.
It’s the least starred among the three frameworks, with 82.7k stars on GitHub. However, when switching from Angular 1 to Angular 2, they created an entirely new repository instead of continuing the AngularJS project, which also has 59.4k stars.
React
React is one of the most popular JavaScript projects with 191k stars on GitHub. It’s developed and maintained by Facebook, and it’s used internally in many of their projects. Additionally, it powers over 2 million websites, according to BuiltWith‘s usage statistics.
Vue
Out of the three frameworks, Vue has the most stars on GitHub, with 198k stars. It’s a very strong, independent project in the open-source community and is used by over 1 million websites, according to BuiltWith.
Common Technologies
Angular, React, and Vue can all be used to develop Progressive Web Apps, also known as PWAs.
PWAs are not mobile applications but web applications that smartphone users can add as shortcuts to their home screen and offer a look and feel similar to native mobile apps.
You can also find premium templates and pre-made applications for each framework, but Angular and React have more premium options available than Vue.
UI Performance
Tested on Razer Blade 15 Advanced (i7- 8750H, 64 GB RAM, Fedora 33 beta (Linux 5.8.13–300, mitigations=off), Chrome 86.0.4240.75 (64-bit)
1 — Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)
2 — Startup metrics (lighthouse with mobile simulation)
3 — Memory allocation in MBs ± 95% confidence interval
4 — The smaller the file, the faster the download, and less to parse.
5 — This shows how succinct the given library/framework/language is. How many lines of code do you need to implement almost the same app (some of them have a bit more belts and whistles) accordingly to the specification.
Summary
Keep in mind that this is not exactly an apples-to-apples comparison.
Of course, these frameworks, chosen according to their place and time, will get you to the goal, I just tried to explain their differences as much as I could.
We chose React for most web applications as Trendyol after this comparison, the fact that we have a very large community and that already have the know-how were important factors.
Angular
Overall I think Angular meets our medium to large-scale needs.
But Angular is not a great framework, major changes make it difficult to switch between versions. The weakness of the community sometimes makes us lose time, you can spend time finding solutions.
Unfortunately, the weak community reduces diversity.
React
React is a really big community and there are many solutions.
Since it is very popular, there is a very large community and you are likely to find any topic you can think of. With its current versions, it is taking firm steps forward to become a standalone framework by getting rid of its dependencies on other libraries.
Vue
Alibaba and Xiaomi use Vue extensively enough to make it popular all over the world, quickly for small to medium application needs.
It has a compact structure that can be developed.
Its weak points are that there are not enough resources and developers, and some important resources are in Chinese.
Pros are that it is a standalone framework, there is a migration tool for version transitions, and it is faster than its competitors.
Thanks for reading.
References and Sources:
https://krausest.github.io/js-framework-benchmark/2021/table_chrome_89.0.4389.72.html
