DATA ARCHITECTURES in Angular, Redux e ngrx

Fabio Biondi e Michele Stieven


Un’introduzione alla creazione di architetture solide e scalabili in Angular utilizzando Redux, ngrx per la gestione dello stato applicativo

Requisiti: per comprendere gli argomenti trattati nel corso è necessario avere una discreta conoscenza delle seguenti funzionalità del framework Angular: componenti custom, moduli, dependency injection, router e lazy loading.

OVERVIEW
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, time travel debugging sono solo alcune delle problematiche 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.

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. I dati sono esposti sotto forma di Observable (quindi fa largo uso di RxJS) tramite selezioni dello stato e fornisce una moltitudine di pattern e utility per gestire inoltre operazioni asincrone, effects/middlewares, lazy loading, entità e molto altro.

IL PROGRAMMA
Redux Introduction

  • Principi fondamentali
  • Immutable State
  • Pure vs Inpure functions
  • Reducers
  • Store
  • Actions
  • Containers vs Presentational components
  • Esempi e casi d’uso

Gestione stato applicativo con NGRX
  • Data architectures in Angular e NGRX
  • Store e stato aplicativo
  • Azioni, sincrone e asincrone
  • Reducer: aggiornare lo stato applicativo
  • Selettori e memoization
  • Async Pipes
  • Action Creator
  • Comunicazione con il server
  • Observable e RxJS
  • Effects
  • Gestione di custom modules
  • Lazy loading
  • Integrazione test

main
platinum
gold
silver
bronze
Media partners
Become a Sponsor!
Download PDF