Angular si è rinnovato con un sito completamente nuovo ed un insieme di funzionalità che danno una ventata d’aria fresca al framework, sia dal punto di vista di Developer Experience che di User Experience.

In questo articolo vedremo alcuni tra i principali cambiamenti.

Angular Signals

Signals è un sistema che permette ad Angular di gestire uno stato applicativo in maniera granulare.
Questo sistema reattivo di gestione dello stato permette al change detector di ottimizzare la re-renderizzazione dei componenti coinvolti, permettendo allo sviluppatore di massimizzare le performances dei componenti che sviluppa.

Un signal è un wrapper che rende “osservabile” un attributo di classe.

L’API di Signals rende il paradigma di programmazione reattiva più semplice da applicare grazie alla sua API minimale:

				
					@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

Per creare un Signal, è sufficiente dichiarare un attributo di classe assegnandogli un valore iniziale “wrappato” dalla funzione signal .

Per leggere il valore corrente di un Signal si invoca l’attributo di classe come funzione.

Per modificare il valore di un Signal bisogna passare il nuovo valore coma argomento del metodo set . Il Change Detector di Angular verrà così segnalato e provvederà a notificare tutti gli osservatori, nel nostro caso l’aggiornamento del template e dell’attributo computed.

Per “reagire” ai cambiamenti di valore di un Signal, si usa effect, una funzione che accetta una callback come argomento, e la invoca ad ogni cambiamento di stato.

Un Signal può essere di diversa natura: read-only, scrivibile, composto ecc. Grazie a dei metodi di utilità, un Signal è compatibile con gli Observables della libreria rxjs . Per approfondimenti lasciamo il link alla documentazione dedicata e al nostro form di contatto.

Control flow (Developer Preview)

I template Angular supportano il “control flow” come alternativa alle direttive ngIf, ngFor.

Un esempio:

Control flow

				
					@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h2>Todos</h2>
    <input #text />
    <button (click)="add(text.value)">Add</button>

    @for (todo of todos; track $index) {
    <p>
      <input type="checkbox" (change)="toggle($index)" />
      @if (todo.done) {
      <s>{{ todo.text }}</s>
      } @else {
      <span>{{ todo.text }}</span>
      }
    </p>
    } @empty {
    <p>No todos</p>
    }
  `,
})
export class TodosComponent {
  todos: Array<{done: boolean; text: string}> = [];

  add(text: string) {
    this.todos.push({text, done: false});
  }

  toggle(index: number) {
    this.todos[index].done = !this.todos[index].done;
  }
}

Common Module

				
					@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Todos</h2>
    <input #text />
    <button (click)="add(text.value)">Add</button>
    <div *ngIf="todos.length; else empty"></div>
    <p *ngFor="let todo of todos; let index = index">
      <input type="checkbox" (change)="toggle(index)" />
      <s *ngIf="todo.done; else pending">{{ todo.text }}</s>
      <ng-template #pending>
        <span>{{ todo.text }}</span>
      </ng-template>
    </p>
    <ng-template #empty>
      <p>No todos</p>
    </ng-template>
  `,
})
export class TodosComponent {
  todos: Array<{ done: boolean; text: string }> = [];

  add(text: string) {
    this.todos.push({ text, done: false });
  }

  toggle(index: number) {
    this.todos[index].done = !this.todos[index].done;
  }
}

Hydration SSR

Angular è cambiato anche nella gestione dello stato in Server Side Rendering: dopo che il client riceve l’FCP e il bundle js, non viene renderizzata nuovamente l’intera pagina ma soltanto alcuni nodi specifici. Questo permette di:

Non avere artefatti visivi dopo il first contentful paint.
Ottenere migliori prestazioni Web Core Vitals
User Experience più fluida

In aggiunta a tutti i benefici che il Server Side Rendering offre già.

Deferrable views

Analizziamo il caso in cui si utilizza Angular in Server Side Rendering: bisogna essere consapevoli di cosa si renderizza lato server, e cosa si renderizza lato client.

