Angular 16 signals simpler reactivity
Previously, Angular had to rely on zone.js to provide change detection. However, this solution did not scale cleanly and required many small performance hacks to work efficiently in large applications. With Angular 16, zone.js becomes an optional dependency, while Signals introduce what we call reactive primitives:
signalis the equivalent of a variable and defines a changing value, comparable to a class property or an observable
computedis a composite or calculated value that derives its value from other signals. With
computedit is possible to clearly define when a value needs to be recalculated, which offers a decisive performance advantage over classic interpolated values in Angular.
effectdenotes a function that is executed when dependencies change. This means signal values that are used within the effect. They enable developers to react easily and conveniently to changes in the value of signals. Both primitive signals and computed signals are taken into account. Developers don’t have to worry about handling these values because transitive dependency detection is done automatically.
This structure allows the reactivity of the components to be controlled in a much more fine-grained manner. The simpler mental model clears up spongy dependencies of the respective view and unclear data flow. In addition, the number of arithmetic operations at runtime decreases, which ultimately leads to higher performance.
Backwards compatibility and interaction with RxJS
Although full implementation of Signals is not expected until later this year, developers can now use the feature via @angular/core or @angular/core/rxjs-interop. Future plans also include simplifying lifecycle hooks that work on top of Signals.
Predefined functions such as
toObservable, which allow conversion to and from observables. In addition, the new
takeUntilDestroyed-Operator to clean up observables in components, which simplifies resource management in Angular applications.
In the further course, the Angular team also plans to convert other interfaces to the new Signals API. For example, component inputs and the component lifecycle hooks are to be converted.
All-day workshops are available both on-site and online.
Excerpt from the program:
Server-side rendering with Angular Universal
Angular Universal now offers a Developer Preview for an overhauled server-side rendering. A significant innovation is the introduction of the “Full App Non-Destructive Hydration”. Unlike previous approaches where the DOM was re-rendered as soon as the hydration took place, the framework now checks if the DOM nodes already exist when building internal data structures. It then associates these nodes with the appropriate event listeners. In order to use this feature, it is necessary to activate the function
provideClientHydration() include in the providers array.
This approach brings several advantages for users of Angular apps:
- No more flickering during application loading process
- Improved performance on Web Core Vitals
- Easy integration into existing apps, leading to higher adoption rates
- The conversion can be implemented incrementally. With the
ngSkipHydrationattribute, components can still manually manipulate the DOM if necessary.
According to the Angular team, initial tests show an improvement of 45 percent in the Largest Contentful metric – a significant increase in user experience.
These first steps are intended to mark the beginning of the future of server-side rendering, with further features such as partial hydration and resumability to follow soon.
Angular is now clearly hot on the heels of market competitors like Next.js and is turning a previously neglected topic into a real feature.
Extension of the standalone APIs
Angular 16 extends the standalone APIs to make migrating modules and components easier. New schematics convert existing code, remove superfluous NgModules and change the application’s bootstrapping so that it is based on standalone APIs.
All you need is a single command in the project:
ng generate @angular/core:standalone
For new projects, Angular 16 offers the possibility to directly create a simplified structure with standalone components. With the command
ng new --standalone developers can set up a new project that is already based on standalone APIs. This makes it easier to get started with Angular projects and enables a more efficient project structure.
Verbessertes Tooling in Angular 16
Angular 16 has some interesting new features and improvements in the area of tooling:
This includes a preview of the new build tooling that combines Vite and esbuild. As a replacement for Webpack, the Angular team is now testing the use of these two tools. In initial tests, esbuild has shown a 72 percent improvement in build performance for production builds. Vite, as an esbuild on esbuild, also enriches
ng serve with this performance gain. In the Angular CLI, Vite is only used as a development server instead of mapping the entire compilation in it.
Additionally, Angular 16 supports TypeScript 5.0, including support for ECMAScript decorators, no ngcc, and support for service workers in standalone applications.
Overall, these improvements in Angular 16 tooling contribute to an improved developer experience and more efficient workflows.
Innovations for the developer experience
In addition, Angular 16 brings a number of innovations and improvements that further optimize the developer experience:
For the first time it is now possible to address the inputs of a component directly in the route configuration. This makes it possible to store values in the
resolve-property of a route, which are then available directly after calling the route.
Developers now have the option of sending an input as
required to mark. As a result, a component can only be used if it fulfills the required inputs. This step is especially useful for component libraries and large development teams to improve code quality and maintainability.
More flexible handling of cleanup logic in OnDestroy
With the introduction of the Injectable
DestroyRef developers can be more flexible in registering cleanup logic in components, which improves resource management in Angular applications.
Another innovation is the introduction of self-closing tags for component selectors. As a result, it is no longer necessary to write out tags twice, but they can be designed to be self-closing.
In a blog entry, the development team presents the new features in Angular 16. More details can be found in the GitHub repository.