The mobile and desktop web application development framework Angular has released the 16th major version. The main updates of this version include the introduction of the new Reactive program development model Angular Signals by the development team, and the improvement of the Hydration function to further improve page loading. Performance, and add an efficient build system based on esbuild to the CLI.
Signals is now in the developer preview phase of Angular 16. The official said that this new responsive development model can greatly improve program performance and developer experience, and maintain compatibility and interoperability with the current system. Signals achieves better execution performance by reducing the number of calculations in the process of change detection, and because the Signals responsive mental model is simpler, whether it is an application’s dependency diagram or data flow, it becomes easier to understand .
Signals provides more precise responsiveness, can only check the affected component changes, and in the change detection cycle, computed properties can be used without recomputation, that is to say, the computed properties provided by the new responsive model will not be used in Recalculated every change detection cycle.
Computed properties are dynamically calculated properties based on the values of other properties or data sources. In the past, Angular’s change detection mechanism, when the application state changes, Angular will visit all bound properties and recalculate all related expressions. So when a computed property depends on multiple variables, even if those variables don’t change, the computed property will be recalculated, which can have a noticeable impact on the performance of large applications.
In Angular’s new responsive model, three basic types of signal, computed, and effect are added. Computed properties will only be recalculated when the dependent signal or property changes, and all computed properties will not be recalculated during the change detection cycle. , which can improve the performance of the application. The Signals responsive program development model can also reduce the dependence on Zone.js, and the framework model can be notified of changes by using signals. Zone.js provides a zone mechanism that can be used to encapsulate and intercept asynchronous activity in the browser.
The development team also enhanced the server-side rendering and Hydration functions in Angular to improve the performance of the application. Hydration refers to the process in which a webpage is first rendered by the server to generate static HTML, and then handed over to the client browser to make it a fully interactive single-page application.
Developers can now use an enhanced Hydration feature called non-destructive Hydration in Angular v16, which allows the Angular client to no longer have to re-render the application from scratch, but to query existing DOM nodes when building internal data structures. And attach event listeners directly to these nodes, so that the content rendered by the server is preserved when the client is hydrating. The advantage of not re-rendering the entire application, in addition to improving performance by 45%, the page will not flicker, thereby improving the user experience.
The Angular team also added the esbuild build system to the CLI tool to improve the build speed. In initial testing, the cold build of production applications improved the speed by up to 72%.