NodeJS Archivi - RD Tech

Le novità di Angular 17

Matteo Veraldi — Mon, 13 Nov 2023 16:39:11 +0000

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!

L'articolo Le novità di Angular 17 proviene da RD Tech.

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.

Come cambiare versione di NodeJS con un solo comando!

Matteo Veraldi — Mon, 31 Jul 2023 10:35:55 +0000

TLDR;

Utilizzando il CLI NVM (Node Version Manager), puoi installare nuove versioni di NodeJS con questo comando:

				
					nvm install v18.12.0 # versione opzionale se c'è un file .nvmrc

Per attivare una delle versioni di NodeJS che hai installato:

				
					nvm use v18.12.0 # versione opzionale se c'è un file .nvmrc

Per impostare una versione di default:

				
					nvm alias default v18.12.0

Introduzione

Cambiare versione di NodeJS è una pratica molto comune nello sviluppo di applicazioni front-end e/o back-end.

I motivi di solito sono questi tre:

Hai bisogno di aggiornare il progetto a cui stai lavorando;
Stai per lavorare su un altro progetto che usa una versione di NodeJS diversa da quella installata;
Lavori in più progetti NodeJS, alcuni dei quali funzionano solo usando versioni specifiche.

Per non impazzire con le cartelle e le variabili d’ambiente, è quindi necessario avere un sistema per aggiornare e cambiare versione di NodeJS il più velocemente possibile. Questo sistema è un tool CLI (Command Line Interface) chiamato Node Version Manager (N.V.M., tr. Gestore di versioni Node).

Installazione

Per cambiare versione di NodeJS bisogna per prima cosa assicurarsi di avere NVM installato nel sistema. Puoi farlo digitando questo comando dal Terminale (o dalla PowerShell per Windows):

				
					nvm --version

Se il comando ritorna un errore, NVM non è installato, altrimenti puoi passare direttamente a SEZIONE_A_CUI_PASSARE

Mac OS o Linux

Apri un Terminale e digita questo comando:

				
					curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/[versione]/install.sh | bash

O se usi wget

				
					wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/[versione]/install.sh | bash

La versione da inserire al posto della scritta [versione] idealmente è la prima che trovi visitando la pagina dei rilasci.
Nel mio caso è v0.39.3 .

Windows

Il metodo ufficiale e raccomandato per installare NVM e usarlo su Windows è tramite uno di questi tools: WSL, GitBash, MSYS o Cygwin.
Sono tutti strumenti basati su una virtualizzazione di Linux, quindi per installare NVM mediante questi tools basta seguire la sezione MacOS e Linux.

Se vuoi usare la PowerShell del sistema Windows nativo (caldamente sconsigliato), tra le opzioni disponibili c’è nvm-windows.

Visita la pagina dei rilasci sul repository ufficiale del CLI.
Nel riquadro della prima versione che ti appare una volta dentro, dovresti trovare una sezione molto simile a questa
Scarica ed esegui l’installer (l’unico file che finisce per .exe)

Verifica l’installazione aprendo una PowerShell e digitando il comando:

nvm

Conclusioni

Hai correttamente installato un Gestore di Versioni NPM sul tuo PC, non ti resta che usare i comandi elencati in TLDR; per gestire le versioni di Node.

Bada bene che il cambio di NPM funziona per “sessione aperta”. Di base è attiva la versione definita come default.

L’installazione di NVM è personalizzabile tramite le variabili d’ambiente che vengono esposte (vedi la documentazione).
Se hai dubbi o hai bisogno di una consulenza, contattaci!

L'articolo Come cambiare versione di NodeJS con un solo comando! proviene da RD Tech.