Cosa sono frontend e backend: differenze e linguaggi

Quando utilizzi una piattaforma web, dietro allo schermo succedono molte più cose di quelle che immagini. Tutti i componenti dell’applicazione interagiscono per far funzionare il prodotto finito, con il quale l’utente interagisce.

Le parti che compongono un sito web sono tipicamente tre:

• Frontend
• Backend
• Data storage

Ma quali sono le differenze tra frontend e backend? Cosa significa data storage? Entriamo nel dettaglio nei prossimi paragrafi.

Cos’è il frontend di un sito web

Il frontend è la parte visibile di un prodotto. In pratica, indica tutto ciò che l’utente vede e con cui interagisce direttamente: bottoni, contenuto presente sulla pagina, animazioni, ecc.

Il frontend developer lavora a stretto contatto con il design. Il designer stabilisce quali flussi debbano essere presenti, ad esempio cosa succeda al click di un pulsante, e come appaiano tutti gli elementi presenti in ogni schermata, e il frontender li riproduce con il codice.

Inoltre, il frontend interagisce anche con il backend, effettuando le chiamate necessarie per ottenere, mostrare e modificare i dati di cui l’utente ha bisogno.

Non solo grafica: cosa fa un frontend developer

Non è solamente la parte visibile del prodotto digitale che compete al frontend. Tra i suoi compiti c’è anche quello di:

• Passare al backend le informazioni fornite dall’utente. Esempio: quando l’utente riempie un form per creare un profilo, il frontend passa quei dati al backend perché questo possa essere creato.
• Orchestrare i flussi di dati. Determina quando i dati devono essere richiesti al backend, quando vanno aggiornati (ad esempio dopo un’azione di modifica) e, quando necessario, esegue una prima validazione. Esempio: quando l’utente inserisce un indirizzo email con un formato non valido, provvede a segnalarlo.
• Eseguire un primo step di controllo sulle operazioni impedite all’utente. Ciò può avvenire in vari modi: disabilitando pulsanti, reindirizzando a una pagina diversa, mostrando un messaggio di errore.

Che linguaggi si utilizzano nel frontend

Le conoscenze base del frontend developer sono tre: 

• HTML, il linguaggio di markup standard per il web. È uno standard creato dal World Wide Web Consortium che fornisce gli elementi base visibili sulla pagina.
• CSS, che viene usato per stilizzare gli elementi sulla pagina. Decreta ad esempio il colore di un elemento, se ha un bordo e le sue dimensioni.
• JavaScript, il linguaggio di programmazione d’eccellenza per il web, che rende gli elementi sulla pagina web interattivi.

D’altro canto, però, oggi nella realtà dei fatti raramente vengono impiegati questi tre elementi in maniera “pura”, ma si fa utilizzo di framework, librerie e altri tool di sviluppo come:

• React
• VueJS
• Angular
• NextJS
• Tailwind

Questi strumenti consentono di gestire al meglio la complessità di un’applicazione reale, ma anche di velocizzare al lavoro, per esempio riutilizzando componenti in più parti della piattaforma.

Cos’è il backend: il lato nascosto della tua applicazione

Il backend si occupa di effettuare le operazioni che non sono direttamente visibili all’utente. Il frontend riporta le richieste implicite ed esplicite dell’utente, ma è il backend a eseguire veramente le operazioni necessarie.

La sua azione avviene “dietro le quinte”. A lui spetta il compito di mettere in comunicazione la parte visibile e con la quale l’utente interagisce (il frontend) con i dati immagazzinati (il database), servendo i dati necessari e manipolandoli su richiesta.

Cosa fa il backend developer

Il backend non si limita a riportare e manipolare i dati. Anzi, il suo ruolo è quello di un vero e proprio centro di controllo, che coordina ogni operazione. Ogni richiesta viene interpretata, validata e diventa un’azione concreta. È il livello che garantisce che tutto avvenga secondo le regole definite dal sistema.

Tra i compiti del backend developer rientrano:

• Eseguire le operazioni richieste dal frontend. Ciò include anche fornire una risposta esplicativa quando l’operazione non va a buon fine. Esempio: se l’utente richiede di visualizzare un prodotto in una pagina, il backend restituirà tutti i dati relativi al prodotto, come il nome, la descrizione, l’immagine e il prezzo. Se ciò non è possibile, il backend restituirà 404 se non trova l’elemento, 403 se l’utente non è autorizzato a visualizzarlo, e così via.
• Inserire, restituire, modificare ed eliminare elementi presenti nel database. Si tratta delle cosiddette CRUD (Create, Read, Update, Delete), cioè le operazioni basilari che possono essere compiute sui dati, che hanno corrispondenza anche nei metodi HTTP.
• Controllare che l’utente abbia i permessi necessari per eseguire l’operazione richiesta. Esempio: quando l’utente prova a modificare il profilo della propria azienda ma non è amministratore di quest’ultima, il backend previene che possa fare la modifica.
• Gestire processi in background, ad esempio l’invio di email programmate e di notifiche temporizzate, la sincronizzazione dei dati e il rinnovo o la scadenza di abbonamenti.

