Sviluppo di un sito disaccoppiato
Mostrare tanti contenuti (anche complessi) attraverso un’interfaccia bella da vedere, intuitiva e piacevole da navigare, veloce nel caricamento su qualsiasi device: oggi il web e i suoi utenti richiedono tutto questo attraverso soluzioni che sommino estetica e performance.
Come soddisfare la prima senza compromettere le seconde? Con una modalità di progettazione e sviluppo che adottiamo anche in Ars Media: il disaccoppiamento, che separa back-end e front-end limitando i compiti del CMS, per non appesantire l’intera architettura del sito.
Abbiamo sviluppato un sito web disaccoppiato lavorando al sito di FENIX for Interiors, linea di materiali, superfici e soluzioni innovative e in continua evoluzione pensate per l’arredamento e l’allestimento di interni. L’esigenza di Arpa Industriale, il nostro cliente, era di avere una piattaforma flessibile in cui mostrare una grande quantità di rivestimenti in differenti colori e per differenti tipologie di utilizzo, ma non solo.
Per applicare il disaccoppiamento (detto anche “decoupling”), in questo progetto abbiamo utilizzato come CMS Drupal Headless. Il back-end diventa così una banca dati dove contenuti e immagini non sono caricati per un solo utilizzo. Archiviati in librerie, sono pronti per essere impiegati ovunque: oltre che sul sito web anche in Intranet locali, applicazioni web, canali social. E con la sincronizzazione i tempi sono decisamente ottimizzati, perché quando un contenuto è aggiornato nel back-end viene aggiornato ovunque.
Per sviluppare il front-end ci siamo serviti di React e Next.js. Senza perderci in tecnicismi, con React abbiamo virtualizzato e mantenuto in memoria il DOM (Document Object Model, il modello che compone la struttura e tutti i contenuti di un sito web), garantendo un aumento delle prestazioni grazie a capacità di rendering impossibili da ottenere con il solo CMS. Next.js ci ha aiutati a gestire gli strumenti e la configurazione necessaria per React, fornendoci altre funzionalità utili e ottimizzando ulteriormente il sito lato server.
Il risultato finale è stato quell’integrazione di cui parlavamo prima in cui estetica e performance migliorano insieme, con una velocità di aggiornamento dei contenuti semplicemente irraggiungibile con il solo CMS.
In conclusione, il disaccoppiamento ci ha permesso di:
- Progettare una UI migliore, con soluzioni grafiche studiate ad hoc;
- Migliorare le prestazioni complessive del sito e delle singole pagine;
- Creare una grande banca dati facilmente accessibile in cui aggiungere, aggiornare o eliminare i prodotti.
Oltre al sito di FENIX for Interiors, con la stessa metodologia abbiamo progettato e sviluppato anche Trespa.info, Fenixforinteriors.info e Formica-Asia.info: tre portali con tre front-end diversi, ma che condividono lo stesso CMS. È un esempio perfetto del funzionamento del decoupling.
