A sample React todo app. 😊
Questa applicazione di esempio si basa su delle idee che ho avuto recentemente su React, che ho scritto sostto forma di note qui: https://spyna.notion.site/React-patterns-a37c5ae1e7044dc39b032d293549a25c
L'obiettivo di questo progetto è sviluppare una applicazione React con 3 livelli di separazione, basandosi sul pattern Model view Presenter. I tre livelli sono così divisi:
- 1° livello: esegue l'accesso ai dati e la business logic
- 3° livello: visualizzza l'interfaccia utente
- 2° livello: si occupa di comunicare i dati al livello di presentazione
Il progetto è stato sviluppato in maniera incrementale, partendo da un architettura mono-layer (in cui la business logic risiede nell'interfaccia grafica) ed aggiungendo in vari step più layer.
Ogni branch contiene uno step, gli step finali includono anche la gestione del routing, dell'autenticazione e autorizzazione.
-
step-1-monolayer: l'applicazione sviluppata con un unico layer. Note
-
step-2-mobx-store: l'aggiunta del secondo livello per l'accesso ai dati per disaccoppiare la business logic dalla "view". Note
-
step-3-inversify-ioc: aggiunta della dependency injection. Note
-
step-4-view-model-presenter: aggiunta del terzo layer. Note
-
step-5-routing: aggiunta della navigazione. Note
-
step-6-authentication: aggiunta dell'autenticazione. Note
-
step-7-authorization: aggiunta dell'autorizzazione. Note
-
main branch: la versione finale del progetto (in progress), dove le funzioni e gli hook per la dependency injection e il view-model-presenter layer sono state spostate in una libreria esterna, questa: https://github.com/Spyna/terso