State Management in
Angular, RxJS e NGRX
Un video corso sull'utilizzo di RxJS 6 e NGRX 9, lo state manager più utilizzato per lo sviluppo di applicazioni enterprise in Angular
IL PROGRAMMAACQUISTA
PANORAMICA
Cosa include questo video corso?
NGRX è lo state manager più utilizzato per la creazione di applicazioni enterprise in Angular. Si ispira al pattern Redux e sfrutta RxJS per esporre i dati come Observable e gestire i side effect.
Nasce, quindi, questo corso allo scopo di fornire un solido background sia su RxJS che NGRX.
Questo prodotto è infatti composto da due video corsi separati:
Comprendere la programmazione reattiva e RxJS con esempi e casi d'uso in JavaScript e all'interno di applicazioni Angular
Un corso dedicato allo state manager NGRX dalle basi fino ai casi d'uso più complessi e particolari
270
Video lezioni
26
ore di lezione
30
giorni: soddisfatto o rimborsato
A chi è rivolto?
Non è necessario avere alcuna conoscenza pregressa sul framework
ANGULAR DEVELOPERS
Per comprendere gli argomenti trattati nel corso è necessario avere una buona conoscenza delle seguenti funzionalità del framework Angular: componenti custom, gestione modulare di un progetto, dependency injection, router e lazy loading. Nel caso mancassero tali requisiti ti consiglio prima approfondire questi argomenti o di acquistare il video corso Angular Fundamentals
SVILUPPATORI
Pur essendo un corso realizzato per sviluppatori che già utilizzano Angular, tutti gli argomenti sono affrontati dalle basi, sia per quanto concerne RxJS che NGRX. Quindi si rivolge a tutti coloro che vogliono comprendere il potenziale e le opportunità offerte dal framework Angular, la programmazione reattiva in RxJS e NGRX
Cosa include il corso
Tutto ciò di cui hai bisogno per comprendere il paradigma reattivo con RxJS e creare applicazioni scalabili e manutenibili tramite l'utilizzo dello state manager NGRX
PRINCIPIANTI ed ESPERTI
Un percorso guidato per fornire un solido background su RxJS e NGRX, dalle basi ai concetti più avanzati. Adatto a sviluppatori che non hanno mai utilizzato questi strumenti, o per chi, invece, è già più esperto e vuole approfondire.
CORSO RXJS
Decine di esempi pratici per comprendere i segreti della programmazione Reattiva. Non solo utile per chi desidera successivamente utilizzare NGRX ma, soprattutto, per sfruttare il potenziale del framework Angular
CORSO NGRX
Non solo codice ed esempi "hello world" ma metodologie, pattern e buone pratiche per la creazione di codice manutenibile e scalabile per lo sviluppo di applicazioni enterprise
REAL WORLD APPLICATIONS
Il corso include, inoltre, lo sviluppo di un'applicazione per la gestione di fatture composto da ben 70 video in cui si analizzano moltissimi scenari e casi d'uso particolari
1. IL CORSO ANGULAR & RXJS
65 lezioni per una durata di quasi 4 ore
+ 4 ore addizionali bonus di live coding in RxJS e Vanilla JS
- Introduzione a RxJS
- Gli operatori di creazione fondamentali
- Decine di esempi di operatori pipeable
- Higher Order Observable
- Chiamate XHR e gestione concorrenza
- Introduzione prima parte del corso su RxJS (teoria - articolo)
- Premessa (teoria - video) (1:14)
- Introduzione a RxJS (3:10)
- Imperative vs Reactive Programming (9:25)
- RxJS is smart: preview operatori throttleTime & scan (2:41)
- Pull vs Push (8:08)
- "next", "error" e "complete" functions (5:07)
- Subscription e unsubscribe (4:56)
- Operatori-di-creazione (6:07)
- Pipeable operators (5:01)
- Debug and tap operator (4:58)
- Comprendere i marble diagrams (3:41)
- Tutti gli esempi del capitolo su StackBlitz
- Come utilizzare StackBlitz (3:34)
- Intro Capitolo (teoria - articolo)
- Operatore "map" (5:03)
- Angular "async" pipe (6:08)
- Operatore "forkJoin" (5:15)
- Operatore "ForkJoin" con dictionary (update RxJS 6.4)
- Operatore "combineLatest" (articolo)
- Operatore "switchMap": nested XHR (4:07)
- Operatore "switchMap" per iterare sugli array (3:01)
- Operatore "retry" e gestione errori con l'operatore "catchError" (6:38)
- Operatori "reduce" e "scan" (6:00)
- "switchmap" vs "exhaustmap" (6:14)
- "switchmap" vs "concatmap" vs "mergemap" vs "exhaustmap" (4:00)
- Esercizio online su switchMap
- Operatore defer(): lazy observables (5:04)
- Creazione Operatori Custom RXJS (5:50)
- Cosa sono i BehaviorSubject (articolo)
- introduzione al processo di autenticazione in Single Page Applications (TEORIA) (6:51)
- Esercizio online su BehaviorSubject
- Login e BehaviorSubject (7:31)
- Auth-guard e RxJS (4:32)
- Interceptor - part1: Subject e getvalue (7:59)
- Interceptor - part2: approccio idiomatico (3:09)
- Interceptor - part3: gestione errori (6:13)
- RxJS & Router Events (3:55)
- Live demo e source code
- Introduzione al capitolo (teoria - articolo)
- Reactive Forms vs Template Driven Forms (8:19)
- I moduli ReactiveFormsModule e HttpClientModule (0:43)
- Registra il tuo token su OpenWeatherMap
- Multiple Subscribes (Bad Practice) (4:51)
- Evitare subscribe multiple con "switchMap" e gestione degli errori con "catchError" (3:23)
- Utilizzare operatori RxJS con i reactive form: "startWith", "distinctUntilChanged", "decounceTime", "filter" (4:40)
- L'operatore "withLatestFrom" (7:25)
- Password match: "combineLatest" e FormControl (articolo)
- Esercizio su FormControl e combineLatest
- Introduzione al concetto di Subject - unicast vs multicast (10:01)
- Utilizzo BehaviorSubject per contenere e condividere dati (6:51)
- Subject as Observer (5:03)
- Multicast: "Subject" vs operatore "share" (4:32)
- "Subject" vs "BehaviorsSubject" vs "ReplaySubject" vs "AsyncSubject" (6:31)
- Sommario e demo sulle diverse tipologie di Subject (2:03)
- Risorse e marble diagrams
- Intro
- 1. Introduzione alla FP (5:08)
- 2. Composizione di funzioni (3:58)
- 3. Immutabilità, side effects e stato (4:41)
2. IL CORSO NGRX
197 video per una durata di quasi 18 ore
- Presentazione corso (9:11)
- Gruppo Facebook, supporto e Link
- 1. A cosa serve uno state manager (4:43)
- 2. Cos'é NGRX: pro e contro (12:12)
- 3. NGRX Diagram (6:17)
- 4. Progetto e struttura cartelle (5:56)
- 5. NGRX: code preview (9:06)
- 6. Stateless applications (6:02)
- Introduzione al capitolo (teoria - articolo)
- 1. GOAL: cosa realizzeremo in questo capitolo (3:32)
- 2. Store, reducers e Actions (TEORIA) (8:06)
- 3. Creazione Progetto (1:56)
- 4. Hello NGRX (3:54)
- 5. NGRX & Redux DevTools (3:50)
- 6. Lo Store (0:55)
- 7. Selectors (4:25)
- 8. Selectors & ngFor (3:30)
- 9. Actions (5:43)
- 10. Reducers (5:13)
- 11. Azioni con parametri (6:38)
- 12. ReduxDevTools: dettagli e considerazioni (7:26)
- 13: Manipolare Array: ADD e REMOVE (9:35)
- Quiz - NGRX Fundamentals
- 01. GOAL: manipolare collezioni dati in NGRX (3:11)
- 02. NGRX Actions (3:05)
- 03. ES6 TIP: Immutabilità e manipolazione array (8:40)
- 04. "users" reducer (7:39)
- 05. UI: forms, add e delete (9:10)
- 06. Modifica dei dati utenti e "bugs" (12:26)
- Quiz - NGRX: Wotk with collections
- Download source code
- 01. GOAL: NGRX CRUD apps (8:19)
- 02. Creazione Progetto (0:54)
- 03. Installazione mock server REST (2:12)
- 04. Installazione NGRX e configurazione Store (1:21)
- 05. Actions (3:17)
- 06. ES6 TIP: immutabilità e manipolazione oggetti (4:08)
- 07. Reducer "compositi" contenenti logica (12:21)
- 08. Sviluppo UI: form e list - parte 1 (12:00)
- 09. Sviluppo UI: form e list - parte 1 (6:25)
- 10. Effects: introduzione alla sintassi e al funzionamento (TEORIA) (7:32)
- 11. Effects - Parte 1: load (11:28)
- TIP: importare l'effetto e HttpClientModule in AppModule
- 12. Effects - Parte 2: delete (6:02)
- 13. Effects - Parte 3: save, edit, add and fix problemi (20:07)
- 14. AppState: custom type per lo Store (2:28)
- 15. Combine Reducers con ActionReducerMap (6:33)
- 16. Selectors (5:11)
- 17. CreateSelector: selectors con parametri ed espressioni (utilizzo di filter & reduce) (8:26)
- 18. Selectors: miglioramenti (1:28)
- 19. Gestione Errori (7:28)
- Download source code
- QUIZ - NGRX Crud
- 01. Gli argomenti delle prossime lezioni (articolo)
- 02. GOAL: demo applicazione (4:50)
- 03. Anticipazione: codice finale (4:24)
- Download Source Code
- 01. Creazione progetto tramite CLI (2:31)
- 02. Introduzione struttura progetto modulare: features vs core vs shared (3:42)
- 03. "Features" modules & lazy loading (8:13)
- 04. Installare il set di icone: FortAwesome (2:24)
- 05. Installare Bootstrap SASS (2:51)
- 06. Personalizzare un tema di Bootstrap con SASS (4:48)
- 07. Creare la Navigation Bar (6:50)
- 08. Modulo core e modulo share: forRoot method (6:06)
- 1 - NGRX - StoreModule.forRoot() (Teoria) (4:17)
- 2. Installazione NGRX e configurazione Store (2:21)
- 3. Runtime checks configuration (3:14)
- 01. Installazione e configurazione router-store con NGRX (2:59)
- 02. Creare Custom Router Actions (5:42)
- 03. Router Effects (9:28)
- 04. Router Selectors (10:28)
- TIP: un approccio più idiomatico nell'utilizzo del selettore (articolo)
- GOAL: profilo utente (1:14)
- 01. Model & mock server REST con json-server (4:06)
- 02. Profile Service & Environment properties (5:38)
- 03. Profile Actions (1:45)
- 04. Profile Effects (6:31)
- 05. Profile Reducer (12:14)
- 06. TS TIP: as-syntax vs Partial vs optional-parameters (2:35)
- 07. NGRX-TIP: export reducer functions & limiti compilazione AoT (4:37)
- 08. Selectors & createFeatureSelector (4:16)
- 09. AppState: "tipizzare" lo Store (3:21)
- 10. Profile component: load & display data (5:46)
- 11. Profile component: edit data & sync components (9:25)
- 12. Profile component: skinning (3:48)
- GOAL: autenticazione e struttura store (3:24)
- 01. Login Component (5:21)
- 02. Auth Actions (5:24)
- 03. Auth service (4:15)
- 04. Auth Effects: login & logout (19:57)
- 05. Auth Reducer: login & logout (7:08)
- 06. Auth selectors (2:33)
- 07. Gestione Logout (3:36)
- 08. Guards: protezione route e utilizzo dei selettori (11:15)
- 09. Autologin: init-effects. azioni e gestione localstorage (10:13)
- TIP su HttpInterceptor: IMPORTANTE!
- 10. HTTPInterceptor: selectors (15:50)
- 11. HTTPInterceptor: gestione errori (3:48)
- 12. HTTPInterceptor: throwError (3:28)
- 13. Creazione Direttive strutturali (*ifLogged): protezione DOM (13:38)
- 14. RXJS TIP: evitare inutili richieste HTTP nel login: switchmap vs exhaustmap (2:01)
- 01. GOAL e struttura store (4:22)
- 02. NGRX: Introduzione store "forFeature()" (6:17)
- 03. Creazione: store for feature (4:32)
- 04. Combine Reducers con ActionReducerMap (3:12)
- Prossimi step: nota importante
- 01. GOAL (2:51)
- 02. Struttura UI & component-based approach (0:52)
- 03. UI: componente pannello Clienti (11:47)
- 04. UI: input, output, ng-class & animations (6:03)
- 05. UI Children - parte 1: suddividere la UI in componenti (12:39)
- 06. UI Children - parte 2: creazione header / ADD clients (7:35)
- 07. UI Children - parte 3: Header, @ViewChild & ChangeDetectorRef (17:04)
- 08. UI Children - parte 4: Modifica Cliente (1:50)
- 09. UI Children - parte 5: applicare CSS al wrapper con @HostBinding (3:21)
- 10. Client Model (2:47)
- 11. Riassunto e prossimo step (3:35)
- 01. ClientService & REST API (4:19)
- 02. Clients Actions (2:05)
- 03. Clients Effects - Parte 1 (4:47)
- 04. Clients Effects - Parte 2 (4:12)
- 05. Clients: Load (3:03)
- 06. creare un index per i reducers con actionReducerMap (3:13)
- 07. Clients Reducer (9:11)
- 08. createFeatureSelector vs createSelector (4:09)
- 09. Considerazioni finali (2:20)
- Goal (0:50)
- introduzione (3:15)
- HttpStatus: gestione error e success nello store (5:17)
- Considerazioni su errori e gestione tramite HTTP Interceptor (articolo)
- HttpStatus: reducer (6:29)
- HttpStatus: selector (2:47)
- HttpStatus : UI e visualizzazione errori (4:51)
- HttpStatus: custom component (2:31)
- HttpStatus: Gestione messaggi di successo (4:21)
- HttpStatus: conclusione e riepilogo (2:47)
- 1. GOAL (1:40)
- 2. UI state (3:17)
- 3. UI Actions (1:04)
- 4. UI Reducers (5:18)
- 5. UI Selectors (7:58)
- 6. UI: gestione apertura / chiusura pannelli (7:24)
- 01. GOAL (0:55)
- 03. Invoice Model (modello fattura) (1:51)
- 04. Invoices Actions (8:49)
- 05. Invoice Form: versione provvisoria (7:57)
- 06. Inizializzazione stato "invoices" (4:55)
- 07. Selectors per le fatture & getActiveInvoice (2:16)
- 08. Effects condizionali e operatore RxJS "withLatestFrom" (10:05)
- 09. Invoices http service (3:05)
- 10. Concatenare effects (5:14)
- 11. Emettere azioni multiple negli effetti (4:18)
- 12. Reducer update: gestione activeInvoice e addInvoice (4:28)
- 13. Initializzazione invoice editor e gestione xhr simultanee (17:21)
- 14. UI: visualizzazione fatture e gestione fattura attiva (9:35)
- 15. UI: animare il layout sulla base dell'apertura pannelli (7:13)
- 16. Selectors, reduce ed espressioni: calcolo numero fattura progressivo (11:52)
- 17. Creare una nuova fattura (3:45)
- 18. Modificare una fattura (17:34)
- 19. Cancellare una fattura (5:53)
- 20. bug fix: delete vs setActive (5:18)
- 21. Aggiungere un campo "Date" alla fattura (2:15)
- 22. UI: migliorare il layout del-pannello clienti (4:20)
- 1. Introduzione al capitolo
- 3. Migliorare il layout del form (15:14)
- 4. Aprire i pannelli clienti e dello storico fatture (6:00)
- 5. Da "template-driven forms" ai Reactive Forms (6:34)
- 6: Component lifecycle: ngOnChanges (6:51)
- 7. ReactiveForms: metodi patchValue and reset (1:54)
- 8. FormArray: gestione prodotti fattura - part 1 (9:17)
- 9. FormArray: gestione prodotti fattura - part 2 (14:28)
- 10. FormArray: gestione prodotti fattura - part 3 (3:35)
- 11. FormArray: calcolo totale prodotti (8:02)
- 12. FormArray: selezione clienti (8:01)
- 01. Routing Redirect (0:45)
- 02. Aggiungere immagini al progetto (2:42)
- 03. Ottimizzazione performance con la ChangeDetectionStrategy "onPush" (5:33)
- 04. TIP: barrel index file: import / export modules (6:31)
- 05. Miglioramento Performance: sottoscrizione manuale agli observable vs async (ngif-as) (3:34)
- 01. Nested Routes & multiple Containers (7:46)
- 02. Selettori Compositi (6:40)
- 03. Router: back action (2:11)
- 04. CSS TIP: print media query & Angular CSS ViewEncapsulation (3:54)
- 05. Visualizzazione dati e stampa (10:35)
- 1. Configurazione modulo "root" vs module "core" (0:36)
- 2. Runtime checks & immutabilità (2:24)
- 3. Store "forRoot" vs "forFeature" (1:58)
- 4. Store Type & actionReducerMap (2:10)
- 10. Reducer & sintassi JS per restituire oggetti in un reducer (1:08)
- 11. Reducer & problemi di compilazione AOT (1:33)
- 20. Actions: passare la minore quantità di informazioni nel payload (4:07)
- 33. Selectors: sommario (4:37)
- 34. Effects: sommario (2:12)
- 35. RXJS TIP: switchmap vs exhaustmap vs concatmap vs mergemap (2:29)
- 36. Effects: recuperare lo stato con withLatestFrom (2:15)
- 37. Effects: dispatch multiple actions (2:51)
A COSA SERVE UNO STATE MANAGER
Le Single Page Application, al crescere della loro complessità e delle informazioni che devono gestire, con il tempo risultano sempre più difficili da mantenere. L'utilizzo di componenti stateful, l'abuso di pattern come la dependency injection in Angular o le context API di React, tanto per citare un paio di esempi, e l'integrazione di altre tecniche utilizzate per una gestione semplificata dello stato applicativo spesso non sono sufficienti a garantire efficienza e scalabilità nel medio-lungo periodo. Gli state manager, come ad esempio NGRX, ispirato a Redux, offrono delle soluzioni consolidate per una corretta gestione dello stato, purché l'applicazione sia sviluppata seguendo determinati criteri. In questo video cercherò di introdurre la problematica e di descrivere brevemente i vantaggi nell'integrazione del pattern Redux.
NGRX: PRO e CONTRO
Cos'è NGRX? Quali vantaggi ci permette di ottenere? Cosa sono e come funzionano i Redux Dev Tools?
Oltre a comprendere le potenzialità di uno state manager e della sua integrazione in applicazioni front-end, analizzeremo anche gli svantaggi e le difficoltà che ne conseguono.
Nel video vedrete, inoltre, parte dell'applicazione che svilupperemo al termine del corso NGRX
DATA FLOW
Tramite l'utilizzo di uno state manager come NGRX non solo sarà possibile separare nettamente la user interface, realizzata in Angular, dalla data architecture, gestita invece da NGRX, rendendo quindi la code base più semplice da mantenere ed efficiente, ma la stessa architettura sarà organizzata in differenti fasi, che analizzeremo in questo video:
• Actions: le azioni, effettuate nella maggior parte dei casi dall'utente, che potranno essere tracciate e identificate
• Reducers: che si occupano di manipolare lo stato sulla base delle azioni
• Effects: gestione separata di side effect come XHR, gestione router, sync con localstorage...
• Selectors: recuperare di una porzione di stato
ORGANIZZAZIONE CARTELLE
Al crescere della complessità di un'applicazione, aumenterà ovviamente anche la quantità di files da gestire nel progetto.
L'utilizzo di convenzioni e best practice fornite da un framework "opinionated" come Angular e da uno state manager come NGRX, semplificherà notevolmente il processo di manutenzione, il debug e le operazioni di refactoring, grazie ad una specifica organizzazione di file e cartelle e all'utilizzo di una corretta nomenclatura
NGRX Syntax
In questo video analizziamo le API di NGRX 8 con diversi esempi e caso d'uso che faranno ampio uso di Typescript e RxJS:
• organizzazione dello store
• azioni type-safed
• gestione di side "effects", che fanno largo uso di operatori RxJS
• manipolazione stato tramite i "reducer" e l'utilizzo dell'immutabilità
• selectors: recupero delle informazioni dallo stato sfruttando la memoization
STATELESS UI
Per sfruttare al massimo le potenzialità di uno state manager è necessario creare applicazioni front-end quasi totalmente stateless.
Cosa significa? In breve, tutto ciò che riguarda la gestione dello stato e dei side effect (XHR, redirect, ecc.) saranno delegati a NGRX, e solo tramite degli "speciali" componenti, definiti "Container", la user interface potrà comunicare con lo state manager, ricevendo lo stato proprio dal Container tramite proprietà @Input ed emettendo eventi sfruttando gli @Output event emitter.
Il "Container" fungerà quindi da ponte tra UI e data architectures.
RECENSIONI
Alcune delle recensioni che gli studenti del corso hanno lasciato sulle mie pagine Facebook e LinkedIn
Andrea Giunta
Ho seguito con estremo interesse il corso di "Angular & NGRX” tenuto da Fabio Biondi. Il corso è estremamente interessante, ben strutturato e pratico. Fabio è una garanzia di eccellenza e competenza, ha una grande capacità di esporre argomenti complessi in modo fluido e chiaro I suoi corsi sono un investimento assolutamente positivo
Angelo Albanese
Al solito ben strutturato e chiaro, ma qui vengono addirittura create da zero due app con procedimento spiegato passo a passo e sono inoltre presenti tantissimi consigli sulle best practices da seguire. Ho notato che nei vari corsi spesso mi sorgevano diversi dubbi su determinati argomenti e "magicamente" poco dopo o nel video successivo trovavo la risposta a tutto, sintomo di intuizione delle difficoltà che possono avere gli studenti e di grande preparazione da parte di Fabio
Federico Gambarino
Ho acquistato il corso avanzato di Fabio su angular, rxJs e ngRx e posso affermare con convinzione che le notevoli conoscenze tecniche, unite a un'ottima capacità comunicativa rendono Fabio un'eccellenza a livello italiano. Nonostante fosse interamente da remoto - e da remoto è tutto più difficile - è stato in grado di mostrare e trasmettere molti concetti utili e interessanti, oltre che disponibilità e passione
FAQ
Hai dubbi o domande? Contattami
• 10% per 2+ studenti
• 30% per 5+ studenti
• 50% per 10+ studenti
Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto.
Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale.
Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
Guarda un esempio di fattura
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter che trovi in homepage
Docente
FABIO BIONDI
Fabio Biondi, Microsoft MVP e Google Developer Expert, è uno sviluppatore freelance con più di 15 anni di esperienza nella creazione di applicazioni web enterprise.
Speaker in numerosi eventi nazionali, ha inoltre fondato diverse community italiane che si occupano di Javascript, Angular e React (~30000 membri)
Attualmente si occupa principalmente di formazione e consulenza su Javascript, Typescript, Angular, React, Next, Redux, NGRX e RxJS, Git.
Acquista il corso
Acquista il corso per accedere al materiale dove e quando vuoi...
per sempre!
Accesso a Vita
Corso Angular & RxJS 6.x
Corso Angular & NGRX 9.x
270 video
26 ore di lezione
30 ggSoddisfatto o Rimborsato
TEAMS & ACQUISTI MULTIPLI
Sconti fino al 50% per team e aziende che necessitano di acquistare più di una licenza d'uso