Creation Functions

In RxJS esistono due forme distinte: le Creation Functions per creare Observable e i Pipeable Operators per trasformare Observable esistenti.

Questa pagina spiega i concetti di base delle Creation Functions e le 7 categorie principali.

Cosa sono le Creation Functions

Le Creation Functions sono funzioni per creare nuovi Observable.

import { of, from, interval } from 'rxjs';

// Utilizzo come Creation Function
const obs1$ = of(1, 2, 3);
const obs2$ = from([4, 5, 6]);
const obs3$ = interval(1000);

Queste vengono importate direttamente dal pacchetto rxjs e chiamate come funzioni per generare Observable.

Differenza con i Pipeable Operator

Le Creation Functions e i Pipeable Operators differiscono per scopo e utilizzo. Verificare le differenze tra i due nella tabella seguente.

Caratteristica	Creation Function	Pipeable Operator
Scopo	Creare un nuovo Observable	Trasformare un Observable esistente
Importazione da	rxjs	rxjs/operators
Metodo di utilizzo	Chiamata diretta come funzione	Utilizzo all'interno di .pipe()
Esempio	concat(obs1$, obs2$)	obs1$.pipe(concatWith(obs2$))

Esempio di Creation Function

Le Creation Functions vengono utilizzate per combinare direttamente più Observable.

import { concat, of } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Utilizzo come Creation Function
concat(obs1$, obs2$).subscribe(console.log);
// Output: 1, 2, 3, 4, 5, 6

Esempio di Pipeable Operator

I Pipeable Operators vengono utilizzati per aggiungere elaborazioni di trasformazione a un Observable esistente.

import { of } from 'rxjs';
import { concatWith } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Utilizzo come Pipeable Operator
obs1$.pipe(
  concatWith(obs2$)
).subscribe(console.log);
// Output: 1, 2, 3, 4, 5, 6

Criteri di scelta

La scelta tra Creation Function e Pipeable Operator si basa sui seguenti criteri.

Quando utilizzare una Creation Function

Le Creation Functions sono adatte quando si operano più Observable allo stesso livello o quando si crea un Observable da zero.

• Quando si combinano più Observable allo stesso livello

  concat(obs1$, obs2$, obs3$)
  merge(click$, hover$, scroll$)

• Quando si crea un Observable da zero

  of(1, 2, 3)
  from([1, 2, 3])
  interval(1000)

Quando utilizzare un Pipeable Operator

I Pipeable Operators sono adatti quando si aggiunge un'elaborazione a un Observable esistente o quando si concatenano più operazioni.

• Quando si aggiunge un'elaborazione a un Observable esistente

  obs1$.pipe(
    map(x => x * 2),
    concatWith(obs2$),
    filter(x => x > 5)
  )

• Quando si concatenano più operazioni come pipeline

Categorie delle Creation Functions

In questo capitolo, le Creation Functions sono divise in 7 categorie per l'apprendimento.

Elenco di tutte le categorie

Nella tabella seguente è possibile verificare tutte le categorie e le funzioni incluse. Facendo clic sul nome di ciascuna funzione si passa alla pagina dei dettagli.

Categoria	Descrizione	Funzioni principali	Casi d'uso rappresentativi
Creazione di base	Funzioni più basilari e frequentemente utilizzate. Creano Observable basati su dati, array, eventi e tempo	of, from, fromEvent, interval, timer	Test di valori fissi, streaming di dati esistenti, gestione eventi DOM, polling, esecuzione ritardata
Generazione loop	Esprime elaborazioni loop come for e while con Observable	range, generate	Generazione di numeri sequenziali, elaborazione batch, transizioni di stato complesse, calcoli matematici
Comunicazione HTTP	Gestisce la comunicazione HTTP come Observable	ajax, fromFetch	Comunicazione HTTP basata su XMLHttpRequest, comunicazione HTTP basata su Fetch API, chiamate REST API
Combinazione	Combina più Observable in uno. Il timing e l'ordine di emissione differiscono in base al metodo di combinazione	concat, merge, combineLatest, zip, forkJoin	Elaborazione step-by-step, unificazione di eventi multipli, sincronizzazione di input di form, attesa del completamento di chiamate API parallele
Selezione/Partizione	Seleziona uno da più Observable o divide un Observable in più	race, partition	Competizione tra più origini dati, diramazione elaborazione successo/fallimento
Condizionale	Seleziona Observable in base a condizioni o genera dinamicamente al momento della sottoscrizione	iif, defer	Diramazione elaborazione in base allo stato di login, creazione dinamica di Observable, valutazione lazy
Controllo	Controlla il timing di esecuzione e la gestione delle risorse degli Observable	scheduled, using	Controllo timing di esecuzione tramite scheduler, gestione lifecycle risorse, prevenzione memory leak

