Redux: l'architettura definitiva per un front-end ordinato e manutenibile

Angular 2
18 aprile 2017
Web Socket e WebRTC
18 aprile 2017
Frontend Development

Redux: l'architettura definitiva per un front-end ordinato e manutenibile

Pensare che Redux sia solo una nuova architettura per strutturare un’applicazione front-end è riduttivo: Redux è sicuramente un’evoluzione dell’architettura MVC che aumenta la manutenibilità e permette un chiaro controllo sul codice che gestisce i dati, ma l’ecosistema di strumenti a supporto dello sviluppatore è la vera innovazione: time-traveling debugger per andare avanti e indietro nel debug dell’applicazione e hot-swapping per vedere l’applicazione aggiornarsi istantaneamente ogni volta che si modifica una riga di codice. Questi due strumenti cambieranno per sempre il modo di sviluppare lato front-end.

Prerequisiti

Sono necessarie conoscenze di HTML (DOM, tag HTML5, CSS di base) e JavaScript (padronanza del linguaggio). Occorre conoscere le basi del design software e l’architettura MVC (che verrà comunque introdotta durante il corso). Per la seconda parte del corso è utile avere conoscenze di base di Angular2 o React.

 

 

Obiettivi formativi

L’obiettivo del corso è permettere allo sviluppatore di progettare un’applicazione web in cui si assegna un ruolo chiaro ad ogni parte del sistema: i componenti per la parte di visualizzazione, i servizi per gestire la comunicazione e soprattutto le Actions Redux e i Reducers per separare quali operazioni eseguire sui dati e quello che andranno a fare queste operazioni.

 

 

Programma

Parte 1: dall’architettura MVC a Redux

  • MVC: architettura e limiti
  • Redux: motivazioni
  • Lo stato dell’applicazione: lo Store
  • Dichiarare quali operazioni eseguire sullo stato: le Actions
  • Definire come trasformare i dati: i Reducers
  • Approfondimenti sul flusso dati
  • Redux e il routing
  • Gestione delle operazioni asincrone
  • Sviluppare vedendo le modifiche in real time: Hot swapping
  • Debuggare con lo Step Backward: Time-traveling debugger
  • Perché Redux permette di testare facilmente un’applicazione
  • Unit testing in Redux

 

Parte 2: sviluppo di un’applicazione Redux

  • Un  di esempio di applicazione gestionale in Redux: mockup
  • Struttura dell’applicazione: lo stato
  • Struttura dell’applicazione: i componenti
  • Struttura dell’applicazione: i servizi
  • Struttura dell’applicazione: il flusso di esecuzione
  • Redux tipizzato: Typescript + Redux
  • Redux e Angular
  • Un esempio di applicazione
  • Ulteriori strumenti di sviluppo
  • Un esempio di applicazione
  • L’ecosistema React