Cos’è un front end?

Front end e back end sono due livelli di uno stesso software, in­di­pen­den­ti l’uno dall’altro, ma che si com­ple­ta­no a vicenda. Se pensiamo a un software come se fosse un ri­sto­ran­te, il front end comprende la facciata esterna, l’ar­re­da­men­to interno, il menù e il personale di servizio. A sua volta, in questa analogia il back end cor­ri­spon­de­reb­be alla cucina e alla gestione, completa di personale, processi di pro­du­zio­ne e am­mi­ni­stra­zio­ne.

Che cosa co­sti­tui­sce un front end?

Un front end è un’in­ter­fac­cia grafica utente per l’utilizzo di un sito web o di un’app. Il front end è rea­liz­za­to in base alle esigenze e alle aspet­ta­ti­ve delle persone. Per questo motivo sono im­por­tan­ti una pre­sen­ta­zio­ne ac­cat­ti­van­te delle in­for­ma­zio­ni e una struttura chiara delle in­te­ra­zio­ni. Il design di un front end punta a garantire una buona user ex­pe­rien­ce (UX).

Il front end è un livello software che viene eseguito sul client. In questo modo, il front end nasconde la com­ples­si­tà, in quanto l’ela­bo­ra­zio­ne vera e propria delle in­for­ma­zio­ni avviene sul back end. Dietro le quinte, il front end comunica con il back end per scam­biar­si i dati e per ri­spec­chia­re i cam­bia­men­ti. Di norma si uti­liz­za­no in­ter­fac­ce di pro­gram­ma­zio­ne dette API.

Seguendo il principio di sviluppo “Se­pa­ra­tion of concerns”, tra­du­ci­bi­le in italiano con “se­pa­ra­zio­ne delle pro­ble­ma­ti­che”, front end e back end vengono rea­liz­za­ti sotto forma di livelli in­di­pen­den­ti. Per garantire la piena fun­zio­na­li­tà 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. Svi­lup­pa­to­ri del front end che si occupano della co­stru­zio­ne e della ma­nu­ten­zio­ne dei front end.

Nelle parti seguenti daremo un’occhiata agli aspetti in comune e alle dif­fe­ren­ze 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 mul­ti­me­dia­li, e in­te­ra­gi­sco­no con pulsanti e altri elementi in­te­rat­ti­vi. Tra questi elementi vi sono i noti moduli HTML con menu di selezione, campi di im­mis­sio­ne e pulsanti.

Un concetto simile è applicato agli utenti che hanno eseguito l’accesso in un’app. Questi utenti possono even­tual­men­te trovare pos­si­bi­li­tà di in­te­ra­zio­ni più ricche con pulsanti spe­cia­liz­za­ti a loro di­spo­si­zio­ne nel front end. D’altra parte, l’entità delle in­te­ra­zio­ni si limita a pochi percorsi chia­ra­men­te definiti. Tuttavia, possono esservi più pos­si­bi­li­tà per creare i propri contenuti.

In che modo gli svi­lup­pa­to­ri lavorano con il front end?

Gli utenti hanno notevoli li­mi­ta­zio­ni per quanto riguarda il lavoro sul front end. Diversa è la si­tua­zio­ne per i co­sid­det­ti svi­lup­pa­to­ri del front end. Questi pro­fes­sio­ni­sti della pro­gram­ma­zio­ne sono re­spon­sa­bi­li della creazione, ma­nu­ten­zio­ne e del per­fe­zio­na­men­to di un front end e spesso sono assistiti dai designer. In fondo, la facilità d’uso nel web design è un aspetto fon­da­men­ta­le.

In che cosa consiste esat­ta­men­te lo sviluppo del front end? Diamo un’occhiata a un esempio preso dall’eco­si­ste­ma di WordPress. Gli svi­lup­pa­to­ri del front end creano widget di WordPress e temi di WordPress che con­fe­ri­sco­no un aspetto in­te­res­san­te a un sito web rea­liz­za­to con questo CMS.

