In questo articolo, analizzeremo due casi di utilizzo: uno in un ambiente JavaScript puro e l'altro integrato in un'applicazione React, per dimostrare come RxJS ottimizza la gestione degli eventi e degli stati, migliorando significativamente l'efficienza e la reattività delle applicazioni.
Perché utilizzare RxJS oggi
Efficienza e reattività: offre un modello di programmazione basato sugli Observable che consente di gestire flussi di dati e eventi in modo più efficiente e reattivo. Ciò risulta particolarmente utile in applicazioni web dove la gestione asincrona e la reattività sono critiche, come nelle Single Page Applications (SPA) o in applicazioni real-time
Scalabilità e manutenibilità: il codice tende a essere più scalabile e facile da mantenere. Gli Observable aiutano a gestire stati complessi e sequenze di eventi in modo più prevedibile e meno soggetto a errori rispetto ai callback o alle promesse tradizionali
Composizione e riutilizzo del codice: promuove una programmazione dichiarativa, dove è possibile creare flussi di dati altamente componibili e riutilizzabili. Questo riduce il boilerplate e migliora la modularità del codice
Plain JavaScript
Crea una cartella per il tuo progetto e naviga all'interno
mkdir rxjs-example
cd rxjs-exampleInizializza un nuovo progetto Node.js
npm init -y
npm install rxjsSupponiamo di voler creare un flusso di dati che reagisce ai clic su un bottone
<button id="myButton">Cliccami</button>import { fromEvent } from 'rxjs';
import { scan } from 'rxjs/operators';
const button = document.getElementById('myButton');
const clicks$ = fromEvent(button, 'click');
const subscription = clicks$.pipe(
scan(count => count + 1, 0)
).subscribe(count => console.log(`Cliccato: ${count} volte`));
// Ricorda di disiscriverti quando non serve più
// subscription.unsubscribe();
Utilizzando fromEvent, generiamo un Observable che reagisce agli eventi di click del bottone
L'operatore scan viene poi applicato per accumulare un conteggio incrementale ogni volta che il bottone viene cliccato, partendo da zero. Questo conteggio viene visualizzato nella console ogni volta che avviene un clic
È importante ricordarsi di disiscriversi dall'Observable con unsubscribe() quando non è più necessario, per evitare perdite di memoria, specialmente in applicazioni con molti componenti o che necessitano di pulizia delle risorse
RxJS con ReactJs
Crea un nuovo progetto React usando Create React App
npx create-react-app react-rxjs-example
cd react-rxjs-exampleInstallazione di RxJS
npm install rxjs// click-counter.component.js
import React, { useEffect } from 'react';
import { fromEvent } from 'rxjs';
import { scan } from 'rxjs/operators';
const ClickCounter = () => {
useEffect(() => {
const button = document.getElementById('myButton');
const clicks$ = fromEvent(button, 'click');
const subscription = clicks$.pipe(
scan(count => count + 1, 0)
).subscribe(count => console.log(`Cliccato: ${count} volte`));
return () => {
subscription.unsubscribe();
};
}, []);
return <button id="myButton">Cliccami</button>;
};
export default ClickCounter;Assicurati di includere il componente ClickCounter in App.js o in un altro componente container.
import React from 'react';
import ClickCounter from './click-counter.component';
export const App = () => {
return (
<div className="App">
<ClickCounter />
</div>
);
}
export default App;RxJS emerge come una soluzione potente e versatile per la gestione di eventi e dati asincroni nelle applicazioni moderne. L'adozione di questa libreria può trasformare significativamente l'approccio alla programmazione reattiva, sia in contesti JavaScript puri sia in quelli basati su framework come React!
Grazie agli Observable e agli operatori di RxJS, gli sviluppatori possono costruire applicazioni più pulite, manutenibili e performanti, gestendo flussi di dati complessi con maggiore eleganza e meno codice boilerplate
E tu? Utilizzi RxJS o conosci qualche sua alternativa?