Questo comportamento si può gestire in diversi modi, ad esempio dichiarando una variabile di stato booleana inizializzata a false che diventa true dopo il ciclo di vita di mount (gestito quindi lato client). Questo stato usato come binding in un ngIf vincola una porzione di template ad essere gestita solo dal client e non dal server.

In Angular 17 nulla di ciò è più necessario. E’ sufficiente usare il blocco @defer direttamente sul template e un attributo di utilità isBrowser nel Component. Angular gestirà il flusso di stato

				
					@Component(
    selector: "my-app",
    template: `
    @defer(when isBrowser) {
        <p>Hi, I am the client.</p>
    }
    <p>Hi, I am the server.</p>
    `
)
export class AppComponent {
  isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
}

Un altro caso d’uso importante è quello in cui il browser deve renderizzare un componente che per qualche motivo impiega molto a comparire sulla pagina.

Una buona User Experience si basa anche su quanto velocemente una pagina risponde ad un input utente. Un caso standard di “loading spinner” si potrebbe descrivere in questo modo:

				
					@defer {
  <large-component />
} @loading (after 100ms; minimum 1s) {
  
}

Migrazioni per la standalone API

Per supportare gli sviluppatori nella migrazione da NgModules a standalone api, il team di Angular ha creato un tool che permette di automatizzare il processo. Il requisito è di avere installato almeno la versione 15.2.0, la build deve essere pulita senza errori di compilazione ed il branch sul tuo vcs deve essere pulito.

Per lanciare l’automatismo basta scrivere questo comando su terminale dalla root del progetto:

				
					ng generate @angular/core:standalone

Per i nuovi progetti basta usare il flag --standalone dopo ng new,

Esbuild e Vite (Developer Preview)

ng serve ora supportaesbuild per generare le build di produzione e di sviluppo e di produzione, e vite per il server di sviluppo. Questo significa che le performances di build in fase di sviluppo saranno sensibilmente più veloci. E’ una funzionalità opt-in essendo ancora in “developer preview”, per attivarla bisogna modificare angular.json come segue:

				
					...
"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

Jest come test runner (Developer Preview)

Jest è uno dei framework di testing più diffusi e amati nell’ecosistema JavaScript. Da questa versione di angular in poi è possibile usarlo:

npm install --save-dev jest

				
					{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
    }
  }
}

Conclusioni

Con queste novità il team di Google dimostra non solo di ascoltare le richieste degli sviluppatori (vedi Jest, Esbuild + Vite) e un’attenzione particolare alla Developer Experience (vedi Control Flow, @defer), ma dimostra soprattutto che Angular è un Framework che tiene stretto il proprio posto nel mercato dell’industria Web e lo terrà ancora per lungo tempo.

Personalmente ho molto apprezzato l’introduzione dei Signal ed il lavoro fatto per semplificare e migliorare il Server Side Rendering.

Il nuovo sito di Angular sarà completamente open-source e disponibile su GitHub, non vediamo l’ora di poterlo studiare e condividere le nostre scoperte con voi.

Vuoi approfondire uno di questi argomenti?

Contattaci tramite il form su questo sito web o tramite i nostri canali social!

Alla scoperta di Bun: l’ecosistema JavaScript veloce, moderno e innovativo

Matteo Veraldi — Wed, 20 Sep 2023 13:29:53 +0000

Introduzione

In questi ultimi 14 anni, gli strumenti richiesti per sviluppare in NodeJS sono diventati sempre più lenti e complessi (vedi: webpack, babel, lerna, ecc…).

Bun è un toolkit all-in-one gratuito e open source che mira a risolvere questo problema: permette di gestire, eseguire, costruire, testare e debuggare singoli file o complesse applicazioni full-stack scritte in JavaScript e TypeScript in maniera semplice.

E’ stato sviluppato da “Oven”, un’azienda di sviluppo software con sede a San Francisco fondata con l’unico obiettivo di trasformare lo sviluppo in JavaScript rendendolo veloce e performante.

