Rediscovering Angular: Modern Advantages and Technical Stack

There are a lot of good front-end frameworks nowadays. We, front-end engineers, are spoilt for choice. Some of them offer great performance, and others offer huge community support and ready-to-go solutions. 

If we take a look at this picture, we will see that two frameworks are dominant in the scene — React and VueJS.

But what if I say that Angular is often overlooked and can be a great choice for your next project? In this article, I will show the benefits and actual technical stack required for this framework.

Why the Perception of Angular's Decline?

The unpopularity of Angular can be explained by several historical factors. Earlier versions presented a steeper learning curve compared to other frameworks. Angular made developers learn a lot of additional stuff like modules, dependency injection, directives, pipes, etc. The complexity of component communication (using decorators and metadata) further contributed to this complexity. 

The same goes for the general building blocks of Angular — we have to memorize tons of decorators and how to properly configure the meta object for them because it has an impact on how it will behave. This is a hard-to-learn framework, and developers do not want to learn a lot just to start and develop their web app. And this was too long — React took advantage of its simplicity and speed of development and did not overwhelm developers without needs. The growing community also contributes a lot to the framework's success, and React has the biggest community. All of these impacted Angular's popularity.

Benefits of Modern Angular

The Angular team has made significant improvements, transforming the framework seriously. Modern Angular offers several key advantages:

• Ahead-of-Time (AOT) compilation. Despite the fact that this feature exists in the framework for quite a long period of time, I can't mention it because this is a great feature. Starting from Angular 9, AOT is enabled by default, bringing better performance, smaller bundle size, and detecting template errors in the earliest stage. Before Angular 9, you still have this option, but you need to take extra steps to enable it;
• Ivy renderer. The Ivy renderer enables tree-shaking (removing unused code), incremental compilation (faster rebuilds), and improved code locality, leading to highly performant applications;
• Improved build tooling. Starting from Angular 16 as an experimental version and enabled by default in Angular 17, Esbuild becomes an option for Angular apps, bringing the speed of building and simplification of tunning;
• Functional guards and resolvers. Using regular functions for guards and resolvers simplifies code and reduces boilerplate;
• Standalone components, no more Angular modules. The introduction of standalone components eliminates the need for NgModules, streamlining development;
• Signals. Signals provide a reactivity system, allowing efficient updates to the view only when necessary, improving performance. They offer a more granular control over change detection than the previous Zone.js-based system;
• Zoneless change detection. Recent versions of Angular can now operate without Zone.js, leading to reduced bundle sizes and further performance improvements. This is a significant improvement in runtime performance!

All of these drastically improve the framework and the way to work with it.

Who Uses Angular?

While often associated with enterprise applications, Angular is used across various domains. Google itself utilizes Angular for many of its products. A lot of companies in different domains use Angular: banking (like Deutsche Bank), searching and booking systems (like Ryanair), news websites (like Forbes, The Guardian), and team management and collaboration tools (like ClickUp). This diverse range of applications demonstrates Angular's suitability for different project types.

Angular's Technical Stack

The majority part of Angular application goes with the same technology stack. Knowledge of them will give you an advantage in building solid and holistic applications. First of all, look at component libraries. Popular choices include Angular Material, PrimeNG, and NgBootstrap. Recently, Shadcn UI for Angular has soared in popularity as a more unstyled option. Familiarity with Angular Material and PrimeNG is highly recommended due to their prevalence. 

The next is state management solutions. While NgRx remains a powerful option, TanStack Query offers a simpler approach for data fetching and caching, reducing boilerplate and providing built-in features like loading and error handling. Understanding NgRx concepts is still valuable for understanding state management principles, so I highly recommend learning it. And last but not least is the RxJS library for reactive programming. Every Angular application is built with RxJS, so it's important to understand the concepts and how to work with them.

Conclusion

Despite past perceptions, Angular has evolved into a modern and powerful framework, and I hope all of these great features and tools will make you think about your choice for the next application. Learn it, try it, and build something with it, and you will see that this is a great option.