Angular Signals- a promising future of Angular App Development

The last two years have brought new advancements in the world of Angular and have amazed developers with new possibilities. Today, Angular has become a default recommendation for developing web apps globally.

As you all know, recently Angular released its most recent version v16. With this release, I am sure the developers are very happy as it helps them simplify their work. Significant advancements in reactivity, server-side rendering, and tooling have been achieved, along with numerous quality-of-life enhancements based on popular user requests, garnering over 2,500 thumbs up on GitHub.

These advancements were made based on the user (developers) requests with the aim to reduce sharp edges and learning curves to take Angular to the top.

Among all these advancements, one of the most talked about is the new reactivity system- Angular Signals which is taking the Angular world by storm, as it could be a game-changer for Angular developers.

So, to help the users understand this concept we have curated this blog about Angular signals. So, let’s get started with the Angular v16 and its advancements to look out for in 2023.

What’s new in Angular v16?

Angular v16, Google’s latest TypeScript-powered web development framework, introduces an upgraded reactivity model that bolsters web performance and developer experience.

As per Minko Gechev’s blog, this model heightens runtime efficiency, diminishes computations during change deflection, and maintains compatibility with the existing approach. By establishing clear dependencies between the view and data flow, this model simplifies responsiveness and enables effective change detection in relevant components.

Below is the list of all the advancements that you can experience with Angular v16.

• Rethinking Reactivity

A new reactivity model for improved performance, better developers’ experience, shows backward compatibility with existing systems, better runtime performance, clarifies the dependencies and data flow of the app, and much more.

• Angular Signals

Angular introduces signals as a fresh way to track model changes, serving as reactive primitives within the framework.

• RxJS interoperability

Allows the conversion of signals into observable data effortlessly using the developer preview feature @angular/core/rxjs-interop in the v16 release.

• Improved Server-side rendering

Angular now optimizes rendering by utilizing existing DOM nodes and attaching event listeners to them, rather than rebuilding the entire application.

• Hydration enhanced

Hydration improves TTI, SEO, and accessibility. Angular 16 supports out-of-the-box hydration, enhancing SSR speed.

Other important features are-

• Improved tooling experience for standalone components, pipes, and directives
• Advancing developer tooling
• Better unit testing using Jest and Web Test Runner
• Autocomplete imports within the HTML templates.
• Improved tooling for developers

Now that you know what to expect from this new version of Angular 16. Over the years, Angular is getting better, so how Signals are contributing to improving a developer’s life and performance challenges.

Let’s start with the introduction to signals, then understand why it is a need for modern-age development.

What are Signals?

The latest release of Angular is generating a lot of buzz, and it’s no surprise that signals are stealing the spotlight.

For now, let me provide a brief overview of what signals are and why they hold such immense significance. Although signals may seem like a brand-new concept in the Angular world, they have actually been utilized by other frameworks like Solid.js for quite some time.

So, what exactly are signals and why are they being hailed as the new “reactive primitive” in Angular? Picture a signal as the fundamental building block of the reactivity system. Like a conventional variable, a signal can store a value that you can access synchronously whenever needed.

However, the true power of a signal lies in its ability to notify all the interconnected elements whenever its underlying value changes. This could include a component template, another computed signal, a specialized effect function, or various other components. Essentially, a signal becomes an influential entity that can effortlessly communicate its value changes, enabling the creation of derived states in a declarative manner while maintaining exceptional performance and synchronous reading capabilities.

Pretty amazing, right?

But have you wondered why we need signals in the first place? Let’s find out.

Why do we need Signals in the first place?

In a cutting-edge web application driven by models, the framework plays a crucial role in keeping the application’s data model and user interface in sync. This mechanism, known as reactivity, is an integral part of every modern web framework.

Angular, as it stands today, relies on the zone.js library to achieve reactivity. While zone.js offers unique advantages, it also presents some distinctive challenges as below.

• Zone.js is not scalable- Zone is based on monkey-patching platform APIs that notify about any change on the browser to schedule change detection to synchronize the UI. but this approach is not scalable. You need to load zone.js every time before the app starts to patch the targeted APIs and that might be costly in case of unnecessary patching.

Another issue is that some platform APIs are not patchable, resulting in a heavy workaround. Despite many solutions, this issue could not be eliminated completely.

• Results in performance issues

After many surveys, the Angular team came to know that zone.js has been the major pain point for the developers creating performance challenges.

Whenever Angular’s assumption of data flow violates, it raises a famous error “ExpressionChangedAfterItHasBeenChecked”. It is generally assumed that the data will flow from top to bottom along the view hierarchy. As all know zone.js separates model updates from UI reconciliation, which results in “unsafe” model updates.

In some cases, zone.js can react absurdly with respect to any app activity, resulting in several unnecessary change detections.

• Need for more fine-grained reactivity

Developers often employ state management patterns or libraries to structure data and inform Angular about changes. This involves using OnPush components, Observables, and the async pipe to trigger checks when the dependent state changes. Angular operates in this mode, but relies on zone.js for change detection, resulting in partial reactivity benefits and zone.js drawbacks.

