Angular 17: le novità dell'ultima versione

Panoramica sul framework

Angular è un framework open-source, progettato da Google - la cui prima versione è stata rilasciata nel 2010 - per lo sviluppo di applicazioni web.

Più nel dettaglio, è uno degli strumenti preferiti dai front-end developers, poiché Angular nasce per la progettazione di interfacce interattive, dinamiche e personalizzabili.

Inoltre, la sua architettura si basa su Typescript, offrendo agli sviluppatori l’opportunità di realizzare delle applicazioni efficienti, scalabili e complesse con un effort minimo.

Anche le prestazioni ottimizzate rientrano tra le ragioni che hanno reso Angular un framework così richiesto sul mercato. Infatti, Angular risponde perfettamente allo sviluppo di app che si basano su un elevato quantitativo di dati.

Prima di descrivere quali sono le nuove caratteristiche introdotte nella versione Angular 17, vogliamo proporre degli esempi di alcune applicazioni che sono state sviluppate con questo framework.

Google AdWords - la piattaforma più popolare per l’advertising online - utilizza Angular per la gestione di interfacce utente complesse, in modo possano apparire più semplici e gestibili per gli utenti finali.

Ora che abbiamo inquadrato cos’è e come funziona Angular, possiamo scendere nel dettaglio e scoprire come la versione 17 sia ancora più funzionale ed efficiente delle precedenti.

Le caratteristiche della nuova versione

La release di Angular 17 è avvenuta a novembre 2023 e, ovviamente, ha portato con sé numerose novità che non sono sfuggite ai front end developers, ma nemmeno agli appassionati del settore!

In effetti, questo framework è sottoposto a continui aggiornamenti, i quali non fanno altro che migliorare l’esperienza di sviluppo e potenziare Angular che, ormai, riesce ad adattarsi con flessibilità a diverse esigenze di business.

Nuova documentazione, nuovo logo, nuova identità

Angular ha deciso di rimodernare il più possibile la propria proposta, partendo da un lavoro di rebranding.

Infatti, il rilascio della versione 17 è stato accompagnato da un logo tutto nuovo. Questa è una vera e propria novità perché, per chi non lo sapesse, il team Google non ha mai lavorato a questo aspetto prima del 2023.

Allo stesso modo, è stato effettuato un lavoro di aggiornamento alla documentazione dedicata ai developers, con un evidente sforzo verso contenuti interattivi e volti ad educare gli utenti.

È disponibile sul sito ufficiale Angular la documentazione della versione 17, ma il team sta lavorando ad un altro progetto che, attualmente, è ancora in beta version, ovvero: angular.dev.

Questo non sarà semplicemente il nuovo sito di Angular, ma il luogo che i developers potranno visitare per ottenere una documentazione sempre aggiornata, seguire tutorials e guide per scoprire, nel dettaglio, tutte le nuove funzionalità del framework.

Questo passaggio definitivo avverrà, tuttavia, col rilascio della versione 18. Intanto, una delle novità più interessanti riguarda l’introduzione di tutorial incorporati.

Grazie a WebContainers, questi mostrano step by step come usare Angular, consentendo agli utenti di eseguire il codice direttamente dal proprio browser.

Ma c’è di più: è possibile imparare come realizzare un’app completa, utilizzando la Angular CLI direttamente dal Web.

In questa sezione, è possibile seguire un tutorial che inizia da come creare “Hello World” - il punto di partenza per capire come funziona il framework - fino allo sviluppo dell’applicativo.

Riteniamo molto interessante l’obiettivo che sta guidando questo cambio di direzione intrapreso dal team Angular: aprire un sito web che favorisca l’apprendimento degli utenti interessati, ma anche ottenere il supporto della community creando una documentazione open source.

Server Side Rendering (SSR)

Il Service Side Rendering (SSR), citando la documentazione ufficiale di Angular:

“is a process that involves rendering pages on the server, resulting in initial HTML content which contains initial page state”.

In termini più semplici, il Server Side Rendering è una tecnica che consente la generazione di pagine HTML lato server, piuttosto che adottare un approccio client-server.

In pratica, con l’SSR il server è in grado di eseguire il codice dell’app Angular e generare l’HTML prima di inviarlo al browser, così che possa visionare il contenuto richiesto senza attendere che carichi.

Infatti, rispetto al client-side rendering, l’SSR assicura diversi vantaggi, così come riportiamo di seguito e come possiamo leggere dalla documentazione ufficiale di Angular:

• ottimizzazione delle performance in termini di caricamento;
• miglioramento delle prestazioni misurabili attraverso i Core Web Vitals
• ottimizzazione in chiave SEO della pagina inviata al browser.

La nuova versione Angular 17 offre delle prestazioni ancora più elevate, in termini di caricamento e indicizzazione, rispetto a quelle precedenti.

Inoltre, è visibile un netto miglioramento della user experience: resa estremamente più fluida rispetto al passato.

Quanto descritto mette in evidenza come l’SSR di Angular 17 abbia dei benefici sia per gli sviluppatori che per gli utenti stessi.

Signals

Una novità introdotta in Angular 17 riguarda i signals: una nuova componente introdotta per rendere la gestione dei dati più efficiente e snella.

Per coloro che già sviluppano in Angular, è bene sapere che i signals entrano a gamba tesa nella sostituzione di metodi tradizionali come Observable e Subject.

I segnali su Angular rappresentano, quindi, un nuovo modo per gestire lo stato e le possibili modifiche effettuate ad un’applicazione.

