interfaccia component driven
Estephany Palomino

I Benefici di un’interfaccia component driven

Per semplificare la progettazione e sviluppo di un'interfaccia utente ci si può avvalere della creazione di componenti. Vediamo cosa sono e come si implementano.

Indice

Durante la progettazione e lo sviluppo di un’interfaccia utente, per organizzare al meglio il nostro lavoro, smontiamo quello che abbiamo in mente in tanti piccoli pezzi. Questi pezzi poi verranno combinati e assemblati all’interno delle varie schermate.

Questi pezzi hanno un nome più professionale ed è componente. In questo articolo introdurremo quindi il concetto di component driven, spiegando come quest’approccio semplifica notevolmente la realizzazione delle interfacce web.

Prima però, cerchiamo di approfondire un attimo questi componenti. Sono un termine che se parli con qualche tecnico sentirai molto spesso, sono l’ennesimo termine che viene usato quando non si vuole spiegare esattamente a cosa si sta lavorando (vedi algoritmo)? O è qualcosa di più? Scopriamolo.

Cosa sono i componenti?

Sono elementi intercambiabili e standardizzati delle interfacce utente, i quali possiedono:

  •  API specifiche
  • stati predefiniti
  • aspetto e funzioni che possono essere smontate, modificate e riutilizzate per creare interfacce utente sempre diverse e con funzionalità nuove.

Il concetto di Component Driven venne introdotto nel 2017 dall’ingegnere Tom Coleman, dove descrive il passaggio ad architetture e processi basati su componenti. L’idea di un’interfaccia utente modulare ha molti parallelismi nei movimenti software come i microservizi e la containerizzazione.

Come si diventa component driven?

Nella pratica, come funziona? Per adottare una “visione” component driven si seguono le seguenti fasi:

  • Realizzazione di un componente alla volta: in questa fase definiamo i suoi stati e il suo aspetto. Pensa ad esempio ad un bottone, ad un input o all’immagine profilo.
  • Combinazione  dei componenti: mettiamo insieme i componenti per poter creare nuove funzionalità e componenti più complessi. Qui per fare un esempio puoi pensare ad un form, una tabella o una lista.
  • Assemblaggio delle pagine: ora non ci resta che combinare i componenti composti che abbiamo precedentemente creato e inserirli all’interno delle varie pagine. Qui è sempre consigliato mettere sotto stress i componenti con dati fittizi per simulare casi limite o che difficilmente possono verificarsi.
  • Integrazione delle pagine nel progetto: quest’ultima fase prevede la connessione delle pagine create al backend e alle logiche di business.

Fin qui tutto ok, ma quali sono i benefici di un’interfaccia component driven?

Benefici di un approccio component driven

Sono tanti i benefici che possiamo trarre dalla creazione dei componenti, eccone alcuni:

  • Qualità: ci permette di verificare e controllare che ogni interfaccia utente creata funzioni correttamente in scenari differenti.
  • Affidabilità: testando i vari componenti è meno faticoso trovare bug e gli interventi saranno molto più precisi e localizzati.
  • Velocità: diventa più semplice realizzare interfacce utente, questo grazie al fatto che i componenti possono essere riutilizzati, prendendoli da una libreria o design system.
  • Efficienza: parallelizza lo sviluppo e la progettazione e ci permette di condividere il carico di lavoro tra i vari membri del team.

Quando si tratta di realizzare interfacce utente, in Web Tea andiamo sul sicuro con un approccio component driven.

Vuoi altri contenuti così, ma nella tua inbox?