We’re continuing the Angular Momentum with the biggest release since the initial rollout of Angular; making large leaps in reactivity, server-side rendering, and tooling. All this comes with dozens of quality-of-life improvements across feature requests, with over 2,500 combined thumbs up on GitHub!
Rethinking Reactivity
As part of the v16 release we’re excited to share a developer preview of a brand new reactivity model for Angular which brings significant improvements to performance and developer experience.
Angular Signals
The Angular signals library allows you to define reactive values and express dependencies between them. You can learn more about the properties of the library in the corresponding RFC
RxJS interoperability
You’ll be able to easily “lift” signals to observables via functions from @angular/core/rxjs-interop
which is in developer preview as part of the v16 release!
Server-side rendering and hydration
Based on our annual developer survey, server-side rendering is the number one opportunity for improvement for Angular. For the past couple of months we partnered with the Chrome Aurora team on improving the performance and DX of the hydration and server-side rendering. Today we are happy to share the developer preview of full app non-destructive hydration!
In the new full app non-destructive hydration, Angular no longer re-renders the application from scratch. Instead, the framework looks up existing DOM nodes while building internal data structures and attaches event listeners to those nodes.
The benefits are:
- No content flickering on a page for end users
- Better Web Core Vitals in certain scenarios
- Future-proof architecture that enables fine-grained code loading with primitives we’ll ship later this year. Currently this surfaces in progressive lazy route hydration
- Easy integration with existing apps, in just a few lines of code (see code snippet below)
- Incremental adoption of hydration with the
ngSkipHydration
attribute in templates for components performing manual DOM manipulation
In early tests we saw up to 45% improvement of Largest Contentful Paint with full app hydration!