Sailsquare

Sailsquare è una tra le prime piattaforme al mondo per la prenotazione di vacanze in barca a vela. Nata dalla passione e intuizione di due giovani italiani, Sailsquare applica alla nautica e alle esperienze di viaggio in barca il modello reso popolare da Airbnb, in cui sono gli skipper a proporre le esperienze, accompagnando gli ospiti per mare, itinerari, curiosità e divertimenti.

Modo ha aiutato Sailsquare a rilasciare un nuovo design facendo evolvere la codebase verso una pattern library organica e agevolmente manutenibile, senza affrontare un refactoring globale incompatibile con la velocità di execution richiesta a una startup.

Cosa abbiamo fatto

• Creazione di una pattern library secondo la metodologia Atomic Design per sistematizzare progressivamente il redesign del sito
• Refactoring progressivo del codice, isolando i nuovi componenti con classi a scope stretto (BEMIT)
• Componenti utilizzabili in ogni contesto legacy tramite "sandbox CSS"
• Incapsulamento di funzionalità interattive in widget VueJS con modalità di progressive enhancement

Come abbiamo lavorato

Sailsquare ci ha contattato per far crescere il team di sviluppo e aiutarli a rilasciare più rapidamente nuove funzionalità sulla propria piattaforma. Contemporaneamente veniva varato un nuovo design del sito, che permetteva di sistematizzare i componenti e definire regole di stile uniformi.

Abbiamo lavorato insieme al direttore creativo di Sailsquare per declinare il design in una pattern library che comprendesse tutti i nuovi componenti e i design token della nuova style guide. Gli elementi sono stati validati su PatternLab e testati cross–browser sia in isolamento che all’interno dei template di pagina con contenuti di esempio. Questo ci ha permesso di identificare scenari limite del design, non immediatamente evidenti durante la fase di progettazione, e di lavorare con la direzione creativa per adottare le soluzioni di volta in volta migliori.

Come si garantisce che una libreria di componenti resti viva?

Una pattern library resta un esercizio di stile se non diventa il repertorio di componenti disponibile per l’implementazine e l’evoluzione del sito. Per farlo, deve restare viva, ed il codice dei componenti utilizzato così come è presente nella pattern library anche in produzione.

Per questo motivo una delle preoccupazioni iniziali è stata concordare le modalità con cui i componenti della pattern library venivano trasferiti al backend. Insieme alla direzione tecnica abbiamo scelto una tecnologia di template (Twig) che permettesse la coesistenza dei componenti frontend sia all’interno dello strumento di presentazione della pattern library, sia nell’implementazione del backend (PHP + Symphony). Il template dei componenti è stato quindi adottato as–is dal backend, garantendo identità del codice e riducendo il rischio di regressioni visive.

È un passaggio fondamentale per mantenere in vita una pattern library. La pattern library è codice vivo, e rappresenta la single source of truth dell’aspetto visivo e interattivo del sito. Il codice, utilizzato in anteprima e in produzione, è aggiornabile senza frizioni o potenziali disallineamenti nel corso del tempo.

Divide et impera

È tipico delle startup e delle aziende orientate a prodotti full–digital un’urgenza nel rilascio di nuove funzionalità che supportino i ricavi e consolidino il brand — sia a livello di percezione, sia a livello economico–finanziario. Questo rende quasi impossibile l’adozione di un nuovo design con un rilascio cumulativo e una sostituzione integrale della piattaforma.

Per rispettare il time–to–market di Sailsquare abbiamo creato da subito le condizioni per isolare completamente il nuovo codice, realizzando i nuovi componenti e design token (icone, tipografia, spaziature, etc.) all’interno di un nuovo namespace CSS. Il codice HTML e CSS è stato scritto accoppiando l’approccio BEM (Block Element Modifier) alla piramide inversa ITCSS di Harry Roberts, ottenendo così componenti con una bassissima specificità CSS e perfettamente isolati tra loro.

A queste metodologie abbiamo affiancato una sandbox CSS, realizzata con un namespace specifico, per impedire a regole preesistenti di propagarsi ai nuovi componenti. È stato quindi possibile utilizzare i componenti della pattern library accanto ad elementi preesistenti, dando priorità a funzionalità e elementi di UX legati al rilascio delle nuove funzionalità.

Le pagine con i nuovi componenti sono state testate cross–browser utilizzando BrowserStack. La validazione dei componenti della pattern library non era infatti sufficiente tenendo conto delle condizioni “ibride” di utilizzo e della necessità di garantire che nessuno stile esistente “invadesse” i nuovi componenti.

È possibile introdurre codice moderno in ambienti legacy?

La collaborazione con Sailsquare è proseguita favorendo l’introduzione di componenti di codice moderne, mentre veniva portata avanti la fase di adeguamento dei template al nuovo design. Abbiamo scelto VueJS per incapsulare alcuni comportamenti interattivi (in particolare la ricerca e i filtri) precedentemente realizzati attraverso tecniche di manipolazione del DOM tradizionali e poco efficienti.

I componenti Vue sono renderizzati lato server (SSR) in modo simmetrico ai template e ai componenti di presentation. Le funzionalità interattive sono applicate sui browser degli utenti in progressive enhancement. Il comportamento di questo componenti segue il modello della client hydration: le pagine sono erogate dal server con tutti i componenti pre–renderizzati (e sono quindi interamente disponibili per l’indicizzazione organica da parte dei motori di ricerca). La successiva navigazione utente avviene in modalità Single Page Application, con aggiornamenti dei contenuti della pagina basati sui dati JSON ricevuti dai servizi REST del sito.

Questo approccio fornisce tutti i benefici SEO e di velocità di rendering iniziale sul browser, permettendo contemporaneamente di implementare un interazione utente più reattiva e flessibile.

I componenti VueJs sono scritti completamente in JavaScript ES6 e documentati da test unitari per la logica funzionale. Il codice è poi convertito in modo da essere compatibile con una vasta platea di browser e compilato in bundle caricati a richiesta a seconda della presenza in pagina dei relativi widget.

La progressiva rimozione di codice legacy consente un risparmio non solo in tempi di caricamento e quantità di dati scaricati, ma riduce anche il tempo di esecuzione della componente JavaScript durante la fase di parsing e compilazione.

Possiamo fare per voi quello che abbiamo fatto per Sailsquare?

Ci piace lavorare per le startup! Se dovete far crescere il vostro team frontend, affrontare progetti complessi o rinnovare l’architettura del codice in senso moderno per aumentare le prestazioni e ridurre il time–to–market, chiedeteci come possiamo aiutarvi.