Angular, React and Vue.js each have their strengths and weaknesses between different use cases. But is there an argument one of the big three is the best ‘all-rounder’ as a JS framework?
In this article, the first of a trilogy where each instalment will argue the case in favour of one of Angular, React and Vue.js, the focus falls on Angular.
If you currently face a decision on the right framework for a particular development project, or the longer-term strategic decision for your organisation to work with a core framework, this series will help you contextualise the comparative strengths of Angular, React and Vue.JS.
In the corner for Angular is K&C frontend maestro Alex Chugaev. Alex has been working with Angular and Angular.js for over 5 years now and also has 3+ years of experience with TypeScript, plus a strong working knowledge of NestJS.
He tackles the question of when and why it makes sense to opt for Angular ahead of React and Vue.js as the optimal choice of JS framework, by explaining the pros and cons of Angular in a variety of use-cases. Over to Alex:
Angular is maintained by Google, and the tech giant is committed to popularising the framework as a leading web development technology.
Yes, Angular has been a market leading JS framework since the release of the original AngularJS back in autumn 2010. Over the 10 years since, a huge number of organisations have successfully built their software products with Angular. Some of the leading examples of products built on the Angular framework are detailed here – https://www.madewithangular.com/.
Google has ambitious future plans for Angular and is currently doubling down on its support and development efforts for the framework, with predecessor AngularJS being retired in terms of ongoing support from summer 2021.
Angular is, of course, a hugely popular framework with contemporary developers. The fact that it continues to be selected as the framework of choice for some seriously big hitters, gives me the confidence to state that is not going to change at any time in the foreseeable future.
Angular benefits from a large online community and, as an open-source framework, there is a rich resource of official and community-driven forums for discussions around Angular. The best-known dev community resources such as StackOverflow, GitHub and Gitter chat all have a big Angular presence and are backed up by a strong ecosystem of blogs, social network communities and professional groups where developers share their knowledge and can turn to for help.
Individual developer and DevOps team velocity depends on many factors, not only the qualities of the framework itself and the technical level of the project team. A well-organised and disciplined team can work quickly and effectively even if it doesn’t benefit from outstanding framework skills.
On the other hand, a team that enjoys the presence of supremely talented Angular experts can work slowly and produce less value from each sprint if they are poorly organised. But if a project’s planning and delivery management levels are on point, Angular lends itself to a workflow that breaks bigger problems down into the smaller chunks that support a rapid release cycle at least on par with what React or Vue.js allow for.
To answer this question effectively, we first have to define the use cases Angular is best suited to by looking at:
Angular is a universal framework and can be used to create web, desktop and mobile apps.
Angular can be used for the rapid development of projects of any complexity level, as long as the individual use cases are appropriate.
But I would argue that Angular’s strength is larger scale and complex projects. The framework offers great modular enterprise architecture and the kind of conventions essential to large teams working together efficiently on one large, complex product.
There is still debate around the question “how big should a project be before we choose Angular?”. I personally think the question itself is wrong and the only thing we should really be asking “can we effectively use Angular for this kind of project?”
Similar components are self-sufficient and can be re-used by developers across different parts of an application. This is particularly efficient in enterprise-scope applications where different systems converge but can contain many similar elements like search boxes, date pickers, filters, etc.
Components also speed up the onboarding process for new developers, helping them read the code more easily which means they reach peak productivity more quickly.
The independent, encapsulated (self-sufficient) nature of components simplifies quality assurance procedures conducted through unit tests that assess the performance of the different parts of an application.
Components that can be easily decoupled from each other also mean improvements and maintenance is convenient. That’s a real strength for the kind of iterative development workflow large, complex apps rely on.
The RxJS library is used with Angular to manage asynchronous data calls. RxJS means events can be handled independently and in parallel like a factory assembly line where a manufacturing process is broken down into interchangeable stages that are not tied to one another. This means a web page is not left unresponsive while it waits for some event to happen to trigger subsequent events.
Asynchronous programming did not come into existence with RxJS but the library certainly makes it much easier. A downside to RxJS is that it comes with a steep learning curve but once mastered it makes the job of an Angular developer a lot easier.
Angular’s most common application is in frontend web development. And it’s in its natural habitat that the framework’s strengths are most obvious. I’ve personally used Angular for web development projects of all kinds of scale, from 5-page apps to a huge enterprise portal for an international company (Bosch).
In combination with the professional organisation of work processes and leveraging a degree of automation (CI/CD) we were able to produce a lot of value in a short space of time.
Angular’s component-based architecture is a significant improvement on AngularJS. Angular components are sections of the user interface, or functionalities, that exist in a strict hierarchy. The benefits of Angular’s component-based architecture are:
It should be highlighted that Angular is best suited to interactive applications. It does not make much sense to use if for web development projects such as simple blogs or news and content-centric, where users do little other than consume content.
For most other kinds of user-facing web development, especially so called “fat/solid client” apps that have a lot of business logic held in the frontend app rather on the server side, Angular is likely to be a strong option you won’t go far wrong with.
Angular can be used in conjunction with NativeScript (or similar solutions) to build high-performance mobile apps. This mean an Angular frontend developer’s skills can be applied to the creation of native mobile apps when complimented by a level of platform API.
For SMEs, this can mean hiring Angular developers makes a lot of sense because the same team can work on both web development projects and mobile apps.
When it comes to desktop development, Angular has stronger competition in the form of .NET Core, WPF etc., which are superior when it comes to building applications that are more efficient in the machine resources they run on.
Despite some shortcomings in resource efficiency, some desktop applications are built with web technologies like Angular, especially if that resource is already conveniently available to the organisation.
I’m an Angular evangelist but, of course, it is only possible to objectively champion the framework’s strengths against the backdrop of its weaknesses. So what are Angular’s issues?
Frontend developers who prefer React, Vue.js or other JS frameworks to Angular most commonly criticise its relative complexity and verbosity. That’s been a drawback levelled at the framework since AngularJS was first released a decade ago.
My personal position here is ‘no pain, no gain’, but it is true that Angular is complex. The framework’s component-based architecture is one of its big benefits but the way these hierarchical components are managed could be simpler. It can be necessary to create as many as five files for a single Angular component, inject dependencies and declare component lifecycle interfaces.
This can mean a lot of time spent on repetitive tasks during Angular development.
New Angular developers will need time to get on top of modules, dependency injection, components management, services and templates. And that’s before they get started on mastering RxJS, which, to a basic to intermediate level, is not more or less a necessity to working with Angular.
Angular’s weaknesses are mainly tied to the process of learning the framework, rather than its technical capabilities as implemented by an already proficient Angular developer. However, for organisations who may not always be in a position to hire or bring in ready-to-go Angular developers, the framework’s learning curve and complexity is definitely a consideration.
Personally, I would almost always opt for Angular as a framework for enterprise-level applications whose primary function is not to serve content.
In long-term projects where investment will be considerable, Angular’s complexity and steep learning curve is compensated for by the more efficient maintenance clean TypeScript code provides for. The stability and ongoing tech support and consistent improvements Google’s support means is also a huge plus in the context of enterprise-level applications.
React and Vue.js may be easier and cheaper to train and recruit for as well as to deploy in but neither framework is as versatile, maintainable and future-proof as Angular is.