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