Per mezzo di un tema di WordPress creato dagli svi­lup­pa­to­ri del front end i contenuti variabili delle singole pagine e dei singoli post vengono integrati in strutture definite. In questo modo si assicura la rap­pre­sen­ta­zio­ne coerente di tutti i contenuti nel sito.

Gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci del front end creano pagine di de­sti­na­zio­ne e uti­liz­za­no elementi call to action (CTA) per guidare i vi­si­ta­to­ri e le vi­si­ta­tri­ci at­tra­ver­so il sito. Al riguardo, è par­ti­co­lar­men­te im­por­tan­te il design re­spon­si­ve.

Quali sono i prin­ci­pa­li framework front end?

Un front end viene ri­pro­dot­to sui di­spo­si­ti­vi finali (“client”) degli utenti. In generale si distingue tra front end web per la rap­pre­sen­ta­zio­ne nel browser e front end nativi, che sono specifici per un dato sistema operativo. I moderni metodi di sviluppo cross-platform per­met­to­no di creare più front end da una base comune.

I front end web con­ten­go­no codice nei linguaggi web HTML, CSS e Ja­va­Script. Questi ultimi cor­ri­spon­do­no ai tre aspetti fon­da­men­ta­li della pro­gram­ma­zio­ne web:

In generale è possibile creare front end di­ret­ta­men­te sulla base dei tre linguaggi web. Tuttavia, questo approccio non sarebbe ef­fi­cien­te, in quanto ri­chie­de­reb­be troppo lavoro superfluo. I framework front end fa­ci­li­ta­no no­te­vol­men­te il lavoro.

A seconda del campo di utilizzo, i framework front end svolgono diverse funzioni. Espandono le capacità dei linguaggi web, fa­ci­li­ta­no il col­le­ga­men­to con il back end e as­si­cu­ra­no la coerenza della fun­zio­na­li­tà tra le varie versioni dei browser. Alcuni framework includono inoltre tecniche per il mi­glio­ra­men­to delle pre­sta­zio­ni.

I framework più recenti, come React e Vue, puntano mag­gior­men­te sulla reat­ti­vi­tà per replicare im­me­dia­ta­men­te nel front end le modifiche apportate ai dati. Inoltre, questi framework con­so­li­da­no i com­po­nen­ti come concetto centrale. In questo caso si tratta di unità in­cap­su­la­te e riu­ti­liz­za­bi­li co­sti­tui­te da elementi reattivi dell’UI.

A seconda dell’approccio uti­liz­za­to, i framework front end possono essere puramente in CSS o Ja­va­Script. In aggiunta, si distingue tra framework front end web e cross-platform.

Svi­lup­pa­re front end sulla base dei com­po­nen­ti con framework reattivi

Con questi framework front end in Ja­va­Script tutto gira intorno a com­po­nen­ti reattivi su misura. I com­po­nen­ti uniscono struttura, aspetto e com­por­ta­men­to e si adattano au­to­ma­ti­ca­men­te ai cam­bia­men­ti nei dati alla loro base. Ad esempio, se si cancella un record di dati, la relativa voce scompare da una rap­pre­sen­ta­zio­ne a elenco e un eventuale contatore mostra im­me­dia­ta­men­te il valore ag­gior­na­to.

I migliori rap­pre­sen­tan­ti dei framework front end reattivi sono da anni Angular e React. Entrambi sono adatti alla creazione di ap­pli­ca­zio­ni a pagina singola, nonché di ap­pli­ca­zio­ni più ricche di contenuti, e sono con­si­de­ra­ti alquanto complessi. Un’al­ter­na­ti­va a questi prodotti è “Vue”, un framework front end no­te­vol­men­te più snello.

Il framework Svelte rap­pre­sen­ta a sua volta un’in­te­res­san­te novità. Infatti, Svelte adotta un approccio fon­da­men­tal­men­te diverso rispetto a React e simili. È un com­pi­la­to­re, che permette di evitare la creazione di nuove strutture in Ja­va­Script. Questo framwork consente quindi di scrivere più sem­pli­ce­men­te il codice che verrà poi con­ver­ti­to dal com­pi­la­to­re in un più complesso codice Ja­va­Script.

