CORSO INTENSIVO SU ANGULAR8 e NGRX8

Informazioni sull'evento

Condividi questo evento

Data e ora

Politica di rimborso

Politica di rimborso

Contatta l'organizzatore per richiedere un rimborso.

La commissione di Eventbrite non è rimborsabile.

Descrizione evento
Un corso introduttivo sull’utilizzo di NGRX 8, uno state manager reattivo per la creazione di architetture solide e scalabili

Informazioni sull'evento

  • Roma - 7 novembre 2019 - dalle 9 alle 18.00 - presso SPACES - METRO B - FERMATA LAURENTINA (Capolinea) - Mappa
  • Milano - 21 novembre 2019 - dalle 9 alle 18.00 - presso SPACES - ISOLA - Mappa

IMPORTANTE:

  • I posti a Milano sono esauriti. A Roma ancora quache biglietto disponibile.
  • Nel caso fossi interessato al corso di Milano scrivimi una mail su hello@fabiobiondi.io. Stiamo cercando di trovare una soluzione per accontentare tutti.

Inoltre:

L'8 novembre (Roma) e il 22 novembre (Milano), i giorni seguenti a questo corso, si terrà un evento di un'intera giornata su Javascript: (mattinata con un mio live-coding di 2 ore su RXJS e 4 speech nel pomeriggio su JS e tools front-end). Iscrizione e programma

Costo biglietto 10 euro in Early Bird (fino al 14 ottobre) o19 euro prezzo finale

---

INTRODUZIONE

Angular fornisce gli strumenti fondamentali per sviluppare un’intera Single Page Application. Tuttavia, poiché le interfacce utente (UI) diventano sempre più sofisticate, le attività ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente diventano sempre più complesse; solo per citare alcuni esempi: gestione di un data-flow molto articolato, componenti che devono rimanere in sync tra di loro, integrazione unit test, refactoring e debug.

Il mancato utilizzo di pattern appropriati e l'abuso della dependency injection spesso portano ad una serie di problematiche quali: stato unpredictable, data flow difficile da coordinare (come illustrato nell’immagine seguente) e drastica riduzione delle performance dell’applicazione

COS'È REDUX

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.

REDUX DEV TOOLS

Utilizzando Redux o NGRX sarà possibile utilizzare una fantastica estensione per i browser tramite la quale monitorare ogni azione, tracciare le variazioni dello stato e semplificare notevolmente le operazioni di debug e manutenzione. Alcune delle operazioni comuni che questo tool ci permette di effettuare con estrema semplicità sono: 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.

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 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 “selettori” dello stato e fornisce una moltitudine di best practice e utility per isolare e testare ogni attività: azioni, effetti, modifiche allo stato tramite reducer e selezioni di una porzione di store tramite selectors.

La UI risulterà quindi totalmente "stupida" e la maggior parte della business logic sarà 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.

IL CORSO

Si fornirà, innanzitutto, una solida base sui concetti fondamentali tramite l'utilizzo di slide, diagrammi e sessioni di teoria per comprendere la base del pattern Redux e il funzionamento di NGRX.

Saranno descritte e affrontate le casistiche e gli scenari più comuni tramite numerose 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 pipeable e i concetti indispensabili che è necessario conoscere per poter sfruttare al massimo la libreria.

Per consolidare i concetti esposti, sarà sviluppata, infine, un’applicazione CRUD.

Al termine del corso saranno consegnati:

  • Slide
  • Codice sorgente
  • Attestato di partecipazione al corso Angular8 & NGRX8

OBIETTIVO DEL CORSO

Creare applicazioni Angular scalabili, performanti 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 a pieno 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 si intenda approfondire prima questi argomenti consiglio di frequentare il mio video corso Angular Fundamentals.

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.

IL PROGRAMMA

Redux fundamentals

  • Principi fondamentali di Redux
  • Immutable State in Javascript
  • Pure vs Inpure functions
  • Redux core concepts: store, reducers, actions

NGRX fundamentals

  • Introduzione tecnica al funzionamento della libreria
  • Costrutti, funzionalità e API principali
  • Installare le librerie necessarie

Impostare progetti NGRX

  • Organizzazione progetti scalabili e manutenibili in Angular
  • Stateless architectures
  • Containers vs Presentational components
  • Sviluppo modulare: custom ngModules Core, Shared e Features

NGRX Store

  • Reactive Store e Observable
  • Modellare lo store con StoreModule e ActionReducerMap
  • Modificare lo stato tramite reducer
  • Selectors e memoization: selezionare porzioni di stato
  • Debugging e Redux Chrome Dev tools

Reducer: modificare lo stato

  • Stato globale con il metodo forRoot
  • Gestione stato "lazy" tramite l'utilizzo di forFeature
  • Il metodo createReducer in NGRX8
  • Modifica dello stato tramite reducer
  • “Combine” reducers con ActionReducerMap

Selectors: selezionare porzioni dello store

  • Selectors semplici
  • Selectors compositi
  • createSelector vs createFeatureSelector
  • Espressioni
  • Selectors con parametri

Actions

  • Typed Safed Actions
  • Il metodo createAction
  • Payload e il metodo props

Effects

  • Gestione side effects con "NGRX Effects"
  • Il metodo createEffect
  • Avviare azioni multiple negli effects
  • Effetti condizionali sulla base dello store

Router Store

  • Installazione e configurazione NGRX Router
  • Sincronizzazione router con stato applicativo
  • Navigazione
  • Gestione router tramite azioni ed effetti dedicati
  • Router Selectors
  • Gestione router e store con Lazy Loading

Autenticazione in NGRX e RXJS

  • Gestione del processo di autenticazione JWT
  • Protezione Route con le guardie
  • HTTP Interceptors
  • Protezione del DOM tramite custom structural directives, ad es. *ifLogged

Gestione Forms e User Interface in NGRX

  • Gestione User Interface tramite NGRX (ad es. gestione visibilità componenti)
  • Sincronizzazione Form con lo store

ISTRUTTORE

FABIO BIONDI - GOOGLE DEVELOPER EXPERT

Fabio Biondi, Google Developer Expert e front-end developer da quasi 20 anni, si occupa di formazione, sviluppo e consulenza principalmente su Angular, React, Redux, NGRX, RxJS e Javascript, e possiede inoltre un discreto background nella creazione di interfacce interattive, componenti e infografiche in HTML Canvas e D3.js.

Membro attivo e fondatore di diverse community italiane (più di 15.000 membri), speaker in numerose conferenze, organizza eventi e corsi di specializzazione in tutta Italia, tramite i quali ha formato centinaia di developer, studenti e team di sviluppatori.

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

fabiobiondi.io

Condividi con gli amici

Data e ora

Politica di rimborso

Contatta l'organizzatore per richiedere un rimborso.

La commissione di Eventbrite non è rimborsabile.

Salva questo evento

Evento salvato