Cos’è un front end?

Front end e back end sono due livelli di uno stesso software, indipendenti l’uno dall’altro, ma che si completano a vicenda. Se pensiamo a un software come se fosse un ristorante, il front end comprende la facciata esterna, l’arredamento interno, il menù e il personale di servizio. A sua volta, in questa analogia il back end corrisponderebbe alla cucina e alla gestione, completa di personale, processi di produzione e amministrazione.

Che cosa costituisce un front end?

Un front end è un’interfaccia grafica utente per l’utilizzo di un sito web o di un’app. Il front end è realizzato in base alle esigenze e alle aspettative delle persone. Per questo motivo sono importanti una presentazione accattivante delle informazioni e una struttura chiara delle interazioni. Il design di un front end punta a garantire una buona user experience (UX).

Il front end è un livello software che viene eseguito sul client. In questo modo, il front end nasconde la complessità, in quanto l’elaborazione vera e propria delle informazioni avviene sul back end. Dietro le quinte, il front end comunica con il back end per scambiarsi i dati e per rispecchiare i cambiamenti. Di norma si utilizzano interfacce di programmazione dette API.

Seguendo il principio di sviluppo “Separation of concerns”, traducibile in italiano con “separazione delle problematiche”, front end e back end vengono realizzati sotto forma di livelli indipendenti. Per garantire la piena funzionalità di un software, sono necessari sempre entrambi i livelli. Un front end senza back end è come una facciata senza nulla dietro.

Chi lavora sul front end?

In linea di massima, sul front end lavorano due gruppi di utenti del tutto diversi:

1. Utenti che lavorano con il front end.
2. Sviluppatori del front end che si occupano della costruzione e della manutenzione dei front end.

Nelle parti seguenti daremo un’occhiata agli aspetti in comune e alle differenze fra i due gruppi che lavorano con il front end.

In che modo gli utenti lavorano con il front end?

Gli utenti di un sito web navigano tramite link tra le singole pagine. Nel farlo, fanno uso dei contenuti, come testi ed elementi multimediali, e interagiscono con pulsanti e altri elementi interattivi. Tra questi elementi vi sono i noti moduli HTML con menu di selezione, campi di immissione e pulsanti.

Un concetto simile è applicato agli utenti che hanno eseguito l’accesso in un’app. Questi utenti possono eventualmente trovare possibilità di interazioni più ricche con pulsanti specializzati a loro disposizione nel front end. D’altra parte, l’entità delle interazioni si limita a pochi percorsi chiaramente definiti. Tuttavia, possono esservi più possibilità per creare i propri contenuti.

In che modo gli sviluppatori lavorano con il front end?

Gli utenti hanno notevoli limitazioni per quanto riguarda il lavoro sul front end. Diversa è la situazione per i cosiddetti sviluppatori del front end. Questi professionisti della programmazione sono responsabili della creazione, manutenzione e del perfezionamento di un front end e spesso sono assistiti dai designer. In fondo, la facilità d’uso nel web design è un aspetto fondamentale.

In che cosa consiste esattamente lo sviluppo del front end? Diamo un’occhiata a un esempio preso dall’ecosistema di WordPress. Gli sviluppatori del front end creano widget di WordPress e temi di WordPress che conferiscono un aspetto interessante a un sito web realizzato con questo CMS.

Per mezzo di un tema di WordPress creato dagli sviluppatori del front end i contenuti variabili delle singole pagine e dei singoli post vengono integrati in strutture definite. In questo modo si assicura la rappresentazione coerente di tutti i contenuti nel sito.

Gli sviluppatori e le sviluppatrici del front end creano pagine di destinazione e utilizzano elementi call to action (CTA) per guidare i visitatori e le visitatrici attraverso il sito. Al riguardo, è particolarmente importante il design responsive.

Quali sono i principali framework front end?

Un front end viene riprodotto sui dispositivi finali (“client”) degli utenti. In generale si distingue tra front end web per la rappresentazione nel browser e front end nativi, che sono specifici per un dato sistema operativo. I moderni metodi di sviluppo cross-platform permettono di creare più front end da una base comune.

I front end web contengono codice nei linguaggi web HTML, CSS e JavaScript. Questi ultimi corrispondono ai tre aspetti fondamentali della programmazione web:

In generale è possibile creare front end direttamente sulla base dei tre linguaggi web. Tuttavia, questo approccio non sarebbe efficiente, in quanto richiederebbe troppo lavoro superfluo. I framework front end facilitano notevolmente il lavoro.

A seconda del campo di utilizzo, i framework front end svolgono diverse funzioni. Espandono le capacità dei linguaggi web, facilitano il collegamento con il back end e assicurano la coerenza della funzionalità tra le varie versioni dei browser. Alcuni framework includono inoltre tecniche per il miglioramento delle prestazioni.

I framework più recenti, come React e Vue, puntano maggiormente sulla reattività per replicare immediatamente nel front end le modifiche apportate ai dati. Inoltre, questi framework consolidano i componenti come concetto centrale. In questo caso si tratta di unità incapsulate e riutilizzabili costituite da elementi reattivi dell’UI.

A seconda dell’approccio utilizzato, i framework front end possono essere puramente in CSS o JavaScript. In aggiunta, si distingue tra framework front end web e cross-platform.

Sviluppare front end sulla base dei componenti con framework reattivi

Con questi framework front end in JavaScript tutto gira intorno a componenti reattivi su misura. I componenti uniscono struttura, aspetto e comportamento e si adattano automaticamente ai cambiamenti nei dati alla loro base. Ad esempio, se si cancella un record di dati, la relativa voce scompare da una rappresentazione a elenco e un eventuale contatore mostra immediatamente il valore aggiornato.

I migliori rappresentanti dei framework front end reattivi sono da anni Angular e React. Entrambi sono adatti alla creazione di applicazioni a pagina singola, nonché di applicazioni più ricche di contenuti, e sono considerati alquanto complessi. Un’alternativa a questi prodotti è “Vue”, un framework front end notevolmente più snello.

Il framework Svelte rappresenta a sua volta un’interessante novità. Infatti, Svelte adotta un approccio fondamentalmente diverso rispetto a React e simili. È un compilatore, che permette di evitare la creazione di nuove strutture in JavaScript. Questo framwork consente quindi di scrivere più semplicemente il codice che verrà poi convertito dal compilatore in un più complesso codice JavaScript.

La maggior parte dei framework front end reattivi facilita inoltre il lavoro con dati globali. A tal fine si utilizza un cosiddetto “state store” grazie al quale è possibile provvedere a un incapsulamento dei dati.

Per creare il codice del front end è possibile utilizzare un processo di build separato con un task runner come Gulp o Grunt.

I framework front end mixed-concern: la vecchia guardia

Questi framework front end meno recenti erano molto apprezzati prima dell’arrivo dei framework reattivi. Bootstrap o le alternative a Bootstrap offrivano allora una standardizzazione indispensabile per rispondere alle differenze tra i browser e disponevano di una vasta scelta di componenti predefiniti già integrati. Tali elementi comprendevano ad esempio menu di navigazione gerarchici, accordion con campi collassabili e cursori con immagini animate.

Questi framework condividevano il fatto di includere sia il codice JavaScript sia il codice CSS. Il compatto framework UI ZURB Foundation puntava invece piuttosto sulla capacità di adattamento per applicazioni professionali. “jQuery UI” ha poi introdotto un approccio minimalista nella combinazione con l’apprezzato framework JavaScript.

Il vantaggio di questi framework front end è la loro estrema facilità di utilizzo. Nella maggior parte dei casi è sufficiente integrare un file CSS e/o JavaScript. La situazione cambia e si complica rapidamente se si desidera effettuare adattamenti e ottimizzazioni. Anche la combinazione di parti di questi framework è per esperienza piuttosto problematica.

I framework front end single-concern: gli specialisti agili

A differenza dei framework front end mixed-concern, che combinano JavaScript e CSS, i framework front end single-concern si limitano a uno solo di questi linguaggi. Tailwind CSS ha stabilito in un certo senso uno standard per assegnare regole CSS ai componenti front end. Anziché scrivere autonomamente il codice CSS, permette di integrare classi predefinite direttamente nella struttura HTML.

Mentre Tailwind si concentra sulla rappresentazione, l’agile framework front end Alpine JS punta sul comportamento e sulla reattività. Al posto del CSS utilizza snippet JavaScript predefiniti. Alpine punta a presentarsi come il “jQuery per il web moderno” e chiude così il cerchio tornando a uno dei classici framework JavaScript.

Un vantaggio fondamentale dei framework front end single-concern è la loro semplicità. Di norma, è possibile limitare le funzionalità del codice impiegato allo stretto necessario. A tal fine potrebbe essere necessario ricorrere a un processo di build separato. È anche possibile combinare tra loro parti di questi framework senza problemi. Una combinazione apprezzata è composta da Tailwind CSS + Alpine JS.

Creare più front end con una base comune con i framework cross-platform

I framework front end trattati finora puntano tutti sulla rappresentazione in un browser. Oltre a questi esistono anche i cosiddetti framework front end cross-platform, che creano codice per app native. Le app native non richiedono alcun browser, ma girano direttamente su un sistema operativo, come Windows, macOS, Android o iOS.

Un noto framework front end cross-platform è Flutter, che si basa sul linguaggio di programmazione Dart di Google. Un’interfaccia utente creata in Flutter funge da base comune da cui è possibile ricavare più front end web e nativi.

Un approccio simile si trova anche nel framework front end puramente nativo GTK. Partendo da una base comune, permette di creare front end per Linux, Windows e macOS. A differenza di Flutter, GTK non si basa su tecnologie web. A tale scopo sono disponibili collegamenti con una vasta scelta di linguaggi di programmazione dai quali è possibile lavorare con GTK.