Guida ai migliori Design Pattern per lo sviluppo Front-End

Questa guida approfondisce i Design Pattern front-end conducendovi nel mondo dello sviluppo web focalizzato sulle sfide specifiche del design e dell’implementazione front end.

In questo articolo, esploreremo i principali design pattern e come essi possono migliorare l’organizzazione del codice, aumentare la manutenibilità e favorire il riuso delle soluzioni.

Preparatevi a scoprire come questi strumenti possano trasformare il vostro approccio allo sviluppo web, semplificando la creazione di interfacce utente intuitive ed efficienti.

Indice

1. Design Pattern Front–end: un'Introduzione
   1. Vantaggi dell’utilizzo dei Design Pattern
   2. Principi di Progettazione: quando usare i design pattern front–end
2. I principali pattern design strutturali per lo sviluppo front–end 
   1. Un classico: il modello MVC – Modello, Vista e Controller
   2. Il Magico mondo dei Web Components 
   3. Il Rivoluzionario Modello MVVM: Model-View-ViewModel
3. I 4 design pattern fondamentali per un’applicazione web 
   1. Singleton Pattern: un solo oggetto per comandarli tutti 
   2. Observer Pattern: manteniamoci informati
   3. Strategy Pattern: scegli il tuo percorso
   4. Il Potere del Decorator Pattern
4. Pattern Moderni per l’UI//UX
   1. Atomic Design: costruisci dal piccolo al grande
   2. Il Futuro del CSS: Styled Components
   3. Animazioni Fluenti con il Motion UI Pattern
   4. Principle: creare facilmente interfacce web
   5. Adobe After Effects: effetti grafici avanzati
   6. LottieFiles: renderizzare le animazioni
5. Conclusione

Design Pattern Front–end: un'Introduzione

Prima di addentrarci nel definire i principali pattern di sviluppo fron-tend, è necessario definire cosa sia un design pattern. Vediamo insieme cosa sono e quali vantaggi apportano ai nostri progetti.

I Design Pattern rappresentano un insieme di convenzioni o regole consolidate per affrontare problemi comuni attraverso soluzioni informatiche ripetibili. La parola chiave dei design pattern è riuso, di codice e di strutture.

L’applicazione di un design pattern implica la creazione di un software che segue le regole di struttura e sintassi del pattern (o dei pattern) scelto per l’implementazione. Ad esempio, l’utilizzo del framework Angular è un eccellente esempio di applicazione del pattern MVC (di cui parleremo più avanti), poiché il framework stesso è stato costruito seguendo le regole definite da questo pattern. 

Essendo Javascript il linguaggio chiave della programmazione front-end ed essendo un linguaggio ad oggetti, analizzeremo i principali pattern destinati alla programmazione ad oggetti. Questi, descrivono prevalentemente le relazioni tra le classi e sono definiti pattern comportamentali. I pattern architetturali invece sono quelli più ad alto livello, il cui utilizzo permette di creare sistemi molto complessi come, per l’appunto, interi framework. 

Vantaggi dell’utilizzo dei Design Pattern

Il principale vantaggio nell’utilizzo dei pattern in qualunque software è senza dubbio l’organizzazione del codice. Se applicati correttamente, i design pattern garantiscono di scrivere meno codice, di riutilizzarne quanto più possibile, mantengono alti i livelli di prestazioni e di manutenibilità nel tempo.

In ogni progetto complesso destinato a crescere nel tempo, l’implementazione dei design pattern diventa fondamentale. Regole condivise dai programmatori all’interno del gruppo di lavoro, descritte nella documentazione, per mantenere basso il livello di caos che può insorgere con l’incremento della complessità e il procedere nello sviluppo del progetto.

Esistono molti pattern comuni, condivisi dalla comunità dell’ingegneria del software, ma ciò non vieta di creare e definire degli schemi progettuali specifici per ogni progetto.

Principi di Progettazione: quando usare i design pattern front–end

Prima ancora di iniziare a scrivere una singola riga di codice, è fondamentale stabilire le regole da seguire durante lo sviluppo.

Bisogna ricordarsi che l’applicazione di un pattern comporta dei vantaggi, ma anche degli svantaggi durante lo sviluppo. Ad esempio, potrebbe sembrare eccessivo applicare pattern complessi all’inizio di un progetto con pochi componenti, poiché potrebbe rappresentare uno sforzo sproporzionato rispetto alla complessità iniziale del progetto.