La maggior parte dei framework front end reattivi facilita inoltre il lavoro con dati globali. A tal fine si utilizza un co­sid­det­to “state store” grazie al quale è possibile prov­ve­de­re a un in­cap­su­la­men­to dei dati.

Per creare il codice del front end è possibile uti­liz­za­re 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 ap­prez­za­ti prima dell’arrivo dei framework reattivi. Bootstrap o le al­ter­na­ti­ve a Bootstrap offrivano allora una stan­dar­diz­za­zio­ne in­di­spen­sa­bi­le per ri­spon­de­re alle dif­fe­ren­ze tra i browser e di­spo­ne­va­no di una vasta scelta di com­po­nen­ti pre­de­fi­ni­ti già integrati. Tali elementi com­pren­de­va­no ad esempio menu di na­vi­ga­zio­ne ge­rar­chi­ci, accordion con campi col­las­sa­bi­li e cursori con immagini animate.

Questi framework con­di­vi­de­va­no il fatto di includere sia il codice Ja­va­Script sia il codice CSS. Il compatto framework UI ZURB Foun­da­tion puntava invece piuttosto sulla capacità di adat­ta­men­to per ap­pli­ca­zio­ni pro­fes­sio­na­li. “jQuery UI” ha poi in­tro­dot­to un approccio mi­ni­ma­li­sta nella com­bi­na­zio­ne con l’ap­prez­za­to framework Ja­va­Script.

Il vantaggio di questi framework front end è la loro estrema facilità di utilizzo. Nella maggior parte dei casi è suf­fi­cien­te integrare un file CSS e/o Ja­va­Script. La si­tua­zio­ne cambia e si complica ra­pi­da­men­te se si desidera ef­fet­tua­re adat­ta­men­ti e ot­ti­miz­za­zio­ni. Anche la com­bi­na­zio­ne di parti di questi framework è per espe­rien­za piuttosto pro­ble­ma­ti­ca.

I framework front end single-concern: gli spe­cia­li­sti agili

A dif­fe­ren­za dei framework front end mixed-concern, che combinano Ja­va­Script 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 com­po­nen­ti front end. Anziché scrivere au­to­no­ma­men­te il codice CSS, permette di integrare classi pre­de­fi­ni­te di­ret­ta­men­te nella struttura HTML.

Mentre Tailwind si concentra sulla rap­pre­sen­ta­zio­ne, l’agile framework front end Alpine JS punta sul com­por­ta­men­to e sulla reat­ti­vi­tà. Al posto del CSS utilizza snippet Ja­va­Script pre­de­fi­ni­ti. Alpine punta a pre­sen­tar­si come il “jQuery per il web moderno” e chiude così il cerchio tornando a uno dei classici framework Ja­va­Script.

Un vantaggio fon­da­men­ta­le dei framework front end single-concern è la loro sem­pli­ci­tà. Di norma, è possibile limitare le fun­zio­na­li­tà del codice impiegato allo stretto ne­ces­sa­rio. A tal fine potrebbe essere ne­ces­sa­rio ricorrere a un processo di build separato. È anche possibile combinare tra loro parti di questi framework senza problemi. Una com­bi­na­zio­ne ap­prez­za­ta è 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 rap­pre­sen­ta­zio­ne in un browser. Oltre a questi esistono anche i co­sid­det­ti framework front end cross-platform, che creano codice per app native. Le app native non ri­chie­do­no alcun browser, ma girano di­ret­ta­men­te su un sistema operativo, come Windows, macOS, Android o iOS.

Un noto framework front end cross-platform è Flutter, che si basa sul lin­guag­gio di pro­gram­ma­zio­ne Dart di Google. Un’in­ter­fac­cia 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 dif­fe­ren­za di Flutter, GTK non si basa su tec­no­lo­gie web. A tale scopo sono di­spo­ni­bi­li col­le­ga­men­ti con una vasta scelta di linguaggi di pro­gram­ma­zio­ne dai quali è possibile lavorare con GTK.