Qual è la differenza tra backend e backoffice?

Un tipico problema con cui si interfaccia il backend developer è che, proprio perché la sua attività avviene nell’ombra, spesso a chi non è del mestiere non è chiaro il suo ambito di competenza.

Il backoffice, quindi, è in qualche modo legato al backend? In un certo senso, sì: il backoffice ha molto probabilmente un backend alle spalle, che consente di visualizzare e manipolare i dati. Ma, allo stesso modo, ha anche una parte visibile e interattiva costituita dal frontend.

Si definisce backoffice una piattaforma (o una sezione di una piattaforma) a cui si accede solitamente con un’autenticazione e che consente di modificare i dati visibili ad altri utenti.

Facciamo un esempio concreto: in un blog, la sezione in cui l’autore può inserire nuovi articoli, modificarne il contenuto, aggiungere etichette e immagini agli articoli, può essere considerata un backoffice.

Ma questo backoffice è a sua volta costruito da un frontend, che si occupa tra le altre cose di mostrare la casella di testo in cui l’autore inserisce il nuovo articolo, e di un backend, che verifica che l’autore modifichi solo gli articoli che può modificare e tiene traccia del testo salvato, delle date di modifica, ecc.

In definitiva, quindi, non solo backend e backoffice sono due cose diverse, ma appartengono anche a categorie diverse: uno serve a far funzionare e costruire piattaforme, mentre l’altro è una tipologia o una sezione di una piattaforma.

Che linguaggi sono usati per lo sviluppo backend

Come si costruisce concretamente un backend? Il backend può essere scritto in diversi linguaggi, di cui i più popolari e utilizzati sono:

• JavaScript, o meglio ancora TypeScript, molto popolare grazie all’utilizzo assieme a NodeJS. Nelle applicazioni full-stack, consente di avere lo stesso linguaggio a frontend e backend.
• Python, largamente diffuso in progetti AI e che prevedono elaborazione di una grande mole di dati.
• Java, storicamente popolare e di uso diffuso nei grandi sistemi aziendali.
• C#, molto usato per la sua integrazione con l’ecosistema di Microsoft.

Come per il frontend, anche il backend si appoggia spesso a framework, ad esempio Express per NodeJS, ma anche ad altri tool, come i servizi cloud per ospitare le applicazioni su server remoti, e i container, per isolare l’applicazione con tutte le sue dipendenze perché sia fruibile su qualsiasi sistema.

Come vengono gestiti i dati: il data storage

Il data storage è un qualsiasi sistema in cui vengono salvati i dati. È la memoria dell’applicazione, che garantisce la permanenza delle informazioni e l’accesso a quest’ultime.

I più comuni sono:

• Database: salva dati strutturati, eventualmente relazionati tra di loro. Ha una propria logica interna, in cui i dati vengono organizzati e interpretati e può essere interrogato per ottenere ciò che si desidera attraverso le query.
• Bucket: salva interi file, senza applicarvi alcuna logica. Trova quindi applicazione per salvare immagini, video o per effettuare un backup.

Questi due tipi di storage a volte cooperano tra di loro. Esempio: l’utente carica la propria immagine profilo, che viene salvata in un bucket; nel database, all’interno del profilo dell’utente, viene invece salvato l’URL a cui quell’immagine è accessibile.

I compiti dei servizi di data storage non si limitano alla preservazione dei dati, ma includono anche:

• Evitare che i dati siano incoerenti, ad esempio che manchi l’id di un utente o che questo sia nel formato sbagliato.
• Fornire al backend i dati nel minor tempo possibile.
• Gestire la concorrenza, cioè quando due o più richieste tentano di modificare lo stesso dato in contemporanea.

Come è fatto un database

Alla base del database c’è una gestione data dal Database Management System, che si occupa di salvare i dati su disco, eseguire le query e ottimizzare le performance. Sono esempi di ciò:

• MySQL
• PostgreSQL
• MongoDB
• SQLite
• MariaDB

I dati all’interno del database possono essere organizzati in maniera differente. In generale, si distinguono due categorie a seconda dell’organizzazione dei dati:

• I database relazionali organizzano i dati in tabelle, righe e colonne. Le tabelle possono a loro volta essere collegate tra di loro.
• I database noSQL, invece, non organizzano i dati in tabelle rigide, ma usano strutture flessibili, ad esempio documenti simili a JSON o coppie chiave-valore.

Perché un’applicazione funzioni, quindi, tutte le parti di cui abbiamo parlato devono cooperare in armonia. E questo riguarda solo la parte di programmazione dell’applicazione, senza tener conto quindi di tutti gli altri aspetti, altrettanto importanti, come la gestione delle logiche di business, il marketing, la SEO e il design.

Se hai un’idea per sviluppare una piattaforma web e cerchi dei partner qualificati che ti aiutino a trasformarla in un prodotto reale, rivolgiti a noi di Mabiloft. Saremo lieti di discutere della tua idea e di aiutarti a farla funzionare.