Vue 3 in una SPA che cresce
Da EventBus a Pinia, integrazioni pesanti e i pattern contro la duplicazione
I problemi di una SPA arrivano quando smette di essere piccola: lo stato passa di mano senza che si capisca dove, una libreria pesante non va d'accordo con il sistema reattivo, e lo stesso pezzo di logica compare in cinque componenti. La serie affronta i tre casi con pattern concreti.
I problemi di una SPA arrivano quando smette di essere piccola
Finché i componenti sono pochi, un EventBus funziona e nessuno si lamenta. Il problema arriva dopo: lo stato passa di mano senza che si capisca dove, e per rispondere a chi ha cambiato questo valore bisogna leggere tutto il progetto.
Questa serie affronta tre casi che si presentano in quell'ordine. Sostituire l'EventBus con uno store senza riscrivere l'applicazione in un colpo solo. Integrare una libreria pesante, nel caso concreto una mappa, tenendola fuori dal sistema reattivo invece di lasciare che il framework la gestisca. Ed estrarre la duplicazione quando lo stesso pezzo di logica è finito in cinque componenti.
L'ultimo articolo porta anche un anti-pattern, perché l'astrazione sbagliata costa più della duplicazione che voleva togliere.
Cosa imparerai
- ✓ Sostituire un EventBus con Pinia in modo progressivo, senza riscrivere tutto
- ✓ Integrare una libreria pesante tenendola fuori dal sistema reattivo
- ✓ Estrarre la duplicazione con composable, wrapper e utility, e sapere quando non farlo
Articoli della serie
- 01Da EventBus a Pinia: migrazione progressiva dello stato in Vue 3 11 min
Pattern concreti per sostituire EventBus con Pinia in un progetto Vue 3: cache con deduplication, persistenza selettiva, approccio ibrido
→ - 02OpenLayers e Vue 3: integrazione con composables e TypeScript 13 min
Pattern per integrare OpenLayers in Vue 3: shallowRef tiene la mappa fuori dal sistema reattivo, i composables fanno da ponte e incapsulano il cleanup.
→ - 033 pattern (+1 anti-pattern) per eliminare la duplicazione in Vue 3 11 min
Tre pattern Vue 3 contro la duplicazione nelle SPA: composable, wrapper con slot e utility. Più l'anti-pattern del componente iper-configurabile.
→