Angular Data Architectures: Redux e RxJS

Day 1: Reactive Programming in RxJS

Reactive Programming In RxJS

· Concetti core Reactive Programming, differenze e use cases in relazione ad altri paradigmi

· Comprensione in dettaglio di Observables e Observers

· Creazione di custom Observables e Observers in comuni casi d’uso

· Utilizzo degli operators più comuni e scenari d’uso per ciascuno

· Gestione eventi asincroni comuni e avanzati quali HTTP

· Esercizi sulle basi di RxJS con tips & tricks

Real-World RxJS

· Debugging in RxJS

· Combinazione di Observables e operators

· Subjects e multicasting: cosa sono, differenze tra i diversi tipi di Subjects e casi d’uso per ciascuno

· BehaviourSubject in dettaglio: perché viene tanto usato e come evitare errori più comuni

· Studio problemi comuni nelle Web Application con relative soluzioni in RxJS

Angular & RxJS

· Integrazione RxJS in progetti Angular e TypeScript

· Aspetti reactive del framework Angular: Http, Reactive Forms, Router, Componenti

· State management e application flow con RxJS

· Miglioramento performance di un’applicazione Angular con RxJS

· Build e distribution di un’applicazione Angular con RxJS

RxJS Avanzato

· Unit testing con RxJS

· Gestione WebSockets in RxJS

· Dietro le quinte di RxJS: come è implementato

· Utilizzo di uno Scheduler in contesti ad alto carico di lavoro (livello alto avanzato)

Day 2: Angular Data Architecture in Redux

Concetti Core

· Problemi di comunicazione tra componenti Angular

· Gestione del data-flow deterministico, scalabile ed esplicito

· Caratteristiche del pattern Flux e come Redux evolve da esso

· Vantaggi dell’unidirezionalità

· Confronto con MVC

· Integrazione con Angular

· Pattern Smart e Dumb Components

· Come mantenere lo stato applicativo e Redux indipendente dai componenti

· Integrazione Redux + TypeScript: tipizzazione dello stato applicativo

Integrazione Redux e RxJS

· ChangeDetectionStrategy: come migliorare le performance dei componenti tramite Redux

· Utilizzo di librerie Redux in Angular: Angular-Redux (precedentemente denominato ng2-redux) e ngrx. Differenze e come scegliere consapevolmente.

Real-World Redux con Unit Testing

· Principi fondamentali

· Action e action creator con unit testing

· Reducers con unit testing

· Caratteristiche dello Store immutabile

· Comporre lo stato iniziale e l’avvio dell’app

· Vantaggi dello Single state tree

· L’importanza dell’Immutabilità

Redux Avanzato

· Composizione di reducers

· Redux Middlewares

· Side effects con redux-observable e ngrx/effects

· State selectors, memoization e computed data

· Accenni server-side rendering con Redux e Angular

Day 3: Real World Application

Analisi di una applicazione reale per individuare gli aspetti legati all’utilizzo di RxJS e Redux

Analisi e Risoluzione

· Analisi iniziale dell’applicazione prima di Redux + RxJS e studio dei problemi di stato applicativo e data-flow

· Risoluzione dei problemi tramite puro RxJS in Angular

· Analisi pro e contro puro RxJS

· Integrazione Redux con Observable Store nell’applicazione

· Analisi struttura dello stato applicativo: errori e design patterns più comuni

· Analisi struttura di un progetto Angular con Redux

Operazioni

· Operazioni CRUD in Redux

· Creazione action creators e reducers con unit testing

· Creazione componenti smart & dumb connessi a Redux con unit testing della parte Redux

· Utilities e tips per la modifica dello stato applicativo in maniera concisa, performante e dichiarativa

· Gestione richieste HTTP al server

· Gestione validazione server e optimistic updates con eventuale rollback

· Gestione autenticazione JWT in Redux

· Persistenza dello stato applicativo