We’ll look at all this and more. In particular, we will be exploring the following:
zone.js-based change detection works in Angular
- how the new signals reactive primitive will work
- what the impact of this change will bring
Because let’s face it: Angular is not… fashionable. But being fashionable was never its goal. Angular’s goal is to be solid, reliable, and safe. It provides structure, and it’s opinionated. It targets the use cases where reliability is the first requirement.
The consequence of that mindset is twofold :
- First: Angular doesn’t naturally fit with environments where agility is the first requirement. Such as startups.
- Second: Angular itself is slow to adopt new paradigms.
However, the Angular team has recently signalled that it is preparing to implement a radical change in the framework. This being Angular, everything will be done in a safe and non-disruptive way.
To be able to understand what that change is, let’s first look at…
How does change detection work in Angular?
Angular uses a library called
zone.js. This library mainly does two things:
- First, it “monkey-patches” the browser APIs to hijack all the asynchronous events. Basically, it intercepts click events, timeouts, API calls and the like.
Angular uses this library to wrap its component parts and to trigger updates whenever an external event occurs.
But given the scale and ambition of today’s applications, this approach is brute force: it lacks granularity. Angular needed a way to do atomic reactivity. It needed a way to do selective updates. And this is where signals come in.
What are signals?
You may well have already heard the term. Signals are a concept championed by the Solid framework, which I’ve explored previously. In Solid JS, Signals allow developers to declare fine-grained dependencies between different parts of the application's state.
Signals track dependencies between components. Whenever the value of a signal is updated, SolidJS automatically triggers a re-render of any components that depend on that signal. This makes it easy to create reactive user interfaces that update in real-time based on changes to the application's state.
The key feature of signals is that they support fine-grained dependency tracking. SolidJS can detect exactly which parts of the user interface need to be updated when a signal changes. And then only re-render those parts. This helps improve performance and reduce unnecessary re-renders.
What will Signals change in Angular?
In a long discussion on GitHub announcing the change, the Angular team has stated they believe signals will unlock many new capabilities. These include :
- a clearer model of how data flows through the application,
- a finer update granularity,
- making zone.js optional
- cleaner and more readable code,
- and simplifying many framework concepts, such as queries and lifecycle hooks.
Making Signals the default mode of change propagation will make Angular easier to learn for people familiar with other frameworks. I don’t think the change will suddenly make Angular fashionable. But that was never the goal. However, it might help make Angular easier to pick up and write clean code in. And that will contribute to making Angular… even more Solid.
https://dev-academy.com/angular-signals/ https://medium.com/reverse-engineering-angular/angular-deep-dive-zone-js-how-does-it-monkey-patches-various-apis-9cc1c7fcc321 https://www.makeuseof.com/angular-signals-new-primitive-reactivity/