Angular 11 update: Dit zijn de highlights

1. Developer Experience Verbeteringen

Blije developers betekent betere code. Daarom ben ik erg blij om te zien dat er verschillende Quality of Life verbeteringen in de nieuwste versie van Angular zitten. Zo is er bijvoorbeeld een sterk verbeterde CLI output wanneer je de applicatie build. De CLI output laat overzichtelijk zien wat voor stappen er zijn genomen, en wat de grootste boosdoeners zijn qua bestandsgrootte.

In Angular 11 zijn er ook verbeteringen aan Hot Module Replacement: vanaf nu is het mogelijk om met eén commando deze feature te gebruiken. Met ng serve –hmr wordt de development server opgestart met HMR. Op het moment dat je een wijziging maakt in het component, wordt alleen dit component opnieuw ingeladen in de browser, zonder een page refresh. De state van de pagina blijft identiek. En je ziet binnen enkele seconden de nieuwe versie van het component op de pagina verschijnen.

Angular 11 gebruikt nu ook ESLint in plaats van TSLint, waar vanaf 1 december 2020 geen ondersteuning meer voor is. ESLint is vergelijkbaar met TSLint, maar door focus aan te brengen op eén linter, in plaats van twee, kan er op een sneller tempo doorontwikkeling plaatsvinden binnen het JavaScript en TypeScript ecosysteem. Meer informatie over de hows en whats kan je hier vinden.

Tot slot ondersteunt Angular vanaf nu Internet Explorer 9, 10 en IE Mobile niet meer. Dit werd al aangekondigd in de release notes van Angular 10, maar is nu officieel. Dit is een Developer Experience verbetering in de zin dat het een legacy target platform minder is om rekening mee te houden. Daarnaast is dit een uitstekend drukmiddel om meer focus aan te brengen op het verbannen van oude en onveilige webbrowsers binnen organisaties.

2. Performance Verbeteringen

Er zijn performance verbeteringen doorgevoerd op meerdere vlakken. Voor gebruikers is het fijn dat vanaf nu Angular font inlining wordt toepast. Dit betekent dat lettertypes niet meer als losse bestanden worden geserveerd, maar dat ze worden gebundeld in CSS-bestanden of zelfs in index.html. Vooral wanneer er meerdere lettertypes gebruikt worden, kan dit tot een volle seconde in laadtijd besparen. Hierdoor kan de gebruiker nóg sneller de applicatie gebruiken.

Ook aan de achterkant zijn er processen versneld: de ngcc compiler is nu twee tot vier keer zo snel als voorheen. Dit ga je vooral merken tijdens het installeren van node dependencies. Vaak worden deze door ngcc gecompiled zodat dit niet hoeft worden gedaan tijdens het opstarten van de development server. Daarnaast gebruikt Angular nu ook TypeScript v4.0, dat ook zorgt voor een sneller build proces.

3. Open Source Focus

Wie de Angular community breder in de gaten houdt, weet dat er de nodige uitdagingen waren binnen het ontwikkelteam en hun aanpak van de doorontwikkeling. Begin augustus heeft het Angular core team de Angular Roadmap uitgebracht: een overzichtelijke pagina met de speerpunten waar Angular op lange termijn naar toe gaat.  

Eén van de punten is dat het core team Operation Byelog heeft uitgevoerd: een grote opschoning en prioritering van alle issues op GitHub. Er zijn veel veelgevraagde issues en feature requests opgelost, en de rest is geïndexeerd om een globaler plaatje te creëren van de behoefte van ontwikkelaars die Angular gebruiken. Met dit proces ontstaat er meer focus om de écht belangrijke issues op te pakken.

Hoe kan ik updaten?

Zoals ik gewend ben van nieuwe Angular releases is het updaten naar versie 11 een soepel proces. Het uitvoeren van het commando ng update @angular/cli @angular/core zal voor veel applicaties het hele proces in eén keer afronden. In een van mijn applicaties had ik nog wat extra dependencies, zoals @angular/fire voor Firebase en @ngrx/store voor state management. In dit geval kon de update niet automatisch worden uitgevoerd. De Angular CLI liet dit duidelijk weten en gaf tips over mogelijke oplossingen. Binnen een uur had ik dan alsnog mijn middelgrote Angular applicatie van versie 10 naar 11 gemigreerd.

TopTip: wil je weten wat een nieuwe Angular versie precies voor impact gaat hebben op jouw applicatie? Bezoek eens https://update.angular.io/ , waar je kan aangeven wat voor soort applicatie je gebruikt en hoe complex deze is. Na het invullen van deze informatie krijg je direct een stap-voor-stap handleiding te zien, inclusief wat voor breaking changes er zijn en hoe je deze kan oplossen. Deze tool wordt al sinds Angular 2 bijgehouden, dus ongeacht op welke versie je op dit moment zit, kan je hiermee binnen de kortste keren up-to-date zijn.

Wat komt er allemaal in versie 12?

Met de Angular 11 release is er experimentele ondersteuning toegevoegd voor Webpack 5, wat nóg betere performance en kleinere build outputs betekent. Het is mogelijk om Webpack 5 al te gebruiken binnen een Angular 11 project, alhoewel ik het niet snel zal aanraden aangezien het nog onduidelijk is wat voor bijwerkingen het kan hebben.

Ook in een volgende release komt een nieuwe versie van de Angular Language Service: de tool die jou feedback geeft in jouw IDE over de code die je schrijft. De nieuwe language service zal bijvoorbeeld beter rekening houden met Types wanneer je template sytnax aan het schrijven bent, om sneller inzicht te geven in wat er wél of niet mogelijk is.

Op lange termijn komen er verbeteringen aan Angular Universal (SSR), end-to-end testing en debugging. Wil je alle ontwikkelplannen van het Angular core team bekijken? Check dan de Angular Roadmap.