TIP

Ordine di apprendimento

Per i principianti si raccomanda di apprendere nel seguente ordine.

1. Creazione di base - Funzioni fondamentali di RxJS
2. Combinazione - Fondamenti per gestire più stream
3. Comunicazione HTTP - Integrazione API pratica
4. Altre categorie - Apprendimento secondo necessità

Corrispondenza con i Pipeable Operator

Molte Creation Functions hanno Pipeable Operators corrispondenti. Quando si utilizzano all'interno di una pipeline, si usano gli operatori della serie ~With.

Creation Function	Pipeable Operator	Note
concat(a$, b$)	a$.pipe(concatWith(b$))	RxJS 7+
merge(a$, b$)	a$.pipe(mergeWith(b$))	RxJS 7+
zip(a$, b$)	a$.pipe(zipWith(b$))	RxJS 7+
combineLatest([a$, b$])	a$.pipe(combineLatestWith(b$))	RxJS 7+
race(a$, b$)	a$.pipe(raceWith(b$))	RxJS 7+

NOTE

Da RxJS 7 in poi, sono stati aggiunti operatori della serie ~With come concatWith, mergeWith, zipWith, combineLatestWith, raceWith, rendendoli più facili da usare anche come Pipeable Operators.

Quale utilizzare?

La scelta tra Creation Function e Pipeable Operator dipende dal contesto.

Creation Function raccomandato

Quando si operano più Observable allo stesso livello, l'utilizzo di una Creation Function rende il codice più conciso.

// ✅ Combinazione di più Observable allo stesso livello
const combined$ = merge(
  fromEvent(button1, 'click'),
  fromEvent(button2, 'click'),
  fromEvent(button3, 'click')
);

Pipeable Operator raccomandato

Quando si aggiunge un'operazione come parte di una pipeline, l'utilizzo di un Pipeable Operator rende chiaro il flusso di elaborazione.

// ✅ Combinazione come parte della pipeline
const result$ = source$.pipe(
  map(x => x * 2),
  mergeWith(other$),
  filter(x => x > 10)
);

Riepilogo

• Creation Functions: Funzioni per creare o combinare Observable
• Pipeable Operators: Funzioni per trasformare Observable esistenti
• Le Creation Functions sono classificate in 7 categorie
  1. Creazione di base: Crea Observable basati su dati, array, eventi, tempo
  2. Generazione loop: Esprime elaborazioni ripetitive con Observable
  3. Comunicazione HTTP: Gestisce comunicazione HTTP come Observable
  4. Combinazione: Unisce più in uno
  5. Selezione/Partizione: Seleziona o divide
  6. Condizionale: Genera dinamicamente in base a condizioni
  7. Controllo: Controlla timing di esecuzione e gestione risorse
• All'interno delle pipeline si usano i Pipeable Operators della serie ~With
• Ogni categoria include più funzioni, da usare in base allo scopo

Prossimi passi

Per apprendere i dettagli di ciascuna categoria, procedere dai seguenti link.

1. Creation Functions di Creazione di base - of, from, fromEvent, interval, timer
2. Creation Functions di Generazione loop - range, generate
3. Creation Functions di Comunicazione HTTP - ajax, fromFetch
4. Creation Functions di Combinazione - concat, merge, combineLatest, zip, forkJoin
5. Creation Functions di Selezione/Partizione - race, partition
6. Creation Functions Condizionali - iif, defer
7. Creation Functions di Controllo - scheduled, using

In ogni pagina è possibile apprendere il funzionamento dettagliato e gli esempi pratici delle Creation Functions.

Risorse di riferimento

• Documentazione ufficiale RxJS - Creation Functions
• Learn RxJS - Creation Operators