Migliorare la vita del team con una libreria di componenti
Nuovo progetto, nuova vita.
A volte ci ritroviamo ad iniziare un nuovo progetto software e dobbiamo riiniziare da capo, dalla progettazione allo sviluppo, e intanto in testa ci frullano domande del tipo “Ehi, questa cosa l’ho già fatta! Questo componente di UI l’ho già utilizzato…ma dove?”.
Perché allora non creare un unico punto condiviso dove poter recuperare, versionare e testare i propri componenti?
Di recente Christian De Simone, e il team nel quale lavora, sono stati alle prese con un nuovo progetto per il quale si dovevano utilizzare componenti, già pronti, per una nuova applicazione da avviare.
“Perché non rendere disponibile a tutti questo set di componenti, estraendoli dal loro contesto?” Si sono così imbarcati nello sviluppo di una libreria di componenti.
In questo articolo vi parlerò del perché sia utile adottare una libreria di componenti (riprendendo alcuni dei principi del Manifesto Agile), quali vantaggi porta per tutto il team, e quali sono alcuni strumenti utili per creare queste librerie e quindi migliorare la comunicazione nel team. Il tutto prendendo spunto dal talk “Migliorare la comunicazione tra Dev e PO attraverso una libreria di componenti” presentato da Christian ad un meetup online organizzato da Agile Reloaded.
Buona lettura.
Perché è utile utilizzare una libreria di componenti?
Torniamo per un attimo bambini e pensiamo ai Lego
Per spiegare cosa si intende per una libreria di componenti ricorro ad una metafora, quella dei mattoncini Lego che da piccoli (e magari ancora oggi per noi o per i nostri figli e figlie) usiamo e teniamo in un enorme scatolone. Ogni volta che ci vogliamo giocare, non sappiamo come usarli o cosa costruirci, ma sappiamo di poterci creare qualcosa di fantastico. Abbiamo la certezza che se utilizzati bene, i nostri Lego possono aiutarci a creare fantastiche costruzioni.
Allo stesso modo, una libreria di componenti ci permette di non dover reinventare ogni volta la forma dei nostri mattoncini, il numero di bottoni che deve avere sopra, o la dimensione della nostra piastra. Abbiamo degli elementi già pronti da tirar fuori ed essere utilizzati.
Alcuni vantaggi dell’approccio a componenti
Per chi, come Christian e noi di Intré, lavora seguendo i principi e le pratiche Agili, adottare una libreria di componenti porta diversi vantaggi. Di seguito vediamo quali principi del Manifesto Agile vengono presi in considerazione.
La continua attenzione all’eccellenza tecnica e alla buona progettazione esaltano l’agilità
Grazie ad una libreria di componenti comuni è possibile far sì che tutti i team di sviluppo facciano riferimento ad un unico punto centralizzato dal quale recuperare gli elementi che compongono il front-end delle applicazioni. Infatti le librerie di componenti si pongono come principale obbiettivo quello di standardizzare i componenti, facendo sì che a livello UI le applicazioni appaiano con un unico stile. Ogni sviluppatore avrà quindi l’obiettivo di creare una suite quanto più flessibile e riutilizzabile, composta da componenti che dovranno essere più semplici possibile e potranno essere agevolmente riutilizzati in diverse applicazioni.
Si arriva così al prossimo principio Agile.
La semplicità – l’arte di massimizzare la quantità di lavoro non svolto – è essenziale
Riutilizzare componenti minimizza la quantità di codice che devo manutenere e creare oggi, o in altre parole minimizza il numero di possibili bug. Più codice richiede più manutenzione, che porta a più riunioni per capire dove e come intervenire…insomma, un aumento di costi e un conseguente rallentamento dello sviluppo.
Un altro vantaggio è legato agli aggiornamenti semplificati, perché seguendo con questo approccio si aggiornerebbero elementi singoli della mia UI, non tutti ogni volta.
Una libreria di componenti diventerà nel tempo sempre più ben organizzata e porterà ad avere una documentazione dettagliata e chiara. Si avrà la possibilità di mischiare e riutilizzare componenti già esistenti piuttosto che ricrearne di nuovi ogni volta. Questo chiaramente aumenterà la velocità dello sviluppo.
Componenti che peraltro sono funzionanti perché già testati ed usati, dopotutto…
Il software funzionante è il principale metro di misura di progresso.
Sapere che un determinato componente funziona, appena sviluppato, è semplice.
Ma come possiamo mantenere questo software funzionante nel tempo?
Monitorare e testare componenti più piccoli, è più semplice. Infatti i componenti saranno facilmente testabili, sempre grazie alla loro semplicità.
Dovremo quindi sviluppare sin dall’inizio componenti il più semplici possibile, per permettere di essere usati in contesti diversi. Ciò permette di avere componenti più facili da testare e quindi un codice sorgente che nel tempo sarà più facile da manutenere e propenso a modifiche non distruttive.
Un altro vantaggio è la compatibilità, garantire la compatibilità cross-device e cross-browser è una delle maggiori sfide dello sviluppo front-end. Le librerie di componenti UI forniscono compatibilità immediata, utilizzando un’unica code base, che rende tutto più semplice.
Nella seguente galleria di immagini (dalle slide della presentazione di Christian) ripercorriamo i vantaggi di cui ho parlato.
I vantaggi per il team
Dopo aver visto alcuni dei vantaggi a livello di progetto, vediamo ora quali possono essere i vantaggi per il team nell’adottare una libreria di componenti:
- Per gli sviluppatori (come Christian)
- Nel tempo, uno standard front-end applicabile a più progetti.
- L’attività di on-boarding per ogni nuovo membro del team sarà più semplice.
- Come spiegato prima, avere una code-base standard ridurrà sicuramente i costi in termini di manutenzione.
- I tempi di sviluppo di ogni nuova applicazione saranno ridotti.
- Per i designer:
- Un set di componenti riutilizzabili e con uno stile predefinito.
- Aiuta a ridurre la frequenza di modifica degli stili, creando una consistenza grafica tra i progetti.
- Per i Product Owner:
- Avere una sorta di portale dal quale attingere per comunicare in maniera efficace con sviluppatori, designer e altri stakeholder del progetto.
- Per gli utenti:
- Avere una libreria sempre accessibile aiuta ad acquisire familiarità con ogni componente UI e quindi avere meno confusione nell’utilizzo poi del prodotto tramite l’interfaccia.
- Migliora l’esperienza di utilizzo a livello globale tra gli applicativi.
Come una libreria di componenti migliora la comunicazione
Avendo visto quali vantaggi potrebbe portare al team e al progetto una libreria di componenti, possiamo intuire quali siano i miglioramenti che vengono apportati a livello di comunicazione.
Lo ribadisco, grazie ad una libreria di componenti non ci si troverà più a discutere su cosa fare a livello di front-end e come farlo. Nel tempo diventerà più semplice e più chiaro.
Come posso due membri di diverso stampo tecnico all’interno di un team comunicare a livello efficace in queste situazioni?
Nel modo più semplice possibile, attraverso della documentazione «viva» realizzata con alcuni strumenti online quali React Styleguidist.
React Styleguidist e Storybook
Con questo strumento, accessibile via browser web, è possibile creare componenti di UI in maniera rapida, sfruttando i template forniti, e customizzarli secondo le proprie esigenze. E’ utile per i designer e sviluppatori perché si può vedere il codice sia degli stili che del componente stesso, e per PO perché possono vedere e “toccare” il componente provandolo. Capite quindi come si possa con il tempo creare una libreria “viva” e aggiornata, consultabile anche da non-tecnici.
Di seguito un’immagine che mostra l’interfaccia di Styleguidist per un Basic Button, preso dalla demo dimostrativa che potete provare a questo link.
Un altro strumento interessante, simile a Styleguidist, è Storybook.
A cosa serve questa documentazione
Tramite questo tipo di strumenti è possibile avere una documentazione che permette a chiunque di accedere ai componenti e provarli in una sorta di “sandbox”. Oltretutto ogni componente potrà essere descritto in modo da produrre una documentazione utilizzabile da chiunque (tecnici e non) ad esempio nelle User Story, semplificando quindi l’analisi e la loro complessità. Inoltre la comunicazione all’interno del team risulterà semplificata attraverso esempi ”utilizzabili” nella documentazione.
Chi ne fa uso?
Aziende importanti quali Airbnb, Shopify e Google adottano questo approccio a componenti mantenendo i seguenti rispettivi progetti:
I tre sopracitati sono tutti design system che si basano sul concetto di componenti riutilizzabili e di «guida» per l’utilizzatore.
Sviluppare una libreria di componenti da zero non è facile, ma ci si può aiutare usando strumenti online come bit.dev, che fornisce elementi di UI già pronti.
Riferimenti
Qualora voleste cimentarvi nello sviluppo della vostra libreria di componenti, Christian mette a disposizione il repo contenente una libreria base, con un componente già testato.
Di seguito altri link ad articoli utili: