Front-end web developers must make several decisions and choose from many options. We must decide which kind of tooling to employ, which programming language to use, and which CSS framework to include. Still, none of these decisions is as impactful as selecting the UI framework.
The range of framework options has steadily increased in recent years, with new and exciting possibilities appearing regularly. However, since 2019, the “big three” stay consistent. Angular, React, and Vue remain ever prominent. Beneath the surface, however, these programs have drastically evolved.
This article explores how the big three have advanced over the past three years and spotlights where each one shines — or potentially falls short.
Angular
Angular is Google’s complete front-end framework.
History
Angular began as the successor to Angular.js, so Google introduced it as version 2. However, it was essentially a complete rewrite, retaining only a handful of concepts and the original branding.
Currently, Angular is available in version 14 (14.0). While significant releases occur about every six months, Google updates the framework almost weekly. They typically support each major release for about 18 months.
Major Features
Angular comes as a complete framework, relying on a pattern called dependency injection. In this pattern, Angular registers services, which the framework then passes to other services, modules, or components whenever the system uses them. Dependency injection is often an enterprise feature found most commonly in languages with static typing, such as Java or C#.
Additionally, Angular employs universal rendering. This feature enables us to render Angular in a browser, server, or mobile application. Popular frameworks such as Ionic and NativeScript rely entirely on this function. Angular also features automatic code-splitting, which most developers now consider more of a necessity than a convenience.
Primary Use Cases
Angular primarily targets the enterprise sector. As a result, it natively provides respectable architectural boundaries — configuration or convention settles everything. Since Angular projects tend to entail many moving parts, their primary use is for larger, enterprise-level applications.
React
Facebook developed the React library for creating UIs.
History
When Facebook realized that a JavaScript-only approach brought significant development advantages, it released JSX — a syntax extension to JavaScript — independently of React. Today, JSX is a de facto standard that almost all JS-based tools understand and support. React is currently in version 17 (17.0.2) and remains stable.
Before version 15.6.2, React used an often-criticized BSD+Patents license, which significantly hindered adoption. The situation even spawned multiple other projects, such as Preact and Inferno.js, which attempted to be API-compatible. Since then, React has switched to the more standard Massachusetts Institute of Technology (MIT) license.
Major Features
React’s primary selling point has always been its minimal API, making it relatively easy to use. Beneath the surface, its unidirectional flow and flexible rendering areas have enabled it to maintain its competitive edge.
Currently, React’s component model is its ultimate feature. Most React code uses functional components, which are functions with a fixed signature (receiving props and returning a React element). React orchestrates these components using hooks, which promote the consistent and flexible reuse of functional aspects.
This gained flexibility pays off. React renders smoothly both on the server and on static pages (for example, Gatsby) or using unique streaming components (server components). Its hydration process maintains impressive speed when initially loading even the most interactive web apps.
Primary Use Cases
Facebook introduced React to simplify UI development efforts. Developers later discovered that its unidirectional model can extend to any UI beyond the web. Consequently, React has explored several other directions, including supporting native mobile apps and creating PDFs.
Although React applies to all kinds of applications, it excels when focusing on large single-page applications (SPAs).
Vue
Evan You introduced Vue. It’s a lightweight front-end framework.
History
While contributing to and using Angular.js, Evan You sought a much simpler approach that could still render dynamic pages with all the convenience and reliability of a front-end framework. Eventually, he developed his solution — Vue.
Vue’s public breakthrough came when the PHP framework Laravel adopted Vue version 2 as its front-end option. Vue is currently available in version 3.2.31. Version 3 became its standard version at the beginning of 2022.
However, the transition from Vue 2 to Vue 3 is not easy. The upgrade process is comparable to the shift from Python 2 to 3. While the newest version features the right improvements, it presents challenges regarding the Vue ecosystem and its dependencies.
Major Features
Vue shares many features that make React and Angular quite appealing. One popular Angular feature is two-way data binding. However, while Angular achieved this with “zones” (introduced by zone.js) or explicitly using a ChangeDetectionRef service, Vue performs two-way data binding implicitly with getters and setters. This approach preserves performance while everything flows more naturally.
In the same spirit, Vue introduced single-file components (SFC) using a particular file format (*.vue) in conjunction with HTML tags to divide files into three parts. One part is the script element for the actual JavaScript code. Another is the template element for indicating what to render. The third is the style element to include any CSS.
These single-file components combine nicely and form a consistent unit. Also, the SFC enables using JSX, for example, to render other components imported from elsewhere.
Finally, Vue introduced the Composition API to bring reusability — regarding a component’s lifecycle, for instance — into the development process. It is pretty similar to React’s approach to using hooks in some ways.
Primary Use Cases
Vue proves an extremely accommodating middle ground for those who find Angular too expansive and React too limited. It understands itself to be a library rather than a framework. So, Vue is ideal for mid-sized applications.
Comparing Angular, React, and Vue
All three frameworks provide a solid basis for state-of-the-art front ends. Nevertheless, their differences can make one framework more favorable than its alternatives.
Performance
We must consider some metrics when evaluating performance. For example, the bundle size — the size of the files emitted when using a particular framework — can be highly informative. Additionally, the initial load time measures the first contentful paint — the time between initializing the application and when content first becomes visible to the end user.
These metrics can account for various conditions, including application size, network speed, and device type or performance.
One excellent way to measure speed is via the js-framework-benchmark. The stress tests indicate that Vue is the fastest of the three frameworks, with Angular and React delivering performance similar to one another.
Startup metrics testing again reveals Vue as the top performer. However, the other two frameworks differ more significantly than in the previous testing. React’s performance is superior to Angular’s, as expected of a lightweight framework.
Finally, the memory allocation test produces similar results.
Vue is the clear frontrunner for all matters requiring speed based on these results. However, testing can’t account for all speed factors, and comparing smaller data sets may provide a different conclusion. For example, Angular and React can optimize the bundle size for smaller applications.
Vue scores a point on the performance side, with React coming in second.
Ease of Use
While ease of use is entirely subjective, the tendency to require TypeScript and its new concepts places Angular in a problematic situation. However, if a team has experience with solid data typing and structured frameworks — such as within Java, C#, or .NET — they might find it most productive to use Angular over React or Vue.
Nevertheless, React remains the easiest to learn. After all, it has the most minimalistic API and leverages JavaScript concepts throughout. On the other hand, Vue introduces custom names and concepts on top of HTML, known as directives, for example, v-if, to make things work. The need for documentation on how these custom Vue concepts work puts React in front here.
This point goes to React, followed by Vue. However, teams should discuss solutions to decide what suits their situation best.
Integrations
Angular doesn’t need many community-contributed integrations. The Angular team provides pretty much everything out of the box. Consequently, the community feels much less inclined to offer more integration here. In the end, that’s Angular’s job, right?
React heavily relies on the contribution of integrations. React is quite popular, so the number of integrations is vast. Taking something as fundamental as tooling, for example, transpiling JSX, we see support for React’s syntax pretty much everywhere.
Since we can use JSX elsewhere (and Vue already uses it), it feels like a solution where everyone benefits. Otherwise, React uses standard JavaScript and does not need any exceptional support. This is also true for Vue (remember the SFC with its sections) and Angular. Angular uses HTML files, but these also contain custom directives that we must integrate into an integrated development environment (IDE) or build process.
Due to the solution’s lightness and convenience, React gets the point here, with the other two close behind.
Documentation
React and Vue have one advantage: Their communities are quite large and active. React, for instance, has over 1,500 contributors listed. Therefore, there are enough people to help bring the documentation to an outstanding level.
Of course, the team behind Angular is not slacking on documentation. However, one significant Angular challenge is that we must check much of the online documentation, which is outdated, with the version we are using.
While Angular’s official documentation is properly versioned and accurate, online answers to frequent questions and tutorials may use older versions of Angular (or even Angular.js). This inconsistency causes confusion and frustration.
Furthermore, since Angular is huge and tends to do things “differently” than the broader JavaScript ecosystem, the documentation must be more extensive. The documentation is excellent for routine activities, but when we must customize, crucial details are missing.
React has the smallest API and the most battle-tested concepts out there. Therefore, React’s documentation is presumably the gold standard. Nevertheless, considering that Vue also needs to cover some concepts and needs a broader API, it does a terrific job.
Given the amount of necessary documentation and its level, we give this one to Vue, closely followed by React.
Community
The big three have earned their spot at the top by building large communities. Today, Angular has 80 thousand stars, React 183 thousand stars, and Vue 193 thousand stars on GitHub. Combined, this is almost half a million stars! While stars alone are not a reliable metric, they tell us that these projects are popular and well-received in the community.
The number of community additions reflects React and Vue’s focus on providing smaller, more dedicated projects. While Angular tries to bring everything out of the box, React and Vue have found their strength in creating a large ecosystem. Consequently, the ecosystem includes user support and the support of plugin creators. In the end, such an ecosystem is hard to beat once established.
Angular’s primary target audience, enterprise users, makes their audience small. React and Vue have an equal share of the active open source community. However, about half of Vue’s community uses Vue 2, and the other half uses Vue 3. While most want to transition, a few essential packages are still only available for the previously-released version 2.
React does not have this challenge. Its API has remained the same, and newer additions such as hooks are optional, even though the community embraced those changes quite fast.
We’d have given Vue the point here, but since the Vue 2 to Vue 3 transition seems to be a bit of a community struggle, we’ll go with React for this point, putting Vue in second place.
Job Market
Community is not everything, and the fact that Vue mostly appeals to indie developers and the job market reflects this. Here, Angular and React are even, while Vue is behind these two by a fair margin.
Since Angular is dominant in the stable enterprise sector, we give it the top spot, but with React close behind.
Conclusion
Choosing the proper front-end framework among the big three is mostly a matter of taste. While some frameworks are more tailored to particular use cases than others, the big three are all generic and developer-friendly enough for us to use in all kinds of projects.
Angular might make the most sense for a group of former Java or .NET developers, while Node.js advocates would feel more empowered with React. And, these days, indie developers certainly seem to prefer Vue. In the end, deciding which framework to use entirely depends on non-functional aspects, such as the team’s composition.
Top comments (0)