Tuttavia, all’aumentare delle funzionalità da implementare, l’applicazione di un pattern di sviluppo velocizzerà gli sviluppi. Inoltre, contribuisce a mantenere basso il debito tecnico e l’insorgenza di bug o, in generale, la confusione che può emergere man mano che il progetto avanza.

I principali pattern design strutturali per lo sviluppo front–end 

Nel vasto universo dello sviluppo front-end, i design pattern front-end rappresentano le fondamenta su cui si basano applicazioni web robuste ed efficienti.

In questo capitolo, esploreremo alcuni dei pattern design front-end più cruciali, partendo dal classico Modello MVC (Modello, Vista e Controller), che ha rivoluzionato la programmazione web orientata agli oggetti. Analizzeremo anche il Model-View-ViewModel (MVVM), una variante innovativa del MVC. Inoltre, scopriremo il potere dei Singleton, dell’Observer Pattern, dello Strategy Pattern e del Decorator Pattern nel contesto dello sviluppo front-end.

Continuate a leggere per scoprire come questi design pattern possano diventare una risorsa preziosa nel vostro percorso di sviluppo.

Un classico: il modello MVC – Modello, Vista e Controller 

Partiamo con l’analizzare il grande classico, il pattern che ha rivoluzionato la programmazione web orientata ad oggetti. Per seguire il pattern MVC deve esistere una separazione netta di tre parti: 

1. M (modello): l’oggetto che contiene i dati;
2. V (vista): l’oggetto incaricato di mostrare i dati all’utente;
3. C (controller): garantisce la comunicazione modello-vista e contiene le logiche di business del programma.

Utilizzare questo pattern mette a disposizione diversi vantaggi: è possibile creare più viste differenti utilizzando lo stesso modello dati, quindi la vista e il modello sono a tutti gli effetti entità distinte e riutilizzabili. Le logiche di business sono deputate a un’unica entità, il controller, e non devono essere sparpagliate in vari file o addirittura nella vista, riducendo la possibilità di introdurre anomalie durante la programmazione. 

Ad esempio, il framework Angular segue una variante del modello MVC (il MVVM, di cui parleremo più avanti), in quanto in una struttura base di un componente abbiamo:

1. Html + Css che compongono la vista.
2. Il file component.ts equivale al controller, che si occupa di gestire i dati che provengono dal servizio e applicare su di essi le logiche necessarie.
3. Il modello è un insieme dei file service.ts e model.ts, in quest’ultimo sono definite le interfacce dei dati e i dati effettivi sono trasportati mediante il service.ts.

Il magico mondo dei Web Components 

Sotto il cappello del termine “Web Components” risiedono suite di tecnologie che consentono di creare elementi web personalizzati riutilizzabili, le cui funzionalità sono incapsulate dal resto del codice: la loro autonomia permette potenzialmente di utilizzarli in qualsiasi applicativo web. 

Non è una tecnologia nuova; infatti si inizia a parlarne nel 2011, quasi un’era geologica fa in informatica, ma vengono standardizzati negli anni successivi ed esistono diverse tecniche di implementazione:

1. Custom Element: permette di riservare una porzione di html definita da un <tag> in cui verrà renderizzato il componente. 
2. Shadow DOM: replica il DOM (Document Object Model) della pagina web ma solo all’interno di un componente, permettendo di gestire di fatto due DOM completamente separati all’interno della stessa pagina web. 
3. HTML Template: si comporta a tutti gli effetti come un framework, ovvero renderizza porzioni di pagina all’interno di tag specifici ma senza influire e senza essere influenzato dalla pagina in cui si trova.

Angular Elements è un pacchetto del framework Angular che permette di creare ed esporre dei web component, che possono essere utilizzati in qualunque pagina web che esegua del Javascript senza che sia necessario importare l’intero framework per farli funzionare. 

Il Rivoluzionario Modello MVVM: Model-View-ViewModel 

Una variante del modello classico MVC è il Model-View-ViewModel.  

In questo pattern strutturale si intende dare un ruolo più importante alla vista, includendo in essa validazioni, data-binding e altre logiche che solitamente sarebbero deputate al controller. 

Questo pattern è costitutio solamente due entità:

1. View: non solo mostra i dati all’utente, ma in essa possono essere inserite logiche, che a discrezione delle decisioni di sviluppo, possono includere cicli logici, validazioni, operazioni e soprattutto data-binding.
2. ViewModel: è l’equivalente del controller e ingloba le funzioni del Model, in pratica ottiene e persiste i dati, ma può contenere logiche come un controller. 

