Introduzione ai moduli e allo sviluppo front-end modulare

Tutti conoscono e amano i mattoncini Lego. Ero affascinato dai Lego da bambino e li amo ancora oggi. Puoi assemblare il tuo giocattolo da tutti i tipi di Lego in tutti i modi, un pezzo alla volta. Puoi quindi ricominciare da capo e costruire un giocattolo diverso da quegli stessi pezzi. Le possibilità sono infinite.

I moduli su un sito Web sono molto simili ai Lego. Pensa ai moduli come a pezzi Lego che ti consentono di costruire il tuo sito web. Quando li colleghi insieme nel modo giusto, formano pagine web. Per creare siti Web come i Lego, devi pensare ai siti Web come a una raccolta di moduli indipendenti. Questo articolo ti aiuterà a fare proprio questo con lo sviluppo e il design del front-end.

Modulo Collage

Quando entro nella fase di progettazione di un progetto, tendo a dare il via alle cose assemblando collage di ispirazione di design e collage di moduli. È un processo molto simile a quello di Dan Mall, che chiama questi collage design deliverable per un'era post-competizione. I collage di ispirazione sono raccolte di schermate che presento al cliente, solo per avere un'idea generale della direzione visiva in cui ci stiamo dirigendo. Sono semplicemente schermate di siti Web che piacciono a me e al cliente.

Una volta che avremo la conferma che siamo sulla stessa pagina in termini di stile, posso entrare nel mio editor grafico (preferisco Sketch) e creare collage di moduli. Questi collage sono raccolte dei moduli più comunemente utilizzati: pulsanti, moduli, intestazioni, paragrafi, elenchi, immagini e così via. I collage dei moduli mi consentono di creare rapidamente pezzi di come apparirà e si sentirà il sito web.

Ecco una parte di un mio recente modulo collage, un esempio di un pulsante che ho disegnato in Sketch all'inizio di un progetto:

Forse ti starai chiedendo quando entrano in gioco le composizioni statiche e la presentazione di design pixel perfetti al cliente. Non lo fanno: li sto saltando quasi completamente nel mio processo. Saltare quella parte del processo mi consente di entrare nel codice molto presto nel progetto e nei prototipi di codice (ci arriverò presto), o in altre parole, progettare nel browser. Ecco alcuni dei vantaggi della progettazione nel browser:

• Il browser è l'ambiente naturale per un sito Web e attenersi alle idee create in un editor grafico può ritorcersi contro. È naturale testare e prendere decisioni di progettazione nei browser. L'hai già sentito, lo sentirai di nuovo: non si tratta di come appare, ma di come funziona.

• Ci saranno sempre incongruenze di progettazione tra le simulazioni statiche e ciò che si ottiene nel browser una volta tradotte in codice. Per evitare queste incongruenze, passa all'editor di codice e al browser per risolvere veri problemi di progettazione.

• Le composizioni statiche potrebbero non trasmettere il messaggio giusto. L'aspetto grafico sarà molto diverso una volta integrata l'interattività, come gli stati al passaggio del mouse, le transizioni e le animazioni.

• Invece di passare ore e ore a progettare diversi modelli statici per diverse risoluzioni, posso risparmiare molto tempo entrando presto nel codice. La modifica del CSS mi consente di dimostrare rapidamente le modifiche e l'aspetto reattivo al client su vari dispositivi: smartphone, tablet, ecc.

Quindi, risparmia tempo e apri il tuo editor di codice e il browser per iniziare a creare l'UX il prima possibile. Secondo la mia esperienza, la maggior parte dei clienti chiederà un mockup completo di una o due pagine prima di poter procedere con la codifica, e questo va benissimo. È importante che il cliente abbia un buon senso del design futuro. Di solito uso InVision, che è un ottimo strumento per tenere traccia dei primi modelli, delle modifiche, dei commenti e altro ancora. Tuttavia, è molto importante che i clienti capiscano che Sketch e InVision non li porteranno molto lontano.

Costruire i moduli per lo sviluppo front-end

Una volta che il cliente è soddisfatto del collage del modulo e dei modelli che ho progettato, posso iniziare a codificare e definire l'aspetto reale di quegli elementi.

Il design modulare è intrecciato con lo sviluppo modulare in un processo iterativo. Codifico un modulo, quindi lo provo nel browser per vedere come funziona, quindi ripeti se necessario. Ancora una volta, questo processo è molto simile alla costruzione dei Lego: in pratica progetti e sviluppi allo stesso tempo e provi diverse varianti finché non ti senti bene.

Spesso inizio lo sviluppo dei moduli costruendo qualcosa di semplice, come un pulsante. Immagina di costruirne uno tu stesso e di dover codificare un pulsante arancione, generalmente utilizzato per un modulo di contatto. Ecco cosa potresti inventare:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Abbastanza semplice, giusto? Applicheresti la classe .submit-button al tuo HTML e questo risolverebbe il tuo problema attuale. Ora, cosa accadrebbe quando devi creare un nuovo pulsante, proprio come quello, ma con un colore di sfondo blu? Probabilmente copieresti quella classe esatta, quindi cambieresti il ​​nome della classe e il colore di sfondo. Veloce e sporco. Ora, immagina di dover utilizzare lo stesso pulsante, ma con uno sfondo arancione. Puoi vedere dove sta andando: potresti finire con molti CSS ripetuti. Su un progetto super piccolo, questo potrebbe non diventare un vero problema, ma su quelli più grandi probabilmente lo sarà. Prima che tu te ne accorga, il tuo CSS diventa gonfio e difficile da mantenere.

Se hai mai sviluppato un progetto su scala medio-grande, senza dubbio hai sperimentato la tua giusta dose di mal di testa. Questi potrebbero essere stati causati da uno dei seguenti motivi:

• Codice disordinato, incoerente, difficile da scansionare e comprendere.
• Codice gonfio e file CSS XXL con molte duplicazioni.
• Codice difficile da mantenere.
• La mancanza di separazione di struttura e pelle.

Non preoccuparti, non sei solo. Scommetto che tutti gli sviluppatori front-end hanno sperimentato questi dolorosi problemi di tanto in tanto, e probabilmente molti altri. Posso tranquillamente dire di aver avuto molti progetti in passato in cui ho riscontrato tutti quei problemi tipici.

Un modo per evitare o minimizzare questi problemi è costruire in modo modulare.

Il pulsante modulare

Come codificare quel pulsante in modo modulare? Un approccio modulare sarebbe quello di scrivere codice che puoi riutilizzare. Ricorda quei Lego, che possono essere usati e riutilizzati di nuovo.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Quello che abbiamo fatto è un'intelligente separazione degli stili. La classe .button contiene gli stili utilizzati da ogni pulsante del tuo progetto, quindi non devi ripeterlo. La classe .button-orange utilizza solo gli stili rilevanti per il pulsante arancione. Faresti lo stesso per tutti gli altri pulsanti e definiresti i loro colori di sfondo e testo.

Il tuo modulo pulsanti potrebbe finire per essere costituito da più pulsanti indipendenti, pronti per essere utilizzati ogni volta che ne hai bisogno.

E per le cose più complesse?

Segui gli stessi principi per ogni altro componente di cui potresti aver bisogno. L'obiettivo è creare moduli che siano elementi autonomi, indipendenti da altri moduli. Se combinati, questi moduli formeranno modelli, in cui riutilizzerai semplicemente i moduli secondo necessità e lavorerai per completare il tuo progetto.

Per ulteriori letture sullo sviluppo del front-end modulare, consiglio vivamente SMACSS, che è l'architettura che tendo a utilizzare su tutti i miei progetti, grandi o piccoli che siano.

Ricorda, il processo modulare riguarda la creazione, il test e l'iterazione. Un modulo viene prima prodotto nel tuo editor, quindi testato in un browser, quindi ripetuto se necessario. Ripeti quel ciclo ogni volta che è necessario.

Coinvolgere il Cliente

Non dimenticare le esigenze del cliente: vogliono essere tenuti al passo e ottenere la conferma che stanno ottenendo i loro soldi. La bellezza di questo processo di sviluppo è che i clienti possono essere membri attivi del tuo team. Puoi mostrare loro in sicurezza i moduli e loro possono trascurare il processo di sviluppo e partecipare in ogni momento per migliorare il prodotto. Non devono aspettare il completamento di una composizione statica o il raggiungimento di un traguardo prima di vedere i progressi reali. Se ti dedichi del tempo per spiegare il modo in cui i moduli funzionano ai tuoi clienti, avranno una migliore comprensione e apprezzamento del processo di progettazione e del tempo impiegato per realizzarli.

Il modo in cui di solito presenta i moduli a un client è molto simile a Bootstrap: impostare un modulo isolato insieme al relativo codice è un ottimo modo per coinvolgere tutti i progettisti, gli sviluppatori e i clienti nel processo.

Usa i moduli che hai costruito come elementi costitutivi per le pagine. Per la tua pagina indice, potresti mettere il modulo di navigazione in alto, un modulo eroe accanto, alcuni dei moduli di contenuto accanto, quindi il tuo piè di pagina in basso. Prima che tu te ne accorga, hai già una pagina per un prototipo HTML. Ma cos'è esattamente un prototipo? Ho sempre amato la definizione di prototipo di Leah Buley dal suo fantastico libro The User Experience Team of One:

Esempi funzionanti o semi-funzionanti di come il progetto dovrebbe comportarsi e funzionare una volta implementato.

Costruendo un prototipo, questo è esattamente ciò che otterrai nella fase iniziale del progetto: un sito Web semi-funzionante. Laddove i modelli statici e InVision non sono all'altezza, i prototipi HTML eccellono. Il prototipo funge da perfetto prodotto reattivo per i tuoi clienti. E una volta che il cliente è d'accordo con l'aspetto e la sensazione del tuo prototipo, tutto ciò che devi fare è lucidarlo finché non funziona nel modo necessario. Costruisci, testa, itera.

Riutilizza gli elementi costitutivi

Moduli e prototipi ti permetteranno di riutilizzare il codice per il progetto attuale, ma anche per quelli futuri. Modificare un modulo del tuo ultimo progetto può farti risparmiare molto tempo: i moduli di cui hai bisogno in ogni progetto sono spesso simili. Ho una grande libreria di moduli che riutilizzo spesso: schede, menu di navigazione, pulsanti, breadcrumb, moduli, tabelle, impaginazione, elenchi, ecc. Anche se il codice di quei moduli non è esattamente lo stesso in tutti i progetti, buona parte di esso può essere riutilizzato, risparmiandomi molto tempo di sviluppo. Il mio consiglio per te è di creare moduli riutilizzabili anche per te. Dai un'occhiata a BASSCSS, Pure e Refills per trarre ispirazione.

Non scoraggiarti se il passaggio alla progettazione e allo sviluppo modulari richiede tempo. Naturalmente, se i principi modulari sono nuovi per te, richiederanno una modifica del tuo processo di progettazione e sviluppo, ma il cambiamento potrebbe rivelarsi utile.

I metodi e le tecniche modulari che ho trattato in questo articolo stanno solo scalfindo la superficie. Tuttavia, spero sinceramente che questo articolo sia stato utile e che ti abbia incuriosito ad approfondire la progettazione e lo sviluppo modulare.