17-05-2022 - Frontend

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.

 

singoli componenti di una pagina web.png

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.

 

componenti raggruppati di un sito web.png

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 atomic design di Brad Frost.png

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.png

Singoli “atomi” di una pagina web

 

Molecola

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

 

molecole di una pagina web.png

Molecole, ovvero composizione di atomi

 

Organismo

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

 

organismo di una pagina web.png

 

Templates e Pagine

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

 

templates e pagine.png

 

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:

 

esempio di atomic design.png

 

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

 

storybook.png

 

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:

 

componente button.png

 

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

 

storybook frontend.png

 

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

  intera pagina web con storybook.png

 

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

Autore

Rosario Terranova

Programmatore a tutto tondo, ha avuto esperienza dal mondo dello sviluppo di applicazioni 3D (videogames, virtual reality e augmented reality) al mondo dello sviluppo per il web.

Appassionato di tecnologia e informatica, dopo gli studi ha fatto molteplici esperienze internazionali per poi tornare nella sua amata Sicilia. Lavora principalmente con JavaScript/TypeScript, React.js/Next.js e Node.js lato web, Unity/C#, Unreal Engine e Three.js lato 3D.

Ha a cuore la condivisione delle skills e delle conoscenze, e gli piace dare una mano concreta nelle community.

.Devmy su twitter.Devmy su linkedin.Devmy su link

Contattaci

Vuoi sviluppare un progetto con noi?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.