Come già citato in precedenza, un esempio di grande successo di questo pattern è senza dubbio il framework di Google, Angular. Framework che potete approfondire in questo articolo, dove Vincenzo ci introduce alle principali differenze rispetto alla libreria React.

I 4 design pattern fondamentali per un’applicazione web 

Singleton Pattern: un solo oggetto per comandarli tutti 

Il Singleton è uno dei pattern fondamentali per lo sviluppo di qualsiasi applicativo. Per applicare questo pattern, bisogna assicurarsi che esista una singola istanza di una classe prima di crearne una nuova.

Naturalmente, esistono casi in cui è fondamentale creare una nuova istanza di un oggetto. Immaginiamo il caso della creazione di nuovi utenti in un database: quando si prevede un’iscrizione a un servizio da parte di un nuovo utente, ogni utente deve avere la propria “istanza” separata dagli altri, in modo da non mescolare informazioni di utenti diversi.

Invece, nel caso in cui si stia creando un servizio che debba fornire informazioni comuni e condivise con altre classi, questo servizio dev’essere generato come singleton.

Per farlo, è sufficiente verificare che non esista già un’istanza dell’oggetto avviata nell’applicativo ad ogni nuova richiesta: se esiste, bisogna ritornare l’istanza già in esecuzione, mentre se non esiste bisogna crearla.

Un esempio di Singleton largamente utilizzato negli applicativi web è il logger. Il logger è un utile strumento per i programmatori che permette di restituire messaggi su cosa sta accadendo nel codice durante l’esecuzione.

Nel logger sono contenute logiche comuni che non possono essere replicate o reinstanziate ogni volta che viene fatta una richiesta di log dall’applicativo, pertanto il servizio di log dev’essere generato come entità unica, richiamabile da qualunque parte dell’applicazione.

Questo è un ottimo esempio di singleton in azione, soprattutto se si sta utilizzando qualche strumento di tracciamento degli errori: non bisogna preoccuparsi di perdere i log generati in diverse istanze, visto che ne esiste una sola.

Observer Pattern: manteniamoci informati 

Il pattern Observer è il classico esempio di pattern che, più lo studi e meno lo capisci. E’ un principio di programmazione utilizzato in qualunque sistema di gestione ad eventi. 

In questo pattern, un oggetto, chiamato osservatore, si registra su un soggetto, definito appunto “subject”. Quando questi oggetti modificano il loro stato, l’osservatore emette un evento.

Per fare un confronto con il pattern MVC, il modello è il soggetto, mentre la vista è l’osservatore. Quando il modello cambia, la vista lo rileva ed emette un evento, che in questo caso rappresenta una modifica dei dati visualizzati. 

L’Observer permette di creare una relazione uno-a-molti tra il soggetto e i suoi osservatori. Alcuni esempi di Observer includono l’invio di notifiche agli utenti, come email o newsletter, oppure le notifiche delle app.

Strategy Pattern: scegli il tuo percorso 

Il pattern Strategy è utile quando si hanno diverse implementazioni di una funzionalità. In questo modo, si delega il contenimento delle diverse logiche a una classe, attraverso la quale il client può scegliere quale implementazione utilizzare, rimanendo indipendente dalla logica stessa.

È fondamentalmente un’interfaccia che semplifica le logiche del client. Per questo motivo, viene definito “strategia”, poiché a seconda delle condizioni specificate nel client, si seleziona la strategia migliore.

Generalizzando e centralizzando le logiche che il client può utilizzare, non è necessario ripeterle ogni volta, e la classe derivata rimane scollegata dall’interfaccia.

Il Potere del Decorator Pattern 

Spesso si presenta la necessità di aggiungere metadati, metodi, proprietà o parametri a una classe, senza che questi si propaghino per ereditarietà alle sottoclassi ad essa correlate.

In questo caso viene in aiuto il pattern Decorator, con il suo immenso potere. I decoratori ormai sono supportati dalla maggior parte dei linguaggi ad oggetti e assumono forme diverse, ma il concetto è invariato: una parolina magica solitamente preceduta da “@”, che descrive al compilatore quali proprietà dovranno essere aggiunte ad una specifica classe o oggetto, senza interferire con altro. 

In Angular, ad esempio, si decora una classe con “@Component”, per indicare che quella classe sarà di tipo “componente” quindi conterrà un costruttore, dei metodi facoltativi come “ngOnInit()” per eseguire azioni alla creazione della classe, o “template” per indicare che il componente dovrà renderizzare qualcosa all’interno di un tag HTML.

