Atomic Design applicato con Storybook

In un mondo dove il web è in continua evoluzione e le tecnologie cambiano drasticamente di anno in anno, c'è solo una parte nello sviluppo web che è rimasta una costante: come intendiamo le componentistiche di una web app, sito web o con quale altra nomenclatura si vuole indentificare un software che gira su architettura client/server.

Fin dal Web 1.0 è prevalsa la concezione delle pagine web, tant'è che anche i clienti ormai misurano un software a pagine: "voglio un sito che abbia 4 pagine", o ancora "aggiungiamo una pagina per contattarci", e situazioni simili.

Gli ultimi anni però stanno portando una controtendenza grazie ai nuovi frameworks JavaScript; anche se i clienti continuano a concepire il vecchio sistema a pagine, gli sviluppatori piuttosto stanno ragionando in termini di componenti.

Ad esempio, non si ragiona più in ottica di fare l'intera pagina "about us", ma si impacchetta tale pagina riutilizzando componenti già pronti: il componente titolo viene posizionato sopra di tutti, seguito dal componente paragrafo e poi dal componente bottone per aprire il form.

Tali componenti sono preparati prima e compositati in quelle che saranno poi le vere pagine, e possono quindi essere riutilizzati in altre pagine. Il vantaggio è palese, tali componenti comuni non devono essere ricreati da zero, al massimo possiamo modificare qualche attributo per adattarli al contesto, cambiare stile o logica.

Come viene divisa una pagina in singoli componenti

In quest’ottica, dobbiamo fare una distinzione importante su come viene concepito un componente, poiché avremo componenti che hanno la responsabilità di visualizzare un solo elemento e componenti che invece sono il raggruppamento di più componenti, e quindi di conseguenza visualizzano insiemi di elementi.

Stessa pagina di prima, ma con componenti raggruppati

Ed è qui che è nata l'esigenza di organizzare, catalogare e documentare per bene questi componenti, in maniera tale da averne una lista pronta all'uso e con scopi ben precisi.

Vediamo dunque cosa si intende con la teoria dell’Atomic Design e come ci può aiutare a implementarla usando un tool chiamato Storybook, che ci permette di creare velocemente un nostro design system (come MUI, Ant Design, Boostrap) che rispetti questa metodologia.

Cos'è l'Atomic Design

L’esigenza di avere un sistema a componenti nel design di una web app è soddisfatta da una proposta ben documentata da Brad Frost, un informatico e web designer statunitense, che ha descritto la metodologia atomic design prendendo in prestito alcune terminologie dalla chimica e categorizzando i componenti di una web app nei seguenti concetti:

1. Atomi
2. Molecole
3. Organismi
4. Templates
5. Pagine

Elementi dell’atomic design secondo Brad Frost

Atomo

Singola entità di una webpage che non può essere suddiviso a sua volta. Rientrano in questa categoria ad esempio i tag html come button, label, img, e altri, elementi che quindi sono lo standard in html.

Singoli “atomi” di una pagina web

Molecola

Insieme di atomi legati insieme da regole di layout specifiche al componente.

Molecole, ovvero composizione di atomi

Organismo

Combinazioni di molecole che formano una parte complessa della nostra interfaccia, ad esempio un intero form.

Templates e Pagine

I template sono molteplici organismi combinati insieme che poi saranno istanziati per formare un'intera pagina.

L'atomic design in breve

In poche parole, l’Atomic Design è una metodologia per concepire una web app o sito in componenti piuttosto che pagine, in maniera tale da avere:

• Maggior controllo sui sistemi
• Coerenza grafica tra componenti
• Allineamento di tutti i membri del team
• Isolamento della logica di un componente
• Scalabilità e Riutilizzo di un componente piuttosto che ricrearlo
• Single source of truth

Ora che abbiamo fatto distinzione tra le diversa entità di componenti, iniziamo a implementare la teoria in pratica.

Di seguito uno screen che riassume le entità utilizzando Instagram come base:

Cos'è il tool Storybook

Storybook è un tool che ci permette di esplorare i componenti da noi realizzati in completo isolamento, permettendoci di cambiare le componentistiche dei singoli elementi che per visualizzare un'anteprima di come saranno poi costruiti sul nostro progetto.

È compatibile con tutti i framework in circolazione, anche con VanillaJs volendo.

Per iniziare a usarlo, basta lanciare il comando

1npx sb init

e poi avviare il web server locale con

1npm run storybook

Si avviarà un frontend che mostrerà la seguente schermata

Siamo quindi pronti a partire alla creazione di componenti. Consigliamo di seguire la documentazione ufficiale.

Atomic Design su Storybook

Adesso abbiamo la teoria dell’Atomic Design da parte, e il tool per applicarla dall’altra. Il modello teorico dell’Atomic Design è infatti molto adatto ad essere usato da Storybook, soprattutto grazie al concetto delle “stories”.

Utilizzando un framework a componenti poi (come React, Vue, o Angular), possiamo anche usare il loro concetto di component per isolare la business logic di un componente da quella di un altro.

Ad esempio, creiamo il componente <Button />, mettendo nel folder di progetto la seguente struttura:

Una volta inizializzato Storybook, vedremo questo nel frontend del tool:

Abbiamo così il nostro atomo. Nulla ci vieta adesso di riutilizzare tale atomo per comporre un organismo o un’intera pagina template:

Stiamo quindi riusando atomi e molecole per comporre il nostro template, ma attenzione alle modifiche degli atomi: tutto è interconnesso! una modifica all’atomo bottone cambia anche la visualizzazione di tale bottone nelle molecole e templates che lo inglobano.

Questo può essere un contro, ma soprattutto un pro: ogni componente ha una sola responsabilità, renderizzare la grafica per esso e gestire la sua logica. Inoltre abbiamo il vantaggio di non dover gestire 10 bottoni diversi ma solo 1.

E nel caso volessimo un bottone con grafica diversa?

Basta esprorre gli attributi del componente per permettere al padre (o molecola) che lo ingloba nel cambiare le sue proprietà. Storybook chiama controls la maniera per cambiare gli argomenti dei component.

Clean Code con Atomic Design e Storybook

Per concludere, la teoria dell’Atomic Design fornisce una chiara metodologia per creare un design system e cambia il modo di concepire un’intera pagina web; combinando ciò con un potente tool quale Storybook, possiamo applicare tale teoria pragmaticamente.

Inoltre, ciò ci spinge indirettamente ad applicare una serie di regole del clean code come decoupling e single responsibility principle, traendone molteplici vantaggi tra le quali velocità ed efficacia dello sviluppo dei nostri progetti.

Link per approfondimenti: Atomic Web Design

Atomic Design and Storybook

Storybook Introduction