Le novità di Angular 20

Nella seconda giornata del Google I/O si è parlato di Angular 20 con una serie di innovazioni che promettono di trasformare radicalmente l’esperienza di sviluppo frontend. Questa nuova versione del framework rappresenta un nuovo passo in questo momento di grossi cambiamenti, verso un ecosistema più performante, reattivo e developer-friendly.

Con Angular 20, il team di sviluppo ha portando finalmente in versione stabile alcune delle funzionalità più attese dalla community. Dal miglioramento delle performance grazie al mode “zoneless” (ora in preview) all’introduzione di nuove API per la gestione asincrona dei dati, questa release segna l’inizio di una nuova era per Angular.

Signals: il cuore reattivo di Angular

I Signals continuano a essere il pilastro della nuova architettura reattiva di Angular. Introdotti come sperimentali nelle versioni precedenti, ora rappresentano la base su cui costruire applicazioni moderne e performantie sulla quale si baseranno le scommesse future di questo framework.

Una delle novità più significative è che i linkedSignal è diventato stabile. Un linkedSignal è un tipo speciale di segnale scrivibile in Angular. La sua caratteristica distintiva è che è “collegato” (linked) a uno o più segnali sorgente. Questo significa che:

1. Il suo valore iniziale è derivato da uno o più signal
2. Si mantiene sincronizzato: Quando il valore di un qualsiasi signal sorgente cambia, il linkedSignal si “resetta” automaticamente al nuovo valore calcolato.
3. È scrivibile: A differenza di un computed (che è di sola lettura), puoi modificare manualmente il valore di un linkedSignal usando i metodi .set() o .update(). Questa modifica manuale è temporanea: se i segnali sorgente cambiano di nuovo, il linkedSignal tornerà al valore calcolato.

In generale i signals offrono una gestione dello stato più intuitiva rispetto agli Observable RxJS per molti casi d’uso comuni. I vantaggi principali  includono una sintassi più semplice e migliori performance (sono di fatto delle primitive quindi eliminano tutta a parte di “dipendenze”).

// Signal base
const counter = signal(0);

// Signal derivato
const doubledCounter = computed(() => counter() * 2);

// linkedSignal - ora stabile!
const userPreferences = signal({ theme: 'light', language: 'it' });
const currentTheme = linkedSignal(() => userPreferences().theme);

Resource, httpResource e Streaming Resource

Angular 20 introduce tre nuove API fondamentali per la gestione delle operazioni asincrone, ciascuna ottimizzata per specifici scenari d’uso.

Resource API

Il resource() è perfetto per operazioni asincrone basate su Promise:

const searchQuery = signal('');

const searchResults = resource<User[], string>({
  request: () => searchQuery(),
  loader: async ({ request, abortSignal }) => {
    const response = await fetch(`/api/users?q=${request}`, {
      signal: abortSignal
    });
    return response.json();
  }
});

// Utilizzo nel template
// searchResults.value() -> dati
// searchResults.isLoading() -> stato di caricamento
// searchResults.error() -> eventuali errori

httpResource API

httpResource() si integra nativamente con HttpClient di Angular:

const userId = signal(1);

const userProfile = httpResource<User>({
  url: computed(() => `/api/users/${userId()}`),
  loader: (url) => this.http.get<User>(url)
});

Streaming Resource

Per operazioni che richiedono aggiornamenti in tempo reale, come per esempio l’utilizzo di un servizio AI che fornisce risposte man mano:

const liveData = streamingResource({
  request: () => signal('live-feed'),
  loader: ({ request }) => {
    return new EventSource(`/api/stream/${request()}`);
  }
});

Zoneless in developer preview

Una delle novità più calde di Angular 20 è il mode zoneless, ora disponibile in developer preview. Questa funzionalità rappresenta un cambio di paradigma fondamentale nel modo in cui Angular gestisce il change detection del DOM.

Cosa cambia

Tradizionalmente, Angular utilizzava Zone.js per intercettare automaticamente tutte le operazioni asincrone e triggering del change detection: il problema principale è che l’aggiornamento del DOM avviene anche quando non è necessario, in risposta ad ogni evento del browser. La modalità zoneless elimina questa dipendenza, dando agli sviluppatori controllo diretto su quando e come avviene l’aggiornamento dell’interfaccia. L’obiettivo è che il DOM si aggiorni solo dove è stato modificato il dato, evitando calcoli inutili e migliorando le performance.

Perché è stato introdotto

I motivi principali includono:

• Performance superiori: Eliminazione dell’overhead di Zone.js
• Bundle più leggeri: Rimozione di una dipendenza significativa
• Debugging semplificato: Stack trace più puliti e comprensibili
• Compatibilità migliorata: Funziona meglio con API moderne e librerie di terze parti

Il mode zoneless è particolarmente potente quando combinato con i signals, che forniscono un meccanismo naturale per notificare cambiamenti di stato.

Server Side Rendering e Incremental Hydration

Angular 20 porta significativi miglioramenti al Server Side Rendering (SSR) con l’introduzione dell’Incremental Hydration come funzionalità stabile.

Incremental Hydration

Questa tecnica permette di “idratare” selettivamente parti dell’applicazione, migliorando drasticamente i tempi di caricamento iniziale. La pagina viene pre-renderizzata lato server per poi essere inviata al client. Una volta ricevuta il client inizierà a caricare tutte le risorse (come farebbe normalmente), andando poi a sovrascrivere le parti pre-renderizzate.