Nulla vieta di creare dei decoratori personalizzati, con proprietà e metodi custom, che potranno essere inseriti in una classe per donarle dei comportamenti specifici in modo univoco. 

Pattern Moderni per l’UI//UX 

Nel sempre evolutivo mondo del design front-end, l’attenzione all’esperienza utente (UI/UX) e l’adozione di pattern moderni rappresentano un pilastro fondamentale per la creazione di interfacce coinvolgenti e funzionali. In questo capitolo, esploreremo alcune delle metodologie e degli approcci più innovativi per la progettazione e lo sviluppo di interfacce utente all’avanguardia.

I pattern trattati in questa seconda parte dell’articolo includono, l’Atomic Design, che ci guida nella costruzione di interfacce partendo da componenti atomici, Styled Components, una libreria che integra il CSS direttamente nel codice JavaScript, e il Motion UI Pattern, che mette l’accento sull’animazione e il movimento per migliorare l’esperienza utente. Ma vediamo meglio nel dettaglio.

Atomic Design: costruisci dal piccolo al grande 

L’Atomic Design non è un vero e proprio pattern definito nel grande manuale “Design Patterns” della Gang dei Quattro (Gamma, Helm, Johnson, Vlissides), ma è una versione moderna del pattern strutturale “Composite”. La sua utilità sta nel costruire interfacce o elementi composti da piccoli componenti, come fossero atomi che compongono un sistema complesso. 

In questo scenario, un bottone e un’icona personalizzati non vengono ripetuti continuamente ma diventano dei componenti che vengono riutilizzati in moltissime parti dell’applicazione. 

Questi piccoli componenti compongono per l’appunto un sistema complesso e dinamico come una pagina web moderna, sono il più possibile agnostici rispetto quello che hanno intorno e una volta definite le loro logiche queste possono essere richiamate in qualunque parte dell’applicazione. 

Nell’atomic design vengono definite sinteticamente 5 fasi: 

1. atomo: il singolo bottone, input, o elemento della pagina. 
2. Molecola: da solo il bottone non serve a nulla, se inserito in un form, ad esempio, acquisisce uno scopo e forma una molecola. 
3. Organismo: le molecole unite insieme formano un organismo complesso, un’analogia che in informatica può avere come esempio un header di una pagina web, dove può coesistere il bottone di login, una barra di ricerca, il logo del sito, e così via. 
4. Template: in questa fase gli organismi vengono messi insieme nella pagina per creare qualcosa di più complesso, ovvero il layout. 
5. Pagina: l’insieme di vari template compone infine ciò che l’utente vede nel complesso, ovvero una pagina. Ogni pagina può avere differenti template, a seconda di come è definito il loro layout.

I vantaggi di questo metodo di lavoro sono evidenti: riutilizzo di codice, focus sull’usabilità e creazione di piccole parti con bassa complessità.

Il Futuro del CSS: Styled Components

Styled-components è un plugin di React.js che permette di fare una cosa curiosa: scrivere CSS direttamente in Javascript, senza l’utilizzo di un file CSS vero e proprio. 

Perché questa complicazione, direte voi? 

Ci sono alcuni vantaggi nell’utilizzo di questo metodo, vediamoli insieme: 

1. Libertà di creare componenti custom che comprendono il CSS al loro interno: grazie a questa libreria, è possibile creare dei componenti React che contengono già il loro stile. 
2. Non bisogna più preoccuparsi di collisioni tra nomi di classi e attributi: Questo perché la libreria si occupa, in fase di runtime, di sostituire i nomi delle classi con nomi univoci, senza che sia lo sviluppatore a doversi preoccupare di nominare le classi. 
3. Supporto nativo dei temi: la libreria permette di creare dei tag <ThemeProvider> che semplificano la creazione di diversi temi: creiamo un tema, wrappiamo qualunque componente con quel tema, o anche l’intera applicazione, e la libreria si occuperà di trasferire il CSS ai componenti wrappati. 
4. Permette di scrivere condizioni all’interno del CSS in modo comodo e controllato: una delle cose più frustranti nello scrivere stili CSS sono le condizioni: gli stili CSS sono statici, non possono regolarsi in base a condizioni dinamiche. Gli styled-components permettono di creare delle condizioni if-else all’interno del CSS stesso, donando dinamicità alla grafica a seconda delle necessità. 

Animazioni Fluenti con il Motion UI Pattern

