Blog | Contattami | Elenco corsi

ANGULAR 13 & RXJS 7

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

angular-rxjs



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.
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 pipe
Operatori 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 pipe
Nested HTTP request with switchMap
switchMap ed emissione valori multipli
switchMap e salvataggio dei risultati parziali
Richieste HTTP simultanee con l'operatore forkJoin
switchMap vs mergeMap vs concatMap vs exhaustMap
reduce and scan operators
Gestione errori e operatore catchError
retry operator
Esempi 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
angular-rxjs-mode1
Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-rxjs-mode2
La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
SOURCE CODE
angular-rxjs-mode3
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

codemotion-2019-circle



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).

  • Awards Google & Microsoft
    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?
    Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di partecipanti (da 3 a 30 persone).
    Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato sulle iniziative
    Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
    Assolutamente sì. Utilizza il form di contatto per organizzare una riunione Skype / telefono
    Posso modificare il programma e creare un corso personalizzato ?
    Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo stilare insieme un programma personalizzato sulla base dei vostri obiettivi e del background dei partecipanti. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)
    Dove può essere erogato il corso?
    • In Friuli, Ronchi dei Legionari (Gorizia) - Max 14 posti con seduta e tavolo oppure 80 posti solo seduta.
    • On-Site, presso la vostra sede, in tutta Italia
    Quanto costa?
    Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata
    C'è un quantitativo minimo di giornate da acquistare?
    Almeno 2 giornate se la durata del viaggio (da Trieste, la provincia in cui risiedo) è inferiore alle 4 ore.
    Tre giornate, invece, nel caso di una durata superiore.
    Il corso prevede esercitazioni per gli studenti?
    La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti
    Devo portare il mio laptop?
    Lo consiglio ma non è indispensabile. È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)