Dalla versione 1.0 diventa ufficialmente adatto ad essere utilizzato in produzione.

Ne avevamo davvero bisogno?

Dalla prima versione di Node JS, diversi strumenti sono stati sviluppati ed interconnessi tra loro per dare luce ai frameworks e alle librerie popolari che utilizziamo ogni giorno.

Ogni strumento aggiunto porta con sé un contributo di complessità in termini di configurazioni e performances, e viene accumulato con tutti gli altri strumenti già presenti e configurati all’interno del progetto.

Ad esempio, per sviluppare una “semplice” libreria di componenti React in TypeScript con NodeJS devi ALMENO introdurre e configurare:

Il package.json
Un gestore di pacchetti
Una runtime JavaScript
Un traspilatore per convertire TypeScript a JavaScript moderno
Un traspilatore per convertire JavaScript Moderno a CommonJS
Un test runner e una libreria per far girare i test automatici
Un bundler per creare l’entry point delle applicazioni di esempio

Per sviluppare una semplice libreria di componenti React in TypeScript con Bun devi solo configurare il package.json.

Non potrebbe essere più semplice di così!

Maggiore è la complessità della libreria o dell’applicazione, maggiore è la probabilità che verranno utilizzati strumenti aggiuntivi o che ci sia la necessità di ritoccare quelli già presenti.

L’obiettivo di Bun in questi termini è semplice: ridurre al minimo la complessità e massimizzare la performances dei progetti JavaScript moderni. Le librerie e i frameworks che funzionano con Node JS dovrebbero continuare a funzionare con Bun come al solito, senza che lo sviluppatore debba imparare o configurare nulla di nuovo.

Nonostante non servano tutti gli strumenti esterni utilizzati nei progetti NodeJS, Bun non è un collo di bottiglia per lo sviluppo! è stato sviluppato in maniera da essere altamente personalizzabile per soddisfare la maggior parte dei requisiti progettuali.

Velocità – Bun vs NodeJS

Ecco qualche dato di comparazione tra Bun e NodeJS:

Come package manager

usare “bun” al posto di “npm” per l’installazione dei pacchetti aumenta le performances di 29 volte.

Come bundler

usare “bun” al posto di webpack per il bundling del codice aumenta la velocità di costruzione degli artefatti di 224 volte.

Come transpiler

La conversione di TypeScript in JavaScript con bun al posto di tsc aumenta la velocità di di 44 volte:

Come runtime

Un WebSocket in Bun è più veloce rispetto ad un Web Socket in Node JS di 6 volte:

Conclusioni

Al momento della scrittura di questo articolo Bun è stato dichiarato stabile e production-ready da pochi giorni; La community è molto attiva e non ci sono progetti molto grossi che lo utilizzano.

E’ una novità imperdibile per tutti gli sviluppatori Backend o Frontend che usano Node JS, e vale la pena attendere ancora un po di tempo prima di cominciare a introdurlo nei prossimi progetti di ricerca e sviluppo.

Se vuoi saperne di più, consulta il sito ufficiale di Bun o contattaci tramite il form!

L'articolo Alla scoperta di Bun: l’ecosistema JavaScript veloce, moderno e innovativo proviene da RD Tech.

Novità Archivi - RD Tech

Nuovo Percorso Formativo avviato tra RD Tech e Istituto di Istruzione Superiore “Carlo Rambaldi” di Lamezia Terme

Le novità di Angular 17

Angular Signals

Control flow (Developer Preview)

Control flow

Common Module

Hydration SSR

Deferrable views

Migrazioni per la standalone API

Esbuild e Vite (Developer Preview)

Jest come test runner (Developer Preview)

Conclusioni

Vuoi approfondire uno di questi argomenti?

Alla scoperta di Bun: l’ecosistema JavaScript veloce, moderno e innovativo

Introduzione

Ne avevamo davvero bisogno?

Velocità – Bun vs NodeJS

Come package manager

Come bundler

Come transpiler

Come runtime

Conclusioni