Il Motion UI Pattern è una nuova tendenza del design che riguarda gli elementi in movimento nelle applicazioni web e mobile. Sempre con uno sguardo alla dinamicità, il motion UI si focalizza sul creare degli elementi che si muovano in accordo con la loro funzione. 

Ad esempio, cliccare un bottone che elimina un elemento dalla pagina, come eliminare un prodotto da un carrello virtuale, non dovrebbe provocare una sparizione dell’elemento immediata, ma, secondo il Motion UI Pattern, dovrebbe provocare una sparizione graduale, magari con un background rosso. In questo modo l’utente può avere concezione di ciò che sta accadendo anche solo dall’interazione che ha avuto con l’elemento. 

Una barra di caricamento, un fading passando da una pagina all’altra, un pulsante play che lampeggia quando viene premuto per ascoltare una canzone, sono tutti esempi di design del movimento, votati alla chiarezza e alla comprensione dell’interazione. 

Per applicare questo design ci sono svariate tecniche da applicare, soprattutto riguardo agli stili CSS, che rendono animate le interfacce utente. 

Le animazioni sono state introdotte con l’avvento di CSS3. La proprietà del CSS regina di queste animazioni è senza dubbio transition: questa permette di cambiare il valore di una proprietà in modo graduale, con una durata prestabilita. 

Ecco quindi che possiamo variare la grandezza di un elemento con la proprietà width durante l’evento di hover, e una specifica durata di transizione. 

Naturalmente esistono moltissimi tool che rendono la creazione di animazioni molto più semplice della scrittura manuale di codice CSS, di cui vediamo qualche esempio a seguire. 

Principle: creare facilmente interfacce web

Principle è un software per Mac che permette di creare facilmente interfacce mobile e web, aggiungendo animazioni e interazioni tramite prototipi predefiniti. Si compone di una lavagna di base, definita canvas, dove trascinare elementi che possono essere stilizzati senza scrivere una riga di codice. 

Un altro grande vantaggio di questo software è la semplicità con cui è possibile importare dati da altri software di progettazione, come Sketch e Figma.

Adobe After Effects: effetti grafici avanzati

Adobe After Effects è il famosissimo software di video editing di Adobe, disponibile anche per Windows, controparte di Adobe Premiere per il montaggio video, è sempre stato lo strumento di animazione più utilizzato. Essendo uno strumento più complesso di Principle, più orientato alla creazione di effetti grafici avanzati, sta emergendo anche come uno strumento essenziale per l’animazione delle interfacce web e mobile. 

Uno dei motivi principali della popolarità di questo software tra i motion designer è il plug-in Bodymovin, che consente l’esportazione di codice utilizzabile in ambito web, rendendo più semplice per gli sviluppatori l’implementazione delle animazioni.

LottieFiles: renderizzare le animazioni

Utilizzare le animazioni generate da tool grafici nelle applicazioni o nei siti Web è sempre stato molto complesso. Problemi relativi alle GIF, alle enormi quantità di codice e un utilizzo eccessivo dello spazio di memoria rendevano l’esperienza utente lenta e l’implementazione per lo sviluppatore dolorosa. 

In questo scenario, è disponibile la libreria Lottie che permette di renderizzare in modo semplice le animazioni esportate da After Effects tramite il plugin Bodymovin, nelle applicazioni web e mobile. 

LottieFiels funziona mediante file JSON di piccole dimensioni, che possono essere importati in uno specifico player proprietario all’interno di una pagina web. 

E’ da segnalare che la community di Lottie è in costante crescita e vengono costantemente messe a disposizione gratuitamente nuove animazioni, sia sotto forma di file JSON che sotto forma di GIF o brevi video. 

Conclusione

In conclusione, i design pattern front end rappresentano un prezioso strumento per gli sviluppatori web, consentendo loro di affrontare con successo le sfide che si presentano nella progettazione e implementazione di interfacce utente moderne. Attraverso l’analisi dei principali design pattern, abbiamo scoperto come l’applicazione di regole strutturate e sintassi coerenti possa contribuire a migliorare l’organizzazione del codice e la manutenibilità nel tempo.

Ricordate sempre di scegliere il design pattern più adatto al vostro progetto, tenendo conto delle esigenze specifiche e delle sfide che dovrete affrontare.

Continuate a esplorare le diverse possibilità offerte dai design pattern front-end e rimanete aggiornati sulle ultime tendenze nel mondo dello sviluppo web sul nostro blog! Inizia ad approfondire i framework futuri di JS.