[MUSICA]
Adesso lasciatemi dare una breve introduzione di angular e
della sua relazione con la programmazione reattiva
come Angular utilizza la programmazione reattiva.
In particolare, la libreria RxJS e come essa è adottata in
Angular per fonire un modo di scrivere le applicazioni Angular.
Dunque, ciò che presentiamo in questa lezione è una brevissima introduzione
generale del concetto di programmazione reattiva, degli observables,
e del pattern Observed e come esso viene applicato in Angular
La programmazione reattiva è di per sé un argomento molto vasto
che non può essere affrontato in 10 minuti
La programmazione reattiva,
se avessi la necessità di affrontarla in tutti i dettagli, diventerebbe un intero corso a sé stante.
And unfortunately,
non abbiamo il tempo di includere un intero altro corso in questo corso
Quindi dato che siamo interessati principalmente a come Angular adotta
la programmazione reattiva per consentirci di raddoppiare le applicazioni Angular,
allora ci concentreremo su questo aspetto.
Ma durante il percorso,
vi darò una breve introduzione sui vari concetti in questa area generale.
Se avrete curiosità riguardo alla programmazione reattiva,
vi raccomando fortemente di seguire alcuni dei link che ho fornito e
le risorse aggiuntive per questa particolare lezione.
Non vi sarà fornito molto materiale qui, ma
vi fornirò soltanto le solide basi della programmazione reattiva.
In questo corso, da questo punto in poi
vedremo come Angular adotta il paradigma della programmazione reattiva per
progettare le applicazioni Angular
Non ci restringeremo solo in questa lezione, ma
tutte le successive lezioni vedranno l'utilizzo degli observables e del
pattern observer e come si scrivono applicazioni reattive in Angular.
L'intera discussione riguardo la programmazione reattiva, si evolve attorno
a questo particolare pattern di ingegneria del software chiamato Observable.
Ricordate la gang of four che ho menzionato in una delle prime lezioni
do discutevamo dei framework model view controller
e di quelli model view?
Lo stesso libro della gang of four , contiene alcuni dei pattern che
sono stati utilizzati con successo nella programmazione reattiva.
Il pattern Observable gira attorno agli observables.
Dunque avete degli observables, il cui comportamento può essere osservato dagli observers.
Questo è il motivo per cui viene definito pattern observer.
Vengono dichiarati alcuni oggetti come osbervables o subjects e
gli observables vengono osservati dagli observers.
Ora, gli stessi observers si registreranno
per scrutare cambiamenti negli observables
e gli observables avviseranno gli observers quando avverranno cambiamenti.
Nel design pattern observer, questo è il modo in cui gli observers si iscrivono
agli observables o registrano essi stessi in un observable.
Questo è il modo in cui l'observable conosce quale observers è interessato
a qualsiasi cambiamento nel suo stato.
Quando l'observable collegato agli observers
cambia il suo stato, esso avvisa immediatamente tutti gli observables
del cambiamento di stato e gli observers di conseguenza possono
effettuare delle azioni basate su questa notifica di cambiamento avvenuto nell'observable.
Il pattern observer è stato utilizzato effettivamente in molte
diverse circostanze.
E per questo, il paradigma di programmazione reattiva è basato su di esso
A questo punto, la domanda che viene spontanea è
Perché parliamo di observables?
Cosa di speciale ci interessa degli observables?
Il pattern observer è un modo di scrivere le applicazioni software
Questo metodo è basato sugli streams.
Cioè si hanno dei dati che scorrono nell'applicazione.
Questi dati posso essere visti come stream di valori che scorrono attraverso la vostra
applicazione.
Dunque, lo stream è il canale primario attorno al quale gli observables e
il pattern observable sono definiti.
Quindi, altri streams possono essere collegati a questi streams.
E quando un valore si aggira sullo stream, questo valore viene prelevato e
si può reagire a questo valore.
Per poter reagire a quel valore, è necessario registrarsi su quello stream o
è necessario registrare l'observable.
L'observable riceve frequentemente i valori emessi.
E quando è possibile vedere questi valori, l'observer può reagire ad essi.
Questo significa anche, che quando non si è più interessati,
si ci può scollegare da un observable.
Come a dire, non sono più interessato ad osservarti e quindi sparisci!
Il pattern observer vi consente di osservare periodicamente i cambiamenti
quando siete interessati e di smettere di osservare quando non siete più interessati.
Quindi questo tipo di paradigma vi consente di progettare le vostre
applicazioni software in modo davvero interessante, in una maniera davvero intuitiva.
Ma per essere in gradi di utilizzare questo approccio,
è necessario abituare la mente a questo approccio.
Proprio come abbiamo fatto con il pattern callback o come abbiamo fatto con l'uso delle promises.
Gli observables costituiscono un altro modo di progettare l'applicazione.
Un observable in sé sarà molto pigro e semplicemente andrà a spasso.
Quindi, potete creare un observable e semplicemente lasciarlo lì.
L'observable diventa attivo o
diventa caldo quando qualcuno inizia a collegargli un observer.
A questo punto, l'observer entra in azione ed inizia a produrre valori.
Così se almeno un observer è coinvolto in un observable,
allora l'observable inizierà ad emettere valori.
Se nessuno è coinvolto, l'observable tornerà a chiudersi nel suo guscio e rimane lì.
Potete pensare a questa cosa in questo modo.
Se questa metafora vi aiuta a comprendere
come l'observer funziona, potete utilizzarla.
Questo vi aiuterà a comprendere il modo in cui costruiremo le nostre applicazioni
negli esercizi che seguono e nelle successive lezioni
dove esamineremo il supporto HTTP di Angular in modo più dettagliato
Un altro aspetto degli observables è il fatto che cancellano un aprecedente richiesta e
quindi ritentare è molto esplicito con gli observables.
La promise che avete visto in precedenza , quando avete iniziato ad attendere una promessa,
non la potete cancellare, state aspettando.
La promise eventualmente si risolve o fallisce e
dovete reagire, non importa, anche se non siete più interessati.
Ma con un observable, se potete cancellare la vostra iscrizione
ciò che accade non vi riguarda affatto.
E quindi non dovete fare nulla, se cancellate la vostra iscrizione.
Quindi, annullare e ritentare, nel caso in cui il precedente tentativo non
sia riuscito, è una cosa molto esplicita con gli observables.
Vedremo alcuni di questi comportamenti più dettagliatamente negli esercizi che seguono.
Questo ci porta al concetto di programmazione reattiva.
La programmazione reattiva è basata sia sul pattern Observer
sia sul pattern Iterator.
In ogni caso,
il pattern Observer è la caratteristica dominante della programmazione reattiva.
Quindi nella programmazione reattiva, siamo interessati ai flussi di dati.
Su come i dati scorrono attraverso l'applicazione.
Ed i flussi di dati possono essere trattati come stream.
Quindi questi flussi di dati si possono propagare attraverso l'applicazione.
E mentre i cambiamenti si propagano attraverso l'applicazione,
negli stadi intermedi potete prendere uno specifico stream
modificarlo e creare un altro stream che fuoriesce da lì.
Questo è ciò che il pattern Observable ci consente di fare.
Quindi l'intero paradigma è costruito attorno gli stream e i flussi di dati.
Questo costituisce un altro modo di vedere e risolvere il problema.
Ed è il motivo per cui metto in risalto il fatto che dobbiate abituare la vostra mente a
comprendere come il pattern reactive e come la programmazione reattiva viene fatta nella pratica.
A questo punto, sentite spesso le persone parlare di qualcosa chiamata
programmazione reattiva funzionale.
Se siete abituati al paradigma della programmazione funzionale.
Ma vi aggiungete la programmazione reattiva
questo è ciò a cui la gente spesso si riferisce come programmazione reattiva funzionale.
Cioè al matrimonio reciproco tra questi due approcci.
A questo punto, inizieremo a vedere l'utilizzo di queste cose in Angular
ma mano che andrete avanti nel corso.
Infine, che cosa dire riguardo RxJS?
Quale ruolo gioca all'interno di tutto l'ecosistema?
RxJS è una implementazione JavaScript del pattern observable e
anche del supporto alla programmazione reattiva.
Quindi se state per fare programmazione reattiva in JavaScript
allora utilizzerete la libreria RxJS per fare ciò.
RxJS è soltanto una delle implementazioni.
Ce ne sono poche altre, ma la ragione per cui siamo interessati in particolare a RxJS
in questo corso è perché Angular utilizza RxJS per
il suo supporto alla programmazione reactive.
Abbiamo detto che RxJS è una libreria.
E' una libreria separata proveniente dall'esterno.
Potete utilizzare RxJs anche per altri scopi, non necessariamente legati ad Angular.
Ci sono state applicazioni, sviluppate utilizzando esclusivamente RxJS
non legate ad Angular.
Ma in questo corso siamo interessati a come RxJS interagisce
con Angular per consentire la programmazione reattiva.
Dunque, RxJS è una libreria che vi consente di fare programmazione asincrona.
Abbiamo parlato in precedenza della programmazione asincrona quando abbiamo parlato delle promise.
Vedremo la programmazione asincrona con l'uso di callbacks nel corso relativo a NodeJS.
Gli observables sono un ulteriore modo di vedere la
programmazione asincrona, insieme alla programmazione event driven.
Se avete familiarità con la programmazione event driven,
RxJS la soddisfa proprio bene in questo ambiente.
Tutte le cose sono costruite attorno a sequenze di Observable.
E la libreria RxJS vi fornisce un tipo di dato elementare chiamato Observable.
E attorno a questo tipo elementare, abbiamo alcuni tipi satellite
che sono chiamati observers, schedulers e subjects.
Tutti questi vi consentono di fare programmazione reattiva.
Inoltre, RxJS supporta un intero mucchio di operatori.
Separators, scusate intendevo dire supporta gli operatori.
E' stato un [risata] intreccio della mia lingua.
RxJS supporta gli operatori,
operatori che si ispirano agli operatori array di JavaScript.
Se avete familiarità con gli operatori array di Javascript come ad esempio le map, allora
anche gli operatori RxJS vi sembreranno molto familiari.
Potete trattare un observable e
i valori che esso emette proprio come un array, questo è il motivo per cui
gli operatori array trovano impiego in RxJS e anche nella programmazione reattiva.
Quindi anche le users map, filter, reduce e altri
operatori array troveranno impiego in RxJS e nella programmazione reattiva.
E questo è ciò che vi consente di gestire gli eventi asincroni come collezioni.
Quindi, quando vorrete mettervi in attesa di
un evento asincrono, somiglierà a sottoscriversi ad un observable.
Così quando l'observable emette il valore, sarete pronti ad catturare il valore e
ad agire di conseguenza.
Non sapete quando l'emissione avverrà.
A questo punto la parte asincrona entra in gioco con l'uso di RxJS.
Come già detto, la ragione per cui siamo interessati a RxJS è perché
Angular sfrutta la libreria RxJS per
fornire il suo supporto alla programmazione reattiva.
Angular stesso ha un certo numero di observables incorporati,
come vedremo fra poco.
Quando entrate nel mondo della programmazione reattiva, sentirete spesso le persone parlare
degli Observables e poi li sentirete parlare degli operatori e
poi sentirete anche alcuni che parlano di diagrammi a biglie.
Questo perché i diagrammi a biglie sono un modo per rappresentare
come la programmazione reattiva che utilizza gli Observables.
Se vi capita di avere un observable,
se osservate questo observable in funzione del tempo
cioè se l'asse rappresenta lo scorrere del tempo, l'observable
emetterà periodicamente valori come questo, uno dopo l'altro.
Quindi se organizzate questi valori in una sequenza,
in funzione del tempo, vedrete che i valori saranno emessi in questo modo.
C' è anche la possibilità che incontriate un errore.
In questo caso, avrete bisogno di gestire questo errore in modo appropriato.
Se gestite appropriatamente l'errore,
potete continuare oppure fermarvi a questo punto.
Similmente, quando un observable completa tutte le sue iterazioni,
allora sul diagramma verrà marcato il completamento dell'observable.
Dovete essere in grado anche di gestire l'evento di completamento in un Observable.
Dopo aver mappato il comportamento dell'Observable, potete dunque prendere
i valori che l'observable emette e applicare gli operatori su di esso.
Questi valori possono essere visti come un array.
Se può aiutarvi a capire meglio, potete vederlo come un array di valori.
Si può operare su questi valori utilizzando diversi operatori.
Qui è dove inserirete la vostra map, filtro, reduce o qualunque operatore che
qualsiasi libreria reactive come RxJS supporta.
Ciò vi consente di trasformare
un insieme di valori prelevati da un observable in un'altro insieme di valori.
Alla fine creerete un nuovo Observable.
E questo nuovo observable sarà costituito
dai valori trasformati provenienti dall'observable originario.
Questa è la ragione per cui vi ho mostrato qui questi valori trasformati come rettangoli.
Proprio per darvi una impressione visiva di ciò che stiamo tentando di fare con
un operatore.
State prendendo un valore e poi lo state trasformando in un valore differente.
E questa sequenza di valori diversi che
Ottenete trasformando i valori emessi da un observable.
Sarà essa stessa un'altra stringa di valori, e di conseguenza,
diventerà un altro Observable.
Dunque potete derivare un Observable da un altro Observable.
Ma questo secondo Observable dipende dal primo, quindi è dipendente.
Il suo comportamento è stabilito, attraverso l'uso di questo operatore.
Vedremo esempi di queste attraverso degli esercizi
in questa lezione e nelle lezioni successive.
Cosa dire riguardo ad Angular e RxJS, come stanno assieme?
Angular, come menzionato in precedenza, supporta un numero di observables propri.
E questi observables integrati vi consentono di fare uso
di programmazione reattiva all'interno di una applicazione Angular.
Così, ad esempio, le forms di Angular,
abbiamo già visto le forms reactive in una precedente lezione.
In quel punto, non ho mai citato esplicitamente la parola observable.
Ma adesso che conosciamo gli observable, ritorneremo sulle form reattive, e
effettueremo alcune trasformazioni alla form reattiva.
Le forms diventano observables in Angular.
E ogni cambiamento nei valori di ciascun elemento della form,
può essere tirato fuori, e osservato sottoscrivendosi
all'observable che il framework Angular ci fornisce.
Similmente, HTTP, che incontreremo nel prossimo modulo di questo corso,
sarà basato sugli observables.
Così quando il vostro servizio andrà e preleverà i dati dal server, la libreria HTTP,
o il modulo HHTP in Angular, forniranno degli observables.
Quando eseguirete qualunque metodo get, put, post o
delete, utilizzando HTTP, esso vi restituirà un observable
che potete sottoscrivere all'interno del vostro servizio.
E conseguentemente trasformarlo, e passarlo ai vostri componenti, e
i componenti possono sottoscriversi agli observables.
Il servizio ha il compito di trasformare gli streams HTTP.
E qui è dove la programmazione reattiva e
il flusso di dati attraverso la vostra applicazione Angular risultano evidenti.
Similmente, c'è una AsincPipe, che incontrerete in seguito in questo corso.
E anche la detection change costruita attorno agli Observables in Angular.
Vedrete alcuni esempi di questi nel resto del corso.
Adesso, riprendiamo la domanda che abbiamo visto nella precedente lezione.
Come prendete un observable e lo trasformate in un altro observable?
Questo è un esempio che incontrerete nell'esercizio che segue questa lezione.
Qui, abbiamo la variabile route
all'interno del nostro componente menu, che utilizzala variabile route per
fornire il valore del dish selezionato al componente dish detail.
Così la variabile route diventa un observable.
Il modulo router di Angular ha un attività di servizio ActivatedRoute che
supporta un mucchio di observables e uno di questi è l'observable params.
L'observable params è contenuto tra le variabili di route.
E dunque ogni cambiamento alle variabili,
nell' URL che incontrate sarà emesso come un observable.
Adesso, quando prelevate l'observable, come potete vedere,
potete ottenere l'accesso a questo observable richiamando la variabile params di route nel vostro codice.
Questa stessa variabile params qui è un observable.
A questo observable params,
potete applicare un operatore come questo qui chiamato switchmap.
Vedremo l'uso di questo nell'esercizio.
L'operatore switchmap prende l'observable params.
E lo trasforma in un altro observable che è un dish.
Esso prende il valore params, e poi estrae il valore ID da params,
che vi consente l'accesso alla variabile route, l'id, o
la variabile che avete specificato, e alla fine lo usa per prelevare il dish.
Ogni volta che la variabile cambia, si otterrà il prelievo di un nuovo dish.
E ogni volta che la variabile cambia,
ciò equivale all'emissione di un nuovo valore da parte dell'observable params.
Questo valore viene trasformato nel prelievo di un nuovo dish
corrispondente all'ID specificato.
Allora il dish diventa un altro observable.
A questo punto, quando l'observable dish diventa disponibile, ci si può sottoscrivere ad esso
ed ottenere il valore del dish.
E quando avete ottenuto il valore dish, allora potete prendere questo valore, e
creare la vostra variabile dish all'interno del componente dish detail.
Così qualsiasi cambiamento al campo route si propaga attraverso questo
operatore switchmap in un observable,
che quando viene osservato attraverso una sottoscrizione,
ci consentirà di trasformarlo e a assegnarlo ad un altro piatto.
E quando questo accade, potete essere aggiornati dal
nuovo dish che è stato ottenuto dal servizio.
Così adesso, vedete come i dati scorrono attraverso il route parameter,
attraverso l'operatore switchmap, e
e finiscono per cambiare la vista del componente dish detail.
Questa è la ragione per cui la programmazione basata sul pattern observable o
programmazione reattiva in Angular diventa molto utile per
implementare alcune funzionalità all'interno della vostra applicazione.
Questo è uno degli esempi.
Vedremo l'uso di questo particolare esempio in
questo esercizio che segue questa lezione.
Suppongo che sia più facile
per voi ricordare tutte queste cose semplicemente cantando questa Ode agli Observables.
[MUSICA]
Dovreste cantarla sulla musica di
You Can Call Me Al di Paul Simon e Garfunkel fame.
Se vi state guardando attorno chiedendovi, chi è Paul Simon?
Spiacente, altra generazione.
[MUSICA]