State Management in Angular e NGRX 9
Video Corso
NGRX è una libreria ispirata a Redux creata per gestire lo stato applicativo in applicazioni Angular e ne condivide diversi aspetti - azioni, reducers e un singolo store.
Rappresenta ormai uno "standard de facto" tra gli state manager disponibili nell'ecosistema Angular ed è ormai utilizzato in moltissimi contesti corporate ed enterprise.
Si ispira al pattern Redux e sfrutta RxJS per esporre dati e azioni come Observable e gestire i side effect in modo isolato.
Rappresenta ormai uno "standard de facto" tra gli state manager disponibili nell'ecosistema Angular ed è ormai utilizzato in moltissimi contesti corporate ed enterprise.
Si ispira al pattern Redux e sfrutta RxJS per esporre dati e azioni come Observable e gestire i side effect in modo isolato.
200 video
su NGRX 9
18 ore
di materiale
INTRODUZIONE
Angular fornisce gli strumenti fondamentali per sviluppare un’intera Single Page Application.
Tuttavia, le attività che il front-end deve svolgere sono sempre più complesse e le interfacce utente (UI), di conseguenza, stanno diventando sempre più sofisticate: gestione di un data-flow molto articolato, componenti che devono rimanere in sync tra di loro, integrazione unit test, refactoring e debug sono solo alcune delle attività ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente.
Redux,libreria nata per requisiti complessi in contesti quali Facebook, nasce con l’obiettivo di separare nettamente gli aspetti architetturali dalla user interface, semplificando la gestione dello stato applicativo e rendendo il codice molto più manutenibile, testabile e scalabile, grazie a diversi strumenti offerti dalla libreria e estensioni utilissime per il browser, come i Redux Dev Tools.
COS'È NGRX
In NGRX, i dati sono esposti sotto forma di Observable (quindi fa largo uso di RxJS) tramite selezioni dello stato e fornisce una moltitudine di best practice e utility per isolare ogni attività: azioni, effetti, modifica allo stato (reducer) e selezione stato (selectors).
La UI risulterà quindi totalmente "stupida" e la maggior parte della business logic sarà quindi gestita da NGRX: operazioni asincrone (effects), (type safed) actions, gestione stato (reducer), selettori con funzionalità di memoization (selectors), lazy loading store, export/import store, time travel debugging, sincronizzazione dello store con il router, serializzazione dello store, sync con localStorage, undo/redo e molto altro.
COSA SONO I REDUX DEV TOOLS
Utilizzando Redux o NGRX sarà possibile utilizzare una fantastica estensione per i browser tramite la quale monitorare ogni fase della tua applicazione, semplificando le operazioni di manutenzione e debug: history azioni, modifiche allo stato applicativo, differenze tra stato precedente e successivo, time travel debugging, export e import di uno snapshot dello stato e molto altro.
IL CORSO
Un corso dedicato allo state manager NGRX dalle basi fino ai casi d'uso più complessi e particolari. Include:
1
Teoria
Fornisce una solida base su NGRX e Redux tramite l'utilizzo di slide, diagrammi e sessioni di teoria
2
Live Coding
Sessioni di live coding in cui si apprendono e mettono in pratica le funzionalità di NGRX per la gestione di scenari e casi d'uso che si presentano frequentemente in applicazioni realizzate in Angular / NGRX
3
Real World Project
Creazione di un'applicazione, relativamente sofisticata, per la gestione della fatturazione
A chi è rivolto
Angular Developers
Pur essendo un corso realizzato per sviluppatori che già utilizzano Angular, tutti gli argomenti sono affrontati dalle basi. Quindi si rivolge a tutti coloro che vogliono comprendere il potenziale di NGRX.
Requisiti
Per comprendere gli argomenti trattati nel corso è preferibile avere una discreta conoscenza di Angular e RxJS.
Potrebbero quindi interessarti i corsi Angular Fundamentals e Angular & RxJS
Potrebbero quindi interessarti i corsi Angular Fundamentals e Angular & RxJS
Punti di forza
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 NGRX, dalle basi ai concetti più avanzati. Adatto a sviluppatori che non ha mai utilizzato questo strumento, o per chi, invece, è già più esperto e vuole approfondire.
Best Practice
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
Esempi Pratici con Angular e NGRX
Gestione "stato" e creazione user interface complesse, gestione errori e side-effects (XHR, Router e LocalStorage, ...), relazioni tra diversi stati, integrazione con router e reactive forms, creazione direttive strutturali sono solo alcuni degli argomenti trattati
Real World Application
Dopo aver descritto i concetti base e creato delle demo, svilupperemo un'applicazione per la gestione di fatture composto da ben 70 video in cui si analizzano moltissimi scenari e casi d'uso particolari
Argomenti trattati nel corso
Angular & NGRX
InvoiceApp: Sync Router con lo Store
28:37
InvoiceApp: Sync Router con lo Store
28:37
• 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)
InvoiceApp: Gestione Profilo Utente
01:05:16
InvoiceApp: Gestione Profilo Utente
01:05:16
• 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)
Invoice App: Autenticazione e Sicurezza
01:51:51
Invoice App: Autenticazione e Sicurezza
01:51:51
• 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)
InvoiceApp: introduzione alla feature InvoiceEditor
18:23
InvoiceApp: introduzione alla feature InvoiceEditor
18:23
• 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
InvoiceEditor -> Clients: UI
01:10:24
InvoiceEditor -> Clients: UI
01:10:24
• 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)
InvoiceEditor -> Clients: gestione STORE
37:19
InvoiceEditor -> Clients: gestione STORE
37:19
• 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)
InvoiceEditor -> HttpStatus: gestione messaggi "success" e "failed"
33:08
InvoiceEditor -> HttpStatus: gestione messaggi "success" e "failed"
33:08
• 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)
InvoiceEditor -> ui -> sync user interface with store
26:41
InvoiceEditor -> ui -> sync user interface with store
26:41
• 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)
InvoiceEditor -> Invoices: gestione fatture (advanced tricks)
02:18:59
InvoiceEditor -> Invoices: gestione fatture (advanced tricks)
02:18:59
• 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)
InvoiceApp -> InvoiceEditor: Reactive Forms
01:19:56
InvoiceApp -> InvoiceEditor: Reactive Forms
01:19:56
• 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)
Miglioramenti-best-practices-and-fix
19:05
Miglioramenti-best-practices-and-fix
19:05
• 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)
Stampa Fattura
31:06
Stampa Fattura
31:06
• 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)
EXTRA: NGRX tips & tricks
28:20
EXTRA: NGRX tips & tricks
28:20
• 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)
Il corso è aggiornato?
Il corso è stato realizzato utilizzando Angular 10 e NGRX 9.
Gli argomenti trattati sono ancora attuali e totalmente compatibili con le più recenti API di Angular e NGRX.
Tuttavia, in Angular 12, la configurazione di TypeScript è stata impostata di default alla modalità strict.
Molti video, quindi, registrati prima di questo aggiornamento, non tengono conto di questo aspetto e di conseguenza non potranno essere replicati step by step.
Due delle differenze principali:
null o non è inizializzata ( undefined ) è necessario esplicitarlo nei tipiGià solo queste due differenze implicano che il codice abbia dei problemi di compilazione in Angular 12 o superiori.
Per risolvere il problema e avere la possibilità di replicare tutti gli esercizi:
strict a false.
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 ispirati a Redux, come NGRX, 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.
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 ispirati a Redux, come NGRX, 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
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
• 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 "effect"
• manipolazione stato tramite "reducer" e immutabilità
• selectors: recupero delle informazioni dallo stato sfruttando la memoization
STATELESS UI
Per sfruttare al massimo le potenzialità di uno state manager è consigliabile la creazione di 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.) sarà delegato a NGRX e i componenti si limiteranno a visualizzare dati ed emettere azioni.
Il "Container" fungerà quindi da ponte tra UI e dati.
Acquista il corso
Accedi al materiale dove e quando vuoi... per sempre!
Multi Licenza
€
290
+ iva
/utente
-
Stessi vantaggi del piano Standard
-
Prezzo scontato per 5 o più utenti
-
Report / Progress per singolo utente
Il più venduto!
Singolo utente
€
390
+ iva
-
Corso Angular & NGRX 9
-
200 video
-
18 ore di lezione
-
Codice Sorgente
-
15 gg soddisfatto o rimborsato
Hai bisogno della fattura?
Devi inserire i dati in fase di acquisto cliccando il checkbox "Add a business tax ID" o non sarà più possibile richiederla
FAQ
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Certo, puoi scrivermi tramite il Form di Contatto
È possibile fruire il corso simultaneamente su device?
È possibile fruire il corso simultaneamente su device?
Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati.
Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
Contattami per ulteriori info.
Contattami per ulteriori info.
È previsto un rimborso nel caso non fossi soddisfatto?
È previsto un rimborso nel caso non fossi soddisfatto?
Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 15 giorni dall'acquisto
Posso ricevere la fattura?
Posso ricevere la fattura?
In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione.
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.
L'iva viene applicata? La fattura è inviata da un'azienda americana
L'iva viene applicata? La fattura è inviata da un'azienda americana
Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA
La possibilità di visionare il corso è limitata nel tempo?
La possibilità di visionare il corso è limitata nel tempo?
No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.
Dubbi e Domande?
Dubbi e Domande?
Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto
Dove posso seguirti per ulteriori aggiornamenti?
Dove posso seguirti per ulteriori aggiornamenti?
Sono presente su tutti i principali social network. Trovi i link nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
Per favore inviami una segnalazione compilando il Form di contatto
Keep updated about latest content
videos, articles, tips and news
BETA
2023 Fabio Biondi | P.I. 01116230317