Edition 23/52: Angular in 2023
In 2022 we got with Standalone Components, the inject function, typed forms, host directives, and features, which improved the development experience and were completed/fully available.
It was a little bit different in 2023. We saw the start of Signals and better Hydration and got a glimpse of what is possible with the template syntax extension.
Signals are a lightweight approach to integrate reactivity into our application. RxJs will still have its place but for more advanced stuff like combining events and managing data streaming, especially when asynchrony plays a role.
Signals will also simplify Angular in different areas. For example, the framework will know exactly when and where to run the change detection. We got local change detection, and with the upcoming Signal Inputs, we no longer need to learn about life-cycle hooks like OnChanges.
For Alex Rickabaugh , tech lead of the Angular framework, the main benefit of Signals is not a performance gain. According to Alex:
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.
Hydration was the second construction site that the Angular team opened. In Angular 16, we got real hydration, which means Angular doesn't rebuild the complete application in the browser. Version 17 saw the stable release of the ApplicationBuilder, which didn't just replace webpack with esbuild but also brought in SSR as a first-class citizen.
So the Angular CLI has SSR built-in, and we don't rely on a semi-official project like nguniversal.
SSR is critical for any Angular application that runs on the internet and requires good SEO.
The improvements in hydration will go on. Minko Gechev , Angular product lead, gave the following outlook 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.
Whereas hydration and signals are features that other frameworks have already had for quite some time, it is a different story regarding the @defer block. That is part of an extension to the template syntax, and we declaratively lazy load a component or a group of components with all its dependencies.
And there's way more potential. According to Jeremy Elbourne, Angular tech lead, they are even thinking of a block where we can define Server Components as it is in React.
In that regard, Angular is a pioneer.
So we see massive changes which will still go in 2024. The main challenges, therefore, are:
The Angular team introduces those features incrementally; that's how most of us can do it with our applications.
Once a particular part is ready, it becomes a developer preview. That means it is stable, but breaking changes could happen within a major version. We have seen this in Angular 16, where they removed the mutate function from the Signal.
This step-by-step introduction allows the Angular team to gain feedback very early, to work on multiple features simultaneously, and to learn and make necessary changes along the way.
Again, an example: Signal Components were initially planned for Angular 17 and would have exclusively brought zoneless Angular applications. Because the Angular team had the necessary time to research the usage of Signals and gather feedback from the community, they devised a plan 2. There will be intermediary steps; the first will be Signal Inputs, and it will also be possible to reach zoneless without Signals.
We are not forced to use new features, but we can still upgrade to the latest version. Even with Angular 17, and the same will be for 18, we can use NgModules, constructor-based DI, no Signals, only RxJs, structural directives like ngIf or ngFor and webpack. Nothing is deprecated.
In those cases where it is possible, Angular provides schematics. They can modify our code and automatically migrate to the latest features - if we want. The schematics for Standalone Components and the extended template syntax are the most common examples.
So, backwards compatibility and schematics allow Angular to innovate quickly, and we can still evolve at our speed.
We get better hydration, Signal Inputs, the Signal Component, and hopefully more of the defer block.
So, when I say we can be very positive for 2024, that's an understatement.
Last but not least. Ng-News is now 2,5 years old and available on most social channels. At the beginning of 2023, we had around 800 followers on X. Now, we have more than 2,000. YouTube counted ten subscribers and is now at 800. I hope that more will follow, but this is a question of time.
Because of ng-news, I became GDE (Google Developer Expert) and received an award at ng-poland.
The postings on X sometimes reach above 10K views, which shows that you are also actively sharing ng-news, and for that, I want to thank you very much.
I wouldn't do it without you. So please continue to play your role as well.
I wish us all the best for 2024. Happy New Year!