Introducing a new reactivity model to Angular is necessary, surpassing zone.js capabilities. This involves adding a framework primitive for precise tracking of model changes.

So, what features should this new reactivity model pose?

Properties of a new Reactive Primitive- Signals

Below are the properties that are excepted by signals.

• Seamless Angular Integration- Ensure smooth communication between the model and Angular, notifying the framework about any changes that affect specific components, and aligning with the overall goals of your project.
• Synchronous Access for Real-Time Updates- Enable template bindings to constantly have up-to-date values by providing synchronous access to the model, ensuring that changes are immediately reflected in the user interface.
• Side-Effect Free Value Reading- Safeguard the integrity of your code by ensuring that reading values from the model are completely side-effect free, preventing any unintended consequences or unexpected behavior.
• Glitch-Free Experience- Guarantee a flawless user experience by eliminating any glitches or inconsistencies when reading values, ensuring that the returned state is always reliable and consistent.
• Ergonomic Dependency Tracking- Streamline the process of tracking dependencies by implementing an intuitive and user-friendly system, making it easy for developers to manage and understand the relationship between different components and their dependencies.

Angular Signals aims to seamlessly integrate these reactivity models, allowing developers to focus on feature delivery instead of change detection complexities.

Why Signals are a good fit for Angular?

Below are the significant reasons that make Signals the best fit for Angular-

• Simplify Angular- The reactive primitive of Angular can replace rxjs in most cases, reducing the complexity of the application and reducing code as shown below.

• Enhance Reactivity- By using signals, Angular can achieve higher performance. Signals provide precise information about the models that have changed, allowing Angular to update the template with fine-grained granularity instead of performing a full application-wide dirty check.
• Reduced Learning Curve- With the introduction of the signal component in version 17, developers will have fewer concerns about performance issues resulting from suboptimal code. Concepts such as changeDetectionStrategy, onChanges lifecycle hook, and even pipes will become unnecessary. This reduces the likelihood of developers making mistakes that could impact the application’s performance.
• Zone-less Applications- Currently, Angular relies on the zone to detect changes and trigger change detection across the entire application. However, the zone does not provide information about which specific model has changed, and it adds to the bundle size and initial startup time of the application. Signals enable the framework to identify the exact models that have changed, allowing for zone-less applications.
• Interoperability with Rxjs- Angular offers compatibility with Rxjs, the current reactive library used in Angular. Using the toSignalObservable function, signals can be easily converted from observables, and the toObservable function enables the conversion of signals back to observables. This facilitates a gradual migration from Rxjs to signals for those who wish to take advantage of signals.

No doubt signals are successful in improving Angular’s current state. There has been a debate topic going on if, signal going to replace RxJS interoperability. Is it true? Let’s see.

Are signals going to replace RxJS interoperability?

Despite the possibility of its reduced usage in the future, RxJS is a long-term fixture that will remain relevant. Angular has no intentions of eliminating RxJS or compelling users to switch from observables to signals. In fact, using RxJS is likely a superior approach for responding to signal changes compared to utilizing effects.

There is also the option of utilizing signals and observables simultaneously and converting between the two. The newly introduced @angular/core/rxjs-interop package provides two functions for this purpose.

For converting a signal into an observable, the toObservable function can be employed.

const count$ = toObservable(count);

Please be aware that the observable you create will not capture every single value alteration of the signal. This is due to the fact that an effect is employed in the background, and effects are exclusively executed during the change detection process.

const count = signal(0);

const count$ = toObservable(count);

count$.subscribe(value => console.log(value));

count.set(1);

count.set(2);

You must use the to Signal method for converting the observable to signals.

const count = toSignal(count$);

The signal obtained from the observable will either contain the most recent emitted value or throw an error in case of an error emitted by the observable. It’s important to mention that the subscription created using the toSignal() function will be automatically unsubscribed when the component that initially created it is destroyed.

Since observables can operate asynchronously, you have the option to provide an initial value to the function.

const count = toSignal(count$, { initialValue: 0}););

Without an initial value, it will be considered “undefined”. You can use the “requireSync” for allowing the signal to throw an error if it is read before the observable emits the value.

const count = toSignal(count$, { requireSync: true }););

Reading all the exciting scopes of signals in Angular and how it can turn the tables for Angular, it seems that Angular has much to offer in the coming years.

No doubt that Angular is growing into a beautiful framework allowing developers to improve their coding skills with improved experiences.

Wrapping up

No doubt, Signals are a big thing in the Angular world. Signals are one of the projects that proved to be successful in maintaining the stability of Angular while improving its performance and the developer’s experience in developing code.

Reactivity is the heart of the model-driven UI framework and requires more powerful solutions for smoother simplification and evolutions that were not possible before. Signals bring Faster performance, better forms, improved state management, streamlined authoring format, and much more.

As an Angular development company, we look forward to incorporating this extraordinary advancement and helping businesses globally with more productive results.

Must read the latest article on Angular 16.