La prima caratteristica dei signals è che forniscono un meccanismo reattivo per comunicare dei possibili cambiamenti ai componenti e ottimizzare le prestazioni del software sviluppato.

Ecco quali sono gli evidenti vantaggi apportati dall’introduzione dei Signals:

• gestione dello stato granulare: questi nuovi componenti consentono di aggiornare e/o modificare esclusivamente determinate parti di codice, migliorando, nel complesso, le performance dell’applicazione;
• sintassi dichiarativa: rende il codice più leggero e semplice da aggiornare. Inoltre, consente di specificare direttamente quale stato bisogna modificare e come. Dopodiché, Angular si occuperà della gestione totale dell’intero processo di aggiornamento esclusivamente per le componenti interessate.

Esempio pratico dei Signals su Angular 17

Presentiamo qui un rapido e conciso esempio per capire come funzionano i Signals su Angular 17.

Iniziamo con l’HTML:

Tempo trascorso: {{time | async}} secondi

Ora, proseguiamo con il Typescript:

export class AppTime {
  time = signal(0);

  constructor() {
    setInterval(() => {
        this.time.next(this.time() + 1);
    }, 1000);
  }
}

In primis, abbiamo dichiarato una classe “AppTime” e inserendo export l’abbiamo resa pubblica e, così facendo, può essere importata da altri moduli.

Successivamente, abbiamo dichiarato il nostro segnale (time) impostando il valore a zero. Nella seconda parte, invece, abbiamo semplicemente costruito il codice affinché il segnale costruito tenesse traccia dello scorrere del tempo, aggiornando il proprio valore, di volta in volta, di +1.

Per quanto semplice, l’esempio del timer aggiornato mostra come la funzione signals sia stata introdotta per rendere il codice più snello, manutenibile e prevedibile in caso di necessità di debug.

If, for e switch

La versione Angular 17 è caratterizzata da modifiche relative alla sintassi, sempre per far sì che il framework possa apparire più semplice, intuitivo e conciso.

Pertanto, all’interno dei control flow blocks - funzionalità che permette una gestione del flusso di controllo all'interno dei template più semplice e fluida - i developers potranno applicare direttive per il controllo condizionali, quali:

if, for e switch che sostituiscono ngIfFor, ngFor e ngSwitch.

In primis, una sintassi costruita con if, for, else e switch è molto più concisa rispetto a quella tradizionale, sia perché è comune a molti linguaggi di programmazione, sia perché è evidentemente più vicina al linguaggio naturale.

@Component ({ 

selector: ‘app-root’,
 
template: ` 
Welcome to Angular-17! 

 

@if(userInfo.isLoggedIn) {

} @else if(UserInfo.isAdmin) { 
} @else { 
`, 
standalone: true, 
}) 

export class AppComponent { 
userInfo = { 
isLoggedIn: true, 
isAdmin: true, 
name: ‘Max’
 } 
}

Sulla guida dedicata ai control flow di Angular è possibile approfondire l’argomento, verificando come le nuove direttive - simili a quelle di Javascript - sostituiscono quelle tradizionali.

@defer

Un’altra novità introdotta in Angular 17 è l’attributo @defer. Questo è un elemento che può contribuire ad un netto miglioramento della user experience, soprattutto perché può essere combinato con il lazy loading e ottimizzare il caricamento di un’app.

Infatti, l’uso di un blocco @defer ha diversi benefici. Prima di tutto, è uno strumento tramite cui poter ridurre il tempo di caricamento iniziale previsto, migliorando i risultati dei Core Vitals Web, così come leggiamo sulla documentazione ufficiale.

Inoltre, inserire @defer nel codice significherebbe anche assicurare il caricamento solo dei componenti di cui l’utente ha bisogno in quel momento, evitando un possibile rallentamento dell’intera applicazione.

In breve, l’attributo in questione è stato introdotto per evitare determinate criticità e potenziare sia le performance che la scalabilità di un’applicazione Angular.

Perché utilizzare Angular 17: vantaggi della nuova release

Prima di concludere, potrebbe essere utile un breve recap dei vantaggi associati alla nuova versione di Angular 17:

• community ampia e collaborativa: il team Google sta ancora lavorando allo sviluppo di una piattaforma open-source, nonché della documentazione ufficiale, promuovendo la collaborazione e la coesione tra i developers appartenenti alla community Angular;
• built-in control flow: funzionalità che ha condotto ad un evidente miglioramento delle performance delle applicazioni progettate col framework Angular, nonché ad una semplificazione e ad una riduzione del codice boilerplate;
• aggiornamento della documentazione e dei materiali educativi: chiunque voglia approcciarsi ad Angular, potrà farlo con maggiore facilità, soprattutto perchè il team ha lavorato allo sviluppo di tutorial e guide interattive, grazie alle quali è possibile imparare a progettare app in Angular, consapevoli che avranno accesso a materiali realmente validi;
• introduzione nuove API: la nuova versione di Angular prevede una serie di nuove API volte ad un’ulteriore ottimizzazione e semplificazione nelle logiche di sviluppo anche per componenti più complesse.

In conclusione…

Angular è un framework che, già da tempo, grazie a specifiche caratteristiche - scalabilità, modularità, two way data binding - ha conquistato il mondo dei developer, attraendo a sé una community sempre più vasta e dinamica.

Nel corso degli anni, sono stati effettuati diversi aggiornamenti che hanno giocato a favore di Angular in termini di prestazioni, sicurezza e innovazione.

Noi ci siamo già messi all’opera per scoprire nel dettaglio come funziona Angular 17, e voi?