The inception of Angular was based on the idea of seamlessly connecting component classes to their respective templates. Through the use of this idea, web application developers were able to create dynamic and responsive user interfaces. Angular created a two-way communication channel that allowed automatic updates whenever changes were made to the component class by binding class properties to elements within the template. With this method, the development process was more straightforward, and the user experience was more interactive and interesting.

This seamless connection between component classes and their templates was made possible through Angular’s sophisticated change detection system. Angular's change detection system ensures a consistent and up-to-date user interface by keeping track of changes to component class properties and updating the templates accordingly. This mechanism is essential for maintaining the application's responsiveness and reactivity, giving users a seamless experience, and making it simple for developers to create dynamic web applications.

We will examine the presentational component that provides the clock as an illustration of all the ideas discussed in the article.

You can view the time on a ticking clock using this component.

Angular Change Detection

Although Angular's change detection system proved a ground-breaking strategy for seamlessly tying component classes and templates together, it also brought about performance issues, especially in large-scale enterprise applications. As the complexity and size of an application grow, the number of components and bindings increases, leading to a higher demand for resources to execute change detection cycles. As a result, users may experience a less-than-ideal user experience, slower updates, and decreased responsiveness.

To address these performance issues, Angular introduced several change detection strategies and optimization techniques. By employing the “OnPush” change detection strategy with immutable data structures, developers can significantly reduce the number of unnecessary change detection cycles and improve the overall performance of their applications.

However, when employing the “OnPush” change detection strategy in our clock component, it will cease to function as expected. This is because the “OnPush” strategy only triggers change detection when there are changes in input properties or when events are emitted from the component. This limitation leads us to explore the use of reactive components.

Reactive Components

Reactive components employ observables to handle asynchronous data streams, allowing the application to respond to changes efficiently. By utilizing observables in conjunction with the “OnPush” change detection strategy, developers can create highly responsive and efficient components that work seamlessly. This combination enables real-time updates while minimizing the performance impact of frequent change detection cycles, resulting in a more robust and performant application.

Over the past few years, this pattern has been used. Let's think about the issues with it.

1. Under the hood, AsyncPipe subscribes to the observable. In other words, if we need to use the same observable more than once in the template, it will subscribe more than once, which will have negative effects.
2. The entire component is flagged for "check" by AsyncPipe each time the observable emits a value. Even if you only use it in one element, the template as a whole will be checked again. It will cause useless change detection cycles if you have multiple observables bonded to the template.
3. Reactive components violate the original Angular design, which calls for binding component class properties to the template and having the template automatically updated whenever a property changes.

Signals

As good developers, we were able to find solutions to almost all of the issues mentioned above. But as a result, we added more boilerplate code.

Starting with version 16, the Angular Core team introduces the new tool, which is intended to address every issue mentioned above.

The signal is a reactive construct natively built into Angular. Its responsibility is to hold the value and notify consumers when it changes.

Let’s migrate our clock component to signals.

Note that this new example looks almost the same as the first one. And its change detection strategy is "OnPush."

How does it work? What’s the trick? Angular introduces the function "effect." A callback with a signal is accepted as an argument by this function. The callback is executed by the effect function each time the signal's value fluctuates. From version 16, templates for components will be wrapped into effect functions. This enables us to go back to the original Angular design and simply bind signal properties to the template without affecting performance.

💡 Angular development becomes easier when you can apply a component-driven development approach to them. Bitmakes this easier by providing an integrated dev environment (compiler, tester, linter, documentation, CI, dev server, and packaging/dependency management/bundler all-in-one) for building apps with Angular. It enables you to quickly set up a dev environment that follows best practices implemented by the Angular team and projects generated by the Angular CLI.

Learn more here:

Conclusion

Angular has come a long way since its inception, where the idea of seamlessly connecting component classes and templates laid the foundation for dynamic and responsive web applications. While Angular’s change detection system revolutionized the way developers built applications, it also introduced performance challenges in large-scale, complex applications. The introduction of reactive components helped mitigate these issues but also brought their own set of drawbacks.

The Angular Core team has continued to innovate and address these concerns, and with the introduction of signals in version 16, developers can now enjoy the benefits of the original Angular design without compromising performance. By utilizing the “effect” function and signals, developers can create efficient, responsive components with an “OnPush” change detection strategy, while minimizing boilerplate code and maintaining the simplicity of binding component class properties to templates. This evolution of Angular highlights the framework’s commitment to addressing the ever-changing needs of the web development landscape and providing developers with the tools to create powerful, high-performance applications.

Build Angular Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo