The Angular Landscape in 2023: A Shift Toward Signals and Beyond
The previous year brought a wave of finalized features that significantly enhanced the developer experience. Standalone Components, the inject function, typed forms, host directives, and a host of other improvements became fully available, marking a period of consolidation and polish.
Angular's trajectory in 2023, however, took a more foundational turn. The core focus shifted towards laying the groundwork for the future, with the initial rollout of Signals and notable strides in hydration capturing the community's attention. These developments offered a preview of the extended capabilities possible with template syntax.
Signals represent a new, streamlined methodology for embedding reactivity directly into the application's core. While RxJs remains an essential tool, its primary role will continue to be for more complex scenarios, such as orchestrating event streams and handling asynchronous data flows.
Beyond mere reactivity, Signals are poised to simplify the framework itself. Angular will gain precise knowledge of when and where change detection needs to run, enabling capabilities like local change detection. Combined with the future introduction of Signal Inputs, developers may find that traditional life-cycle hooks like OnChanges become obsolete.
According to Alex Rickabaugh, the tech lead for the Angular framework, the primary advantage of the Signals approach isn't strictly about performance. He explains:
We can update the model and just magically know that our UI is going to be synchronized. But we run into these problems where sometimes we want to flow data backwards in the system, and that becomes harder to do...one of the main benefits is that it actually decouples the way your data flows from the UI hierarchy.
Mountain View and San Francisco Angular March Virtual Meetup - YouTube
Join us for our March virtual meetup! Register online at goo.gle/mtv-sf-meet.
youtube.com
The Angular team's efforts on hydration formed the second major area of development. Angular 16 introduced a true hydration feature, a process where the browser is no longer required to rebuild the entire application from scratch. Version 17 marked the stable release of the ApplicationBuilder, a change that not only replaced webpack with esbuild but also elevated server-side rendering (SSR) to a first-class citizen within the CLI.
With SSR integrated directly into the Angular CLI, reliance on semi-official companion projects like nguniversal is no longer necessary.
For any Angular application operating on the internet where SEO is a priority, SSR is now considered a critical component.
Future iterations of hydration are already in the pipeline. Minko Gechev, Angular's product lead, shared the team's vision for 2024:
We'll be moving further to more fine grain hydration... We would like to explore how we can leave some islands on the client that are not hydrated. So that developers can delay loading certain JavaScript that is not essential. This is going to significantly speed up page performance.
AMP 47: Minko Gechev on Angular 18+ - YouTube
-🌟 Special Edition: Live from GDE DevFest Bootcamp at Google's Mountain View HQ!Hey folks, buckle up because this episode is nothing like what you've experi...
youtube.com
While signals and hydration are features that have existed in other frameworks for some time, the @defer block is a different story. This feature is part of a proposed extension to Angular's template syntax, enabling declarative lazy loading for a component or a collection of components along with all their associated dependencies.
The potential for this syntax extension is substantial. Jeremy Elbourne, an Angular tech lead, has indicated that the team is exploring a block for defining Server Components, akin to the pattern popularized in the React ecosystem.
In this specific arena, Angular is positioning itself as an innovator.
These changes represent a massive evolution that will continue to unfold through 2024. The primary challenges for the Angular team are twofold:
- How to introduce these features without causing a disruptive "big bang" for the ecosystem, and
- perhaps more critically, how to provide support for companies that cannot migrate their existing codebases to adopt all these innovations immediately.
The team's strategy is to roll out these features incrementally, a pace that allows most developers to adopt them in their own applications gradually.
The introduction process involves a developer preview phase once a feature is considered stable. During this phase, breaking changes are possible within the same major version, as evidenced in Angular 16 when the mutate function was removed from the Signal API.
This step-by-step approach offers multiple benefits. It allows the Angular team to collect valuable early feedback, work on several features concurrently, and adapt based on what they learn during the process.
A prime example of this is the Signal Component. Initially planned for Angular 17, the goal was to deliver exclusively zoneless Angular applications. The additional research time and community feedback it gathered allowed the team to devise a revised strategy. The path forward now includes intermediary steps, starting with Signal Inputs, and it will also be possible to achieve a zoneless application without adopting Signals.
The framework remains highly compatible. Adoption of new features is not mandatory, and developers can still upgrade to the latest version while using existing patterns. Even with Angular 17, and the same will be true for 18, one can continue to use NgModules, constructor-based dependency injection, rely solely on RxJs, use structural directives like *ngIf and *ngFor, or build with webpack without encountering any deprecation warnings.
For migration paths where automation is feasible, the Angular team offers schematics. These tools can modify existing code to automatically transition to the latest features, should the developer choose to use them. The schematics for Standalone Components and the new template syntax are the most frequently cited examples.
The combination of strong backward compatibility and schema-driven migration support enables Angular to advance quickly while allowing development teams to progress at their own chosen speed.
Looking ahead, we have the promise of improved hydration, the introduction of Signal Inputs, the full Signal Component, and the further expansion of the @defer block.
To say we can simply be positive for 2024 would be a significant understatement.
As a final note, Ng-News celebrates its 2.5-year anniversary and is available on most social platforms. The community's growth this year has been remarkable. Our follower count on X, formerly known as Twitter, grew from roughly 800 at the start of 2023 to over 2,000. The YouTube channel, which began the year with ten subscribers, has now reached 800. I am optimistic for continued growth on that platform, as it will just take a bit more time.
This year, my contributions to ng-news led to me becoming a Google Developer Expert and receiving an award at ng-poland.
The engagement on X, with posts sometimes reaching over 10K views, clearly shows that many of you are actively sharing the ng-news content.
This journey wouldn't be possible without that active participation, so I sincerely thank you for your role in it.
Wishing everyone a prosperous New Year and the very best for 2024.