Auteur: Danny Holstein

In december 2022 was ik een developer in een Capacity Building groep van Bee-Ideas en ben ik voor het eerst in aanraking gekomen met Angular. Op dat moment was de meest recente versie Angular 15 en dit heb ik mijzelf bijgebracht door online bronnen en het boek: Pro Angular: Build Powerful and Dynamic Web Apps. Fifth Edition geschreven door Adam Freeman.

Ieder half jaar geeft het Angular development team een nieuwe grote release uit van Angular. Op dit moment van schrijven is de meest recente versie Angular 18. Er is na 3 updates veel veranderd in Angular. In deze post worden een aantal veranderingen besproken.

Op de achtergrond gaan het Wiz-team en het Angular-team binnen Google meer met elkaar samenwerken. Waarbij het uiteindelijk de bedoeling is dat beide frameworks (Wiz en Angular) met elkaar verenigd worden.

Wiz is een intern Google-framework waarbij de nadruk ligt op applicaties met hoge prestaties, zoals: Google Search, Google Photos, Google Payments en YouTube. Hierbij is het internetverkeer enorm en moet er ook rekening gehouden worden met trage verbindingen van gebruikers. Wiz focust zich op het leveren van de meest geoptimaliseerde applicatie met relatief weinig interactiviteit.

Angular daarentegen focust op een hoge interactiviteit en ontwikkelaars-ervaring (Developer Experience - DX). Voorbeelden daarvan zijn: Google Analytics en Google Cloud Console. Iedere nieuwe versie van Angular voorziet in features om applicaties te optimaliseren.

Een resultaat van de samenwerking is dat beide teams functionaliteiten van elkaar overnemen. Zo heeft het Wiz-team de signals van het Angular-team overgenomen voor de mobiele web-versie van het YouTube-portaal. Het Angular-team neemt SSR (Server-Side Rendering) over van het Wiz-team. Met SSR worden alle applicatie-componenten vooraf geladen op een geoptimaliseerde stream.

Op de achtergrond is er ook samenwerking met andere Angular libraries, zoals RxJS, NgRX, NGXS en anderen. De samenwerking bestaat op het gebied van de signals, zodat deze aansluiten op gebruikerszaken van deze libraries om zoneless-applicaties mogelijk te maken.

De mogelijkheid om zoneless-applicaties te maken, is de grootste verandering in Angular 18. In vorige versies gebruikt Angular de library Zone.js voor change-detection. Hierbij is Zone.js een library achter de schermen die automatisch de boomstructuur van componenten (‘tree-of-components’) afgaat om te bepalen welk component geüpdatet moet worden. Zoneless wil zeggen dat Zone.js niet langer wordt gebruikt en Angular zal niet meer automatische updates uitvoeren. Een voordeel van zoneless is dat de bundle-size kleiner wordt en hierdoor een applicatie sneller zal laden.

De signals - die voor het eerst geïntroduceerd zijn in Angular 16 - hebben in versie 18 een verdere integratie gekregen en zijn meer deel gaan uitmaken van de core functionaliteit. Decorators zoals: @Input, @ViewChild, @ContentChild, etc. kunnen vervangen worden door vergelijkbare signals. De @Input-decorator kan in Angular 18 vervangen worden door InputSignal (voor one-way binding) of ModelSignal (voor two-way-binding).

De aandachtige lezer zal opmerken dat de output hierboven geen signal is en dat klopt. De nieuwe output dient om de syntax te standaardiseren samen met de nieuwe input-signal. De nieuwe syntax zorgt voor een betere leesbaarheid en kan voor minder code zorgen. Zie het voorbeeld hieronder met het gebruik van een dynamische route-parameter:

Zoals de afbeelding hierboven toont, kan de code van het page-component aanzienlijk verminderd worden in Angular 18. Er wordt bovendien geen gebruik gemaakt van RxJS operatoren maar wel van een input-signal. In eerdere versies van Angular moest er veel meer code worden geschreven, maar dit is met de komst van de nieuwe signals veranderd en verbeterd.

Voor de rest biedt Angular 18 meer optimalisaties. Andere veranderingen zijn: 4 nieuwe Observable-events toegevoegd voor formulieren, er is ondersteuning voor TypeScript 5.4, de control-flow (geïntroduceerd in Angular 17) is niet langer in developer preview maar is nu stabiel.

Een belangrijke verandering in Angular 17 is de introductie van de nieuwe control-flow. Hierbij kunnen structurele directives (zoals: *ngIf, *ngFor en ngSwitch) worden vervangen door control flows (zoals: @if, @for en @switch). Zie het voorbeeld hieronder:

De voorbeeldcode hierboven doet feitelijk hetzelfde. De nieuwe control flow is geïntroduceerd om het weergeven van componenten sneller te maken. In Angular 17 was deze functionaliteit nog in developer preview, maar in Angular 18 is deze stabiel. Het is de verwachting dat de structurele directives in toekomstige versies van Angular deprecated zullen worden, want de nieuwe control-flow heeft betere prestaties.

Het Angular-team heeft ook aan re-branding gedaan en het rode logo is voorzien van kleurgradiënten. Angular presenteert zichzelf nu met de moderne benadering. Het logo is nog steeds in schild-vorm en dat blijft behouden en is er al sinds AngularJS. Met het nieuwe logo is er ook een nieuwe geüpdatete webpagina voor Angular 17 en verder: https://angular.dev/

In Angular 16 waren de signals nog in developer preview, maar in Angular 17 zijn deze stabiel. Het voordeel van signals is dat niet het hele change-detection-systeem (door Zone.js) wordt overgehaald bij een verandering in de 'tree of components'. Normaal gesproken wordt de gehele applicatie opnieuw weergegeven, wanneer er maar een klein ding is veranderd. De ChangeStrategy.OnPush dat hielp al om een applicatie meer efficiënt te maken. Maar dit was een gedeeltelijke oplossing voor een probleem dat er eigenlijk helemaal niet hoorde te zijn.

De signals zijn een compleet nieuwe benadering zonder de change-detection-cyclus en Zone.js. Wanneer een signal verandert, dan worden de listeners en consumers daarvan op de hoogte gesteld. Signals zijn een stuk sneller, want de hele ‘tree-of-components’ (inclusief zijn methoden) wordt niet doorlopen om een verandering te tonen. In Angular 17 is de mutate-functie uit Angular 16 niet opgenomen, want muteer-functies zijn altijd vatbaar voor fouten. Het voordeel van signals is dat deze gebruikt kunnen worden bij relatief eenvoudigere code en er niet uitgeweken hoeft te worden naar complexere code met RxJS.

In Angular 17 is verder de nadruk komen te liggen op optimalisaties en het verkleinen van de bundle-size. Verder is er ‘vertraagde ladingen’ toegevoegd met de nieuwe @defer control-flow die in templates gebruikt kan worden. Componenten in Angular 17 zijn standaard stand-alone (dat is feitelijk een combinatie tussen een component en een module). Een andere opmerkelijke optimalisatie zit in de compiler die nu gebruik maakt van Vite om TypeScript om te zetten in JavaScript en 20-30x sneller is dan de ‘vanilla’ TypeScript-compiler.