@Component({
  template: `
    <div>
      <h1>Contenuto statico</h1>
      @defer (on viewport) {
        <heavy-component />
      }
    </div>
  `
})
export class PageComponent {}

L’Incremental Hydration offre:

• Miglioramento del 40-50% del Largest Contentful Paint (LCP)
• Caricamento più veloce delle parti critiche dell’applicazione
• Migliore SEO grazie al rendering server-side ottimizzato
• Esperienza utente superiore con contenuti visibili immediatamente

Attenzione che quando si utilizza questa tecnica dobbiamo tenere in considerazione che molte cose non saranno disponibili (es. localstorage/sessionstorage).

Standalone components: lo standard del presente e del futuro

I Standalone Components sono ormai diventati lo standard de facto per lo sviluppo Angular e rappresentano chiaramente il futuro del framework, lo sapevamo già però è stato ribadito ulteriormente.

I vantaggi sono i seguenti:

• Sintassi semplificata: Eliminazione della necessità di NgModules per molti casi d’uso
• Bundle più piccoli: Importazione selettiva delle dipendenze, non tutto il modulo nel quale veniva importato
• Developer Experience migliorata: Meno boilerplate e configurazione

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <div class="user-card">
      <h3>{{ user().name }}</h3>
      <p>{{ user().email }}</p>
    </div>
  `
})
export class UserCardComponent {
  user = input.required<User>();
}

Testing: tre soluzioni in competizione

Con la deprecazione di Karma, Angular 20 introduce un nuovo approccio al testing con tre soluzioni sperimentali tra cui la community dovrà scegliere:

1. Jest (Testing Node.js)

Ottimizzato per test unitari veloci:

ng test --runner=jest

2. Web Test Runner (Testing Browser)

Specializzato per test che richiedono un ambiente browser reale:

ng test --runner=web-test-runner

3. Vitest (Testing Ibrido)

Soluzione moderna che supporta sia Node.js che browser:

ng test --runner=vitest

Migliorata l’integrazione con Firebase

Angular 20 introduce significativi miglioramenti nell’integrazione con Firebase, rendendo più semplice e intuitivo lo sviluppo di applicazioni che utilizzano i servizi Google Cloud.

Le nuove API offrono:

• Integrazione nativa con i signals per il real-time database
• Supporto migliorato per Authentication e Firestore
• Semplificazione delle configurazioni e del setup iniziale

Angular.dev/ai: best practice per l’AI

Una novità interessante è la creazione della nuova sezione http://angular.dev/ai, dedicata interamente alle best practice per integrare funzionalità di Intelligenza Artificiale nelle applicazioni Angular.

Questa risorsa fornisce:

• Linee guida per l’integrazione di API AI
• Pattern di design per interfacce AI-friendly
• Esempi pratici di implementazione
• Considerazioni su performance e user experience

È un chiaro segnale di come Angular si stia posizionando per il futuro dello sviluppo web, dove l’AI giocherà un ruolo sempre più centrale.

Roadmap: il futuro è nei Signals

La roadmap di Angular 20 e oltre mostra chiaramente due priorità principali:

1. Miglioramento dell’Esperienza di Sviluppo

• Nuovi strumenti CLI più intuitivi
• Debugging migliorato
• Documentazione e tutorial aggiornati
• Integrazione IDE più profonda

2. Performance del Framework

• Ottimizzazioni continue del runtime
• Migliori algoritmi di change detection
• Bundle size ridotto
• Tempi di build più veloci

Signal Forms: il prossimo grande passo

Una delle novità più attese è l’introduzione delle Signal Forms, che rivoluzioneranno la gestione dei form in Angular:

// Anteprima Signal Forms (sperimentale)
const userForm = signalForm({
  name: signalControl(''),
  email: signalControl('', [validators.email]),
  age: signalControl(0, [validators.min(18)])
});

// Reattività automatica
const isValid = computed(() => userForm.valid());
const formData = computed(() => userForm.value());

Conclusioni

La strada verso il futuro di Angular è tracciata: più performance, più semplicità e più controllo per gli sviluppatori. Angular 20 è solo un passo in più all’interno di una rivoluzione incominciata qualche versione fa.

L’introduzione del mode zoneless in developer preview, la stabilizzazione delle Resource API e il consolidamento dei Standalone Components dimostrano come Angular stia evolvendo verso un ecosistema più moderno e performante.

Il futuro di Angular è chiaramente orientato verso i signals come primitiva fondamentale per la reattività. Per chi non ha ancora iniziato a esplorare queste nuove funzionalità, è il momento perfetto per iniziare.

Cosa fare invece se abbiamo già applicazioni complesse che non sfruttano i Signal? E’ una bella domanda, ogni caso andrà valutato caso per caso. Gli eventi di RxJs non sono da buttare via, funzionano bene e ci han permesso di realizzare anche applicazioni di livello enterprise. Chiaro è che il futuro del framework sarà basato su Signal, dove è possibile (nuove evolutive / refactoring) converrà svilupparle sfruttando queste nuove primitive, considerando inoltre che dovrebbero essere più performanti.

Infine vi lascio il link se vi siete persi la live del Google I/O ’25 dove si parlava di tutto questo!

Grazie per aver letto, alla prossima!

Giorgio