Angular is a famous framework with a long history of more than 10 years. It is no longer popular in web development community due to the race of newly emerging frameworks, libraries.
But Angular team never back down and they still release new major versions every year and recently, they released more than 1 version in a year. This showed dedication and determination in upgrading the framework to new heights. And they have started the revolution this year through 2 major versions 16, 17, which brings a lot of materials to enhance performance via new updates and features.
Angular v16
- Released date: May 3rd, 2023.
According to Angular team, Angular 16 is arguably the biggest release since the initial rollout of Angular. Why? Because there are lot of improvements to performance by the new reactivity model, non-destruction hydration, new and easy to use state’s management, new SSR features. Angular also takes care of developer experience by updating many new features and tooling. Moreover, esbuild + Vite enters develop preview to powers both development and production builds. These are main changes in Angular version 16:
Hydration with SSR
Everyone is probably familiar with this term; hydration is a process that makes a web interacted. Specifically, after received HTML rendered on server, browser will download JS bundle then attach events to DOM and then RE-RENDER APP FROM SCRATCH :(. This is called destructive hydration because the client app will discard the pre-rendered HTML and re-render the entire page.
But thanks to the new non-destructive hydration process in this version 16. The client app will reuse server rendered DOM structures, seeks up existing DOM nodes, attaches event listeners to those nodes and bind the data to complete rendering. This brings benefits:
- Better Web Core Vitals (such as FCP, LCP, CLS).
- No flickering on page.
- Easy to integrate with existing app
- More in https://angular.io/guide/hydration#hydration
New Reactivity Model:
Angular uses zone.js to detect changes but it is considered a bad idea for big applications because its purpose is to notify Angular something might have happened and trigger change detection for the whole application even when you make one simple data modification. But from v16, Angular team announces zone.js is optional by using RxJS or Signal to manage states and notify model’s changes instead.
A zoneless application is a super performant, it reduces framework’s overhead and also the bundle size. But this is just the first step on the path to writing fully zoneless applications. It still requires to manually trigger the change detection when get rid of zone.js.
Angular team aims to a “fine-grained” reactivity which means only provide “fine-grained” information about model changes (not as vague as zone.js) and this brings a new Reactivity Primitive called Signal with 3 main concepts (signal, effect, computed). Maybe you have heard about this model through Preact, Solid, Vue.
Signal:
Angular team spends a lot of time to research through number of different alternatives and Signal stood out because of its ability to meet requirements:
- Signals can detect which data model has changed and only sync the related UI.
- Track dependencies automatically.
- It’s glitch-free (RxJS isn’t) (demo: https://codesandbox.io/p/devbox/glitch-free-test-hd8v32?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A35%2C28).
- Signal’s value is always available synchronously and reading signal can’t trigger side effects.
- It can be used anywhere (components, services, inside or outside class… ).
3 main concepts in Signal:
- signal: a “reactive” value notifies framework when it changes.
- computed: a value been created by other signal values without mutating the original.
- effect: an operation happens when signals used inside it changed. It’s kinda like useEffect in React but we don’t need to add dependencies because Angular tracks it automatically.
Demo: https://angular-signals.netlify.app/
Remember this is just a developer preview means there are some features the team haven’t implemented yet.
RxJS Interoperability:
Can Signal replace RxJS? Not yet! It’s no longer the basis Angular’s reactivity but Angular teams believes their strength lies in orchestrating complex asynchronous operations. So, they provide interoperability between Observables and the new Signal reactivity system. We can use toSignal to convert observable into signal and toObservable to convert back.
Remember this is developer preview means there are some features the team haven’t implemented yet.
A new RxJS operator called takeUntilDestroyed and destroyRef can be the replacement for ngOnDestroy lifecycle hook. It is useful to clean up signal effects, unsubscribe observables to prevent memory leaks in application but faster and more readable than the old way.
Router Updates
In v16, router data now can be used as component inputs. We can use route data (resolvers and data properties), path parameters, query parameters via component’s inputs.
const routes = [
{
path: 'homepage',
loadComponent: import('./homepage'),
resolve: { title: () => getTitle() }
}
];
@Component(...)
export class Homepage {
@Input() title?: string;
}
Improve Build System
Angular team announced that esbuild-based build system has entered developer preview. And brought an optimistic result: over 72% improvement in cold production builds.
Angular team uses Vite for development server of ng serve. If you want to enable Vite in esbuild, head over to angular.json to configure this feature.
And Many More
- Required input.
- Standalone APIs update.
- Better unit testing with Jest and Web Test Runnter.
- By default, new projects will start with fewer files.
- Remove ngcc (Angular compatibility Complier – tool supports libraries which still based on old view engine) so maybe some libraries will not be supported and that means the angular bundle size will be reduced.
- Autocomplete imports in templates.
- Content Security Policy (CSP) support for inline-styles.
- And still more https://github.com/angular/angular/blob/main/CHANGELOG.md#1600-2023-05-03
Angular v17
- Released date: November 6th, 2023.
- Required Node.js >= v18
Right after the marvelous improvement of version 16, Angular team releases version 17 at the end of 2023, and declare that this is a renaissance of Angular, and this will set the new standards for performance and developer experience.
You can rest assured about the features in developer preview of version 16 because some of them have been officially announced as stable (esbuild + vite, RxJS interoperability, hydration) due to the optimistic response by the community. So, what’s new in Angular v17?
Improvement for SSR
Remember when you want to implement SSR on Angular 16, you must install individual package @nguniversal/express-engine and config the app? Now Angular represents a new command which asked you want to enable SSR or not. You can also add SSR to existing project via command “ng add @angular/ssr package“. Both have no need to config manual.
They also do some behind-the-scenes improvements to increase build speed, developers can use ESM modules in server-side code…
Hydration was in developer preview in v16 and now it’s officially ready for production due to its stability. That means you can use hydration in production.
New Built-in Control Flow
To meet community needs, Angular releases new control flow @if, @else, @empty, @for, @switch, @case … which are the replacement for old directive like *ngIf, *ngFor, *ngSwitch… and provide convenient for developers. Those old directives are still being kept in this version. Especially about the loop, the new @for increases up to 90% faster runtime compared to *ngFor (https://krausest.github.io/js-framework-benchmark/current.html)
You can migrate it from old project via command “ng g @angular/core:control-flow“
Note: this built-in control flow feature is still in developer preview mode.
Deferrable views
Deferable blocks help you to delay loading components under specific circumstances. Any components, pipes, directives included in this block will be lazy-loading. This works based on a declarative and powerful deferred loading with unprecedented ergonomics. In certain circumstances, deferrable views will be trigger:
- @defer (when <condition>): component will be loaded when condition return true.
- @defer (on idle): component will be loaded when browser reach idle state.
- @defer (on timer(<amount>)): component will be loaded after certain time.
- @defer (on immediate): automatically load when browser finishes loading.
- @defer (on interaction): component is loaded when user interact with the element (it could be a click, input events)
- @defer (on hover): load component when user hover over it.
- @defer (on viewport): load component when it enters the viewport.
Along with the render condition, Angular provides a prefetch feature to download the component but doesn’t render it until the condition is triggered.
For example: @defer (when <condition>, prefetch on hover), @defer (on interaction, prefetch on timer(1s)), @defer (on viewport, prefetch when <condition>), …
Vite + esbuild are Now Default
According to Angular team: They have updated the build pipeline when using hybrid rendering. With SSR & SSG you can observe up to 87% speed improvement in ng build and 80% faster edit-refresh loop in for ng serve.
New Lifecycle Hooks
You can’t manipulate DOM in SSR, even though Angular recommends avoiding direct DOM manipulate whenever possible. But in some cases, you still need to interact with the element perhaps to create new component from third parties or use Web APIs,… Then these two new lifecycle afterRender, afterNextRender are the suitable choices. These registers render callback after Angular finishes render the page.
You can see more at https://angular.dev/guide/components/dom-apis
Addition
- Stable signal, promise new desirable features in the futures.
- Standalone component now is enabling default.
- View transitions.
- Dependency injection debugging in DevTools.
- Many more: https://blog.angular.io/introducing-angular-v17-4d7033312e4b
Conclusion:
Surely Angular in this year 2023 is the beginning of a holistic revolution because these make things completely changes in good way for both performant and for developer experience: new reactivity model, improvement SSR, provides many developers tooling updates, … And they expect to release Angular’s signal-based reactivity, hybrid rendering and many more features in the future.
In my opinion, Angular 16 is enough to use at the moment based on its complete improvement, and some features in version 17 are still in developer preview mode. But you still can leverage it and make a complete application with higher performance and easier to code.
Reference:
- https://blog.angular.io/angular-v16-is-here-4d7a28ec680d?gi=68486b3c12c3
- https://blog.angular.io/introducing-angular-v17-4d7033312e4b
- https://www.youtube.com/watch?v=bkOEMw0oTkY&ab_channel=Angular