Angular Signals a Reactive Revolution

Hey friends! Today, we’re looking at Signals, a radical change coming to Angular, a framework known for… well, not making radical changes. Is Angular abandoning its core values? Does this change signal a resurgence of the Typescript-based framework? What is the new reactive primitive being introduced? Will this change how Angular is perceived?

We’ll look at all this and more. In particular, we will be exploring the following:

• how 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.

And in a sense, by not jumping on every single Javascript bandwagon, the Angular team has been able to be selective. They have decided to go ahead with a concept inspired by a recent framework. And I wonder to what extent the Angular team was inspired by the name of that framework and how it dovetails with their core values.

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.
• Second, it wraps these events (and the code calling them) into a JavaScript object (called a “zone”) that preserves the invocation context

Angular uses this library to wrap its component parts and to trigger updates whenever an external event occurs.

This library was groundbreaking when it was introduced… in 2014. And to be fair: Back then, JavaScript was missing many of the features it has now, such as Promises and the fat arrow syntax, which helps preserve context… The team did what they could with the tools they had.

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.

Further reading:

https://dev.to/this-is-angular/angular-signals-everything-you-need-to-know-2b7g

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/