80 RX – RxJS Intro

Pubblicato il di

RxJS è una libreria esterna ed è l’acronimo di JavScript reattivo derivante dal modo di programmazione reattiva (Reactive Programming). È una libreria usata per eventi asincroni e per sequenze di dati osservabili. Infatti al suo interno sono presenti diversi oggetti che possiamo utilizzare, come l’ Observable che segue il pattern dell’observer. Vedremo nel dettaglio il tutto più avanti, come anche gli stream, ovvero le sorgenti di dati e come manipolarli.

Reactivex supporta molti linguaggi di programmazione, scegliendo come linguaggio JavaScript, possiamo vedere come installarlo.

Utilizzo lato server con node.js

tramite npm in una nuova cartella di progetto node.js

npm install rxjs

In questo modo non viene creato il file package.json, quindi provvediamo a crearlo

npm init -y

in modo tale che possiamo configurare e personalizzare node

npm i rxjs

adesso dovremmo avere anche la cartella node_modules dove all’interno possiamo trovare la cartella di RxJS, all’interno della quale abbiamo tutti i files comprendenti la libreria Rxjs

Adesso che è installato andiamo a creare il primo file index.js (node.js deve essere installato, se non lo fosse rimando a questa pagina). Prendiamo l’esempio copiandolo dal sito rxjs utilizzando node e quindi la libreria CommonJS

const { range } = require('rxjs');
const { map, filter } = require('rxjs/operators');

range(1, 200).pipe(
    filter(x => x % 2 === 0),
    map(x => x * x)
).subscribe(x => console.log(x));

Con questo esempio, utilizzando funzioni predefinite, abbiamo la moltiplicazione tra i numeri pari in un range tra 1 e 200

node index.js

Utilizzo la client col browser e JavaScript

Creiamo un file HTML5 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RxJS demo</title>
</head>
<body>

</body>
</html>

ora prendendo dal sito il CDN https://unpkg.com/rxjs/bundles/rxjs.umd.min.js lo includiamo nel file con un tag <script> la libreria rxjs

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

Testiamo se l’oggetto rxjs viene creato in console aprendo il file locale index.html col nostro browser

<script>
    console.log(rxjs);
</script>

ora testiamo lo stesso script che abbiamo usato con node con quello per ES6

const { range } = rxjs;
const { map, filter } = rxjs.operators;

console.log(rxjs.operators);

range(1, 200).pipe(
    filter(x => x % 2 === 1),
    map(x => x + x)
).subscribe(x => console.log(x));

Ho aggiunto anche un console.log(rxjs.operators); per vedere questo oggetto operators da cos’è composto e tutti gli operatori presenti al suo interno, così possiamo iniziare a farci un’idea.

Per una comprensione più ampia degli operatori e degli observable, invito a consultare la pagina rxmarbles dove vengono illustrati le applicazioni pratiche e visive.