ANGULAR 13 & RXJS 7
Apprendere le fondamenta del paradigma funzionale reattivo, comprendere a fondo la libreria RxJS e sfruttarne il potenziale in applicazioni Angular

INTRODUZIONE
Un corso intensivo per acquisire i concetti fondamentali sul paradigma funzionale reattivo e sull’utilizzo della libreria RxJS in Angular.
RxJS è, infatti, una delle dipendenze più importanti di Angular, alla base della maggior parte delle funzionalità del framework che ruotano attorno al concetto di Observable: reactive forms, Router, HttpClient, HTTP interceptors, @Output EventEmitter, state manager come NGRX, solo per citarne alcuni.
OVERVIEW PROGRAMMA
Il corso è organizzato in due moduli: la prima parte del corso è dedicata alla comprensione e l’utilizzo della libreria RxJS in vanilla JavaScript mentre la seconda parte sarà interamente dedicata all'integrazione con Angular:
• Si comprenderanno a fondo le fondamenta della libreria:
Observable
, Observer
, Subscription
, le differenti tipologie di Subject
, notifiche next, error, complete
, lettura dei marble diagrams, con esempi pratici e casi d’uso reali in vanilla JS ma soprattutto in applicazioni Angular.
• Esempi pratici per la comprensione e l’utilizzo di moltissimi operatori pipeaple e di creazione forniti da RxJS.
• Decine di snippet per sfruttare RxJS nel processo di comunicazione con il server tramite il servizio HttpClient
: forkJoin, combineLatest, withLatestFrom, switchMap
e mergeMap
sono solo alcuni degli operatori che andremo ad analizzare e sfruttare per gestire diverse casistiche real-world.
• Corretta gestione degli errori tramite operatori quali catchError e throwError
• Gestione processo di autenticazione, protezione route tramite guards, HTTP interceptor, protezione DOM tramite creazione di structural directives, utilizzando un approccio idiomatico, sfruttando RxJS e il paradigma reattivo
• Utilizzo di RxJS e dei pipeable operators con i Reactive Forms
• Approfondimento su Subject: come funzionano, potenzialità e le differenze tra le quattro tipologie: Subject, BehaviorSubject, AsyncSubject, ReplaySubject
.
• Gestire lo stato applicativo e creare architetture Angular con RxJS, l’utilizzo di Subject sfruttando il motore di dependency injection.
OBIETTIVO DEL CORSO
Un corso intensivo indispensabile per comprendere le fondamenta di RxJS e della programmazione reattiva rivolto a tutti gli sviluppatori che vogliono sfruttarne il potenziale all’interno dei propri progetti Angular.
Un corso propedeutico, inoltre, all'apprendimento di NGRX, uno state manager per Angular ispirato a Redux, che espone uno stato reattivo e che fa ampio uso di RxJS.
Un corso propedeutico, inoltre, all'apprendimento di NGRX, uno state manager per Angular ispirato a Redux, che espone uno stato reattivo e che fa ampio uso di RxJS.
REQUISITI
La prima parte del corso è dedicata alla comprensione e all'utilizzo della libreria RxJS (in vanilla JavaScript) mentre nella seconda parte moltissimi esempi saranno dedicati all'integrazione con Angular.
Per la prima parte di corso, interamente dedicata ad RxJS e JavaScript, è sufficiente conoscere le principali funzionalità di JavaScript ES6: template literals, arrow syntax, destructuring, array methods (ad es. map, filter, find, reduce), spread operator e utilizzo dell'immutabilità.
Per comprendere gli argomenti trattati nella seconda parte del corso, invece, è necessario possedere una discreta conoscenza del framework Angular e in particolar modo: direttive incluse nel framework; utilizzo di Angular Router; creazione componenti custom; creazione servizi e utilizzo del motore di dependency injection; comunicazione con il server con HttpClient e, possibilmente, aver già integrato un processo di autenticazione in applicazioni Angular (login, gestione token, HTTP interceptor, Router Guards)
Durata: 12 ore
Livello: Intermedio
Versione Angular: 14.x
Versione RxJS: 7.5+
Versione Typescript: 4.x
Tipologia: in aula o da remoto
PROGRAMMA
Introduzione a RxJS
Introduzione al paradigma funzionale reattivo.
Imperative vs Reactive programming
Observable vs Observer
next
, error
and complete
Pull vs Push
Hot vs Cold Observable
Unicast vs Multicast
Subscription
subscribe e/o
async
pipeOperatori di Creazione vs Pipeable operators
Marble Diagrams
Higher Order Observables: switchMap vs mergeMap vs concatMap vs exhaustMap
Creare e gestire sequenze di observables
Debug
Bad & Good practices
RxJS Operators: esempi pratici
Creation operators
Filtering operators
Combination operators
Transformation operators
Higher Order operators
Conditional operators
Error Handling operators
Multicasting operators
Creare custom RxJS Operators
Creare operatori custom in JavaScript
Creare operatori custom in TypeScript
OperatorFunction vs MonoTypeOperatorFunction
RXJS & Angular: esempi pratici HttpClient
bad (& good) practices in RxJS
Operatori RXJS indispensabili:
map
, filter
, reduce
e molti altri Async
Angular pipeNested HTTP request with
switchMap
switchMap
ed emissione valori multipliswitchMap
e salvataggio dei risultati parzialiRichieste HTTP simultanee con l'operatore
forkJoin
switchMap
vs mergeMap
vs concatMap
vs exhaustMap
reduce
and scan
operatorsGestione errori e operatore
catchError
retry
operatorEsempi di utilizzo con forms, router, pipes, directives, ...
Multicasting
Unicast vs Multicast: differenze
Operatori
share
, publish
, multicast
Le differenti tipologie di Subject
Subject & Angular services: gestione stato applicativo
Esempi real-world in Angular
Autenticazione e sicurezza in RxJS
Gestione dell'intero processo di autenticazione in RxJS
State management in RxJS
Gestione Stati derivati
login e logout
Gestione token JWT e stato autenticazione con
Subject
Router Guard e Http Interceptor: utilizzo idiomatico di RxJS
Protezione DOM e gestione ruoli tramite direttive strutturali
RXJS & Angular: Reactive Forms
Integrazione XHR con i Form tramite operatori
Applicare operatori RxJS a FormControl e FormGroup
Integrazione 3rd party API e utilizzo di operatori RxJS (ad es. l'operatore
withLatestFrom
MODALITÀ LEZIONI
TEORIA

Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING

La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
SOURCE CODE

Al termine del corso avrete a disposizione moltisissi esempi e snippet di codice riutilizzabili in applicazioni reali
ESEMPIO LEZIONE
In questo video:
effettuare chiamate HTTP sequenziali in cui la seconda chiamata dipende dal risultato della precedente
Creazione custom form "Rate" control
Implementazione di ControlValueAccessor
ISTRUTTORE:
FABIO BIONDI
FABIO BIONDI

TRAINER, SPEAKER, DEVELOPER
Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in Angular e Web Technologies, e ho più di 15 anni di esperienza nella creazione di applicazioni web enterprise.
Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).
Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS
Dal 2019: Microsoft MVP Dal 2018: Google Developer Expert in Web Technologies e Angular 2004-2011: Adobe Certified Expert & Instructor (Flex, AIR, Flash).

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).
Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS

COSA INCLUDE IL CORSO
Corso di formazione on-site
16 ore (2g)
Slides ed Esempi
Accesso Area Studenti
Codice Sorgente
Incluso
Attestato di partecipazione
PDF formato A4
FAQ
A chi è rivolto?
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Posso modificare il programma e creare un corso personalizzato ?
Dove può essere erogato il corso?
Quanto costa?
C'è un quantitativo minimo di giornate da acquistare?
Il corso prevede esercitazioni per gli studenti?
Devo portare il mio laptop?