For noen dager siden ble versjon 19 av Angular-rammeverket lansert.
Denne gangen har kjerneteamet i Angular jobbet mye med å forbedre utvikleropplevelsen (DX), i tillegg til å fokusere på ytelsesforbedringer.
– Det er forbedringer som skal gjøre det hyggeligere å jobbe med rammeverket, men også hyggeligere å bruke som konsument, forteller Angular-utvikler Jørn Are Hatlelid til kode24.
I versjon 19 har flere funksjoner som har vært under utvikling en stund blitt forbedret. Det viktigste er Signals og serverside-rendring med inkrementell hydrering – noe vi skal komme tilbake til.
#1: Kvitter seg med stort bibliotek
En av de mest omtalte nye funksjonene i Angular i det siste har vært Signals, som ble regnet som stabilt allerede fra versjon 17 som kom for ett år siden.
Men det er en masse nytt relatert til Signals også i versjon 19.
– Hvorfor skal man bruke signals?
– En av de viktigste oppgavene til et frontend-rammeverk er å binde sammen verdier i JavaScript og html/DOM. Det er en forventning at når man setter en verdi i koden til en komponent, at den reflekteres på siden man ser på, forklarer Hatlelid.
Han forteller at denne "magien" i dag håndteres av et bibliotek som heter zone.js, som deler applikasjonen inn i biter som den kjører endringssjekk på. Har noe endret seg, så oppdateres siden.
– Det er fint i teorien, men det fungerer ikke alltid som det skal og zone.js er et relativt stort bibliotek som man lenge har hatt ønsker om å kunne kvitte seg med.
– Signals er et ganske lettvekt alternativ, hvor verdiene som oppdateres er objekter som selv holder orden på om endringsmelding er nødvendig.
#2: Bedre signals-API
I Angular 19 har Signals-API-et blitt utvidet og forbedret.
Hatlelid forteller at man i Angular allerede hadde "signal", "computed", "effect", "input" og "output". Nå i versjon 19 har man i tillegg fått "resource", og "linkedSignal", som er i preview.
– Lager du en ny applikasjon, skal det nå være mulig å lage den helt uten zone.js.
– Oppgraderer du til Angular 19 kan du velge å automatisk konvertere @Input og @Output til å bruke signals. Det kan sikkert by på litt utfordringer om man bruker mye RxJS, så jeg gleder meg til å se hvor godt dette fungerer i mine prosjekter.
Slår sammen rammeverk – si hei til «Wangular»
#3: Inkrementell hydrering
– I versjon 19 har serverside-rendring (SSR) blitt utvidet med inkrementell hydrering. Det må du forklare!
– Serverside rendering (SSR) høres rart ut for et frontendrammeverk. Men skal man ha god SEO så bør de sidene man sender til nettleseren fra serveren inneholde fornuftig html med innhold som egner seg for søkemotoren.
– Selv lager jeg stort sett verktøy som større selskaper bruker internt, og SSR er ikke noe jeg bryr meg om til daglig. Men, siden Angular støtter både SSR og SSG (Static Site Generation), kan vi sende mer ferdig eller nesten-ferdig html til klienten også fra en standard filserver, forklarer Hatlelid.
Med hydrering menes prosessen der HTML først sendes fra filserveren til nettleseren, for så at JavaScript lastes og applikasjonen kobles sammen med den eksisterende HTML-en på siden. Målet er å raskere få se applikasjonen eller siden man ønsker, med minst mulig bruk av båndbredde.
– Tidligere har vi kunnet "lazy-loade" moduler ved bruk av ruteren (i praksis forskjellige url-er). Nå kan vi markere biter av templatet som skal hydreres senere, kalt delvis eller inkrementell hydrering, ved hjelp av @defer som vi fikk i versjon 17.
«Det er ganske irriterende å få en side med en knapp som ikke fungerer med en gang.»
– Nå er mulighetene med denne utvidet, og vi har mer kontroll på når script for den markerte biten skal lastes. Det kan vi gjøre fordi Angular-kompilatoren selv splitter opp de bitene med kode som til slutt utgjør den endelige applikasjonen.
– Valgene kan være basert på tid, interaksjon eller liknende. Bruker man en ServiceWorker kan man laste skriptene til din maskin (men ikke inn i nettleseren) i bakgrunnen, for så å lynraskt hente de inn ved behov. Det kan spare en del minne og prosessorkraft.
Nytt i 19 er også at Angular kan fange klikk og tastetrykk som skjer før applikasjonen er hydrert, og spille av disse handlingene om igjen når scriptet er klart.
– Det er ganske irriterende å få en side med en knapp som ikke fungerer med en gang.
Velge rammeverk? Nicklas mener du bare har to valg
#4: "Standalone" komponenter
En annen nyhet i Angular 19 er at komponentene er "standalone" som standard. Det betyr at man ikke lenger trenger å lage en modul til å ha komponenter i (selv om man kan).
– I en periode har man måttet sette "standalone: true" på alle komponenter som ikke er med i en modul. Nå er dette motsatt. Oppgraderingen til Angular 19 kommer selvsagt med automatiserte skript (schematics) som fikser koden din til den nye standarden, sier Hatlelid.
– Er det andre ting du liker med Angular 19?
– Det er også veldig hyggelig at ESlint nå gir deg advarsel på alle moduler, komponenter eller direktiver som du har inkludert i komponenten din som ikke er i bruk. Tidligere gjaldt dette bare i kode, men nå også i templatet.
Elkjøp vraka Angular: «Morsomste jeg har gjort!»
– Selv liker jeg å få renere kode, så å få tatt vekk alle "standalone" attributtene, og å virkelig begynne å bruke signals med det nye asynkrone "resource"-api-et blir spennende, avslutter Hatlelid.
Han inviterer alle Angular-interesserte til å bli med på et Angular 19-"release party" i Microsofts lokaler i Oslo den 5. desember.
Se video fra lanseringen av Angular 19 – med de viktigste nyhetene: