Contattami | Tutti i corsi

STATE MANAGER &
DATA ARCHITECTURES
CON ANGULAR8 e NGRX8

Un corso intensivo su Angular 8, RxJS e NGRX 8, uno state manager reattivo per la creazione di architetture solide e scalabili

angular-ngrx-full



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

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.
SOMMARIO ARGOMENTI
Si fornirà, innanzitutto, una solida base sui concetti fondamentali tramite l'utilizzo slide, diagrammi e sessioni di teoria per comprendere la base del pattern Redux e il funzionamento di NGRX.

Per consolidare i concetti acquisiti dopo la teoria, saranno descritte e affrontate le casistiche e gli scenari più comuni tramite sessioni di live-coding in cui si svilupperanno snippet di codice molto semplici e pratici non solo su NGRX ma anche su RXJS, gli operatori e i costrutti indispensabili che è necessario conoscere per poter sfruttare al massimo la libreria.

Si svilupperà, infine, un'applicazione completa ricca di esempi utili e anche molto particolari: creazione di store complessi, gestione della user interface e degli errori tramite specifici reducer, operazioni CRUD, relazioni tra porzioni di stato, gestione side-effects (XHR, Router e LocalStorage, azioni multiple, ...) , autenticazione JWT, gestione router e protezione delle view, HTTP interceptors, integrazione reactive forms, creazione direttive strutturali per la protezione del DOM e molto altro.

Durata: 16 ore (2gg)
Livello: Avanzato
Versione Angular: 8.x
Versione NGRX: 8.x
Tipologia: Corso in aula

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.

OBIETTIVO DEL CORSO
Creare applicazioni Angular scalabili, testabili e semplici da mantenere utilizzando NGRX per la gestione dello stato applicativo, applicando una netta separazione tra architettura dati e presentational layer.
Al termine del corso il partecipante sarà, quindi, in grado di introdurre NGRX nei propri progetti Angular e di sfruttarne al massimo il potenziale.
REQUISITI
Per comprendere gli argomenti trattati nel corso è necessario avere una buona conoscenza delle seguenti funzionalità del framework Angular: componenti custom, moduli, dependency injection, router e lazy loading. Nel caso di intenda prima approfondire questi argomenti consiglio di frequentare il corso Mastering Angular.
Pur essendo un argomento affrontato durante il corso, data la sua complessità, consiglio inoltre di documentarsi sul concetto di programmazione reattiva e in particolar modo sulla libreria RxJS e l'utilizzo dei suoi operatori.
PROGRAMMA
Introduzione a RxJS
Imperative vs Reactive programming
Observable vs Observer
next, error and complete
Pull vs Push
Subscription
subscribe e/o async pipe
Operatori di Creazione vs Pipeable operators
Marble Diagrams
Vari esempi di utilizzo operatori
RXJS & Angular: Esempi pratici HttpClient
Operatori RXJS indispensabili: map, filter, ...
Http & map operator
Nested HTTP request with switchMap
Richieste HTTP simultanee con l'operatore forkJoin
switchMap vs mergeMap vs concatMap vs exhaustMap
reduce and scan operators
Gestione errori e operatore catchError
withLatestFrom operator
Vari esempi e snippet riutilizzabili
RXJS & Angular: autenticazione e sicurezza
Gestione login: introduzione ai Subject
Router Guard e RxJS
HTTPInterceptor
RXJS & Angular: Reactive Forms
Angular Reactive Forms vs template-driven forms
Reactive Forms con valueChanges
Utilizzo operatori RxJS utili per la gestione form
RXJS Subject
Differenze tra le differenti tipologie di Subject
Unicast vs Multicast
Multicast con l'operatore share
Subject vs BehaviorSubject vs ReplaySubject vs AsyncSubject
Autenticazione, Sicurezza e NGRX
Processo di autenticazione JWT
Modifica profilo utente
Router Guards: creare sezioni protette da login
HTTP Interceptors
Protezione del DOM tramite custom structural directives, ad es. *ifLogged
AutoLogin e persistenza dati tramite localStorage
Reactive Forms, UI & NGRX
Integrazione Reactive Forms
Sincronizzazione Form con lo stato applicativo
Utilizzo di FormBuilder, FormControl, FormGroup
Gestione elenchi dati con FormArray
Gestione User Interface tramite NGRX (ad es. apertura e gestione pannelli)
Redux fundamentals
Principi fondamentali di Redux
Immutable State in Javascript
Pure vs Inpure functions
Redux core concepts: store, reducers, actions
NGRX fundamentals
Introduzione tecnica alla libreria
Costrutti, funzionalità e API principali
Installare le librerie necessarie
Reactive Store e Observable
Modellare lo store con StoreModule
Modificare lo stato tramite reducer
Selectors e memoization: selezionare porzioni di stato
Debugging e Redux Chrome Dev tools
Esempi e casi d'uso reali
Impostare progetti NGRX
Organizzazione progetti scalabili e manutenibili in Angular
Data architectures in Angular 8 e NGRX 8
Sviluppo modulare: custom ngModules Core, Shared e Features
Approccio component-based
Stateless architectures
Containers vs Presentational components
Sviluppo Real World Applications in ANGULAR / NGRX: gestione CRUD, autenticazione, profilo, forms complessi, protezione DOM, router e molto altro
Reducer & Selectors
Stato globale con forRoot
Gestione stato "lazy" tramite l'utilizzo di forFeature
Modifica dello stato tramite reducer
Il metodo createReducer in NGRX
Nested reducers con ActionReducerMap
Selectors semplici e compositi
createSelector vs createFeatureSelector
MetaReducers
Actions & Effects
Time travel debugging
Typed Safed Actions con createAction
Il metodo createAction
Gestione side effects con "NGRX Effects"
Il metodo createEffect
Gestione applicazioni CRUD, router e localStorage
Avviare azioni multiple negli effects
Effetti condizionali sulla base dello store
Router Store
Installazione e configurazione NGRX Router
Sincronizzazione router con stato applicativo
Navigazione
Creazione custom Actions per il router
Router Selectors
Protezione route con guardie, NGRX e l'utilizzo di JWT
Gestione router con Lazy Loading
MODALITÀ LEZIONI
TEORIA
angular-ngrx-mode3
Approfondimento su API, tecniche e funzionalità di NGRX. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-ngrx-mode1
Moltissimi esempi pratici con sessioni di live-coding sulle principali funzionalità di NGRX gestendo differenti scenari e casi d'uso
REAL APPS
angular-ngrx-mode2
I concetti descritti durante il corso saranno messi in pratica tramite la realizzazione di una Single Page Application



ISTRUTTORE:
FABIO BIONDI

profile-round-gde-1



TRAINER, SPEAKER, DEVELOPER
Fabio Biondi, front-end developer da quasi 20 anni, si occupa di formazione, sviluppo e consulenza in ambito enterprise.
Attualmente focalizzato principalmente su Angular, React, Redux, Fabio ha inoltre un solido background nella creazione di interfacce interattive, componenti e infografiche in HTML Canvas e D3.js.

Membro attivo e fondatore di diverse community italiane, collabora attivamente con molte realtà italiane per l'organizzazione di eventi, master, campus e corsi di specializzazione in cui ha formato centinaia di sviluppatori, studenti e team.

Nel 2018 ha ottenuto la qualifica di Google Developer Expert in Web Technologies e Angular e per diversi anni (2004-2011) è stato Adobe Certified Expert & Instructor (Flex, AIR, Flash PRO, Flash Catalyst).

2019-GDE-Angular-Badge
2019-GDE-Web-Technologies-Badge
RECENSIONIUTENTI

COSA INCLUDE IL CORSO
Corso di formazione on-site
16 ore (2gg)
Accesso ad Area educational
Slide & Esercizi
CheatSheet NGRX
PDF formato A4
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 persone (10-30).
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
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Assolutamente sì. Utilizza il form di contatto e organizzeremo volentieri una skype call o telefonata di confronto
Posso modificare il programma e creare un corso personalizzato ?
Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo definire un programma ad hoc tarato sulle vostre necessità e skill. 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 12/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?
Vivendo a Trieste, i viaggi per raggiungere le sedi dei corsi sono spesso lunghi, faticosi e non privi di imprevisti.
Per questo motivo il numero di giornate minimo affinché si possa organizzare un corso è due, nel caso la durata del viaggio sia inferiore alle 3 ore. Tre giornate, invece, nel caso di una durata maggiore
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?
È 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)