Frontend vs backend: qual è la differenza?
Il frontend è la parte di un'app che gira nel browser dell'utente: le pagine, i pulsanti, i moduli e le animazioni che vede e con cui interagisce. Il backend è la parte che gira su un server che l'utente non vede mai: memorizza e recupera i dati, applica le regole di business, verifica chi può fare cosa e comunica con altri servizi come i pagamenti e l'email. I due comunicano tramite un'API e, insieme a un database, formano un'app «full stack».
Perché conta quando si costruisce con l'AI
Quando descrivi un'app a un builder AI, descrivi entrambe le metà contemporaneamente, che tu te ne accorga o no. «I clienti possono prenotare uno slot» significa un modulo di prenotazione (frontend), regole su quali slot sono liberi (backend) e un posto dove salvare le prenotazioni (database).
Conoscere la suddivisione aiuta in tre modi pratici:
- Sicurezza. Tutto ciò che sta nel frontend può essere visto e modificato dall'utente. Regole e segreti devono stare nel backend.
- Debug. «Il pulsante non risponde» e «il pulsante risponde ma non salva nulla» indicano due metà diverse, e dire quale dei due problemi vedi aiuta l'AI a trovare la causa più in fretta.
- Hosting e costi. Un sito solo frontend è economico e semplice da ospitare. Un backend deve girare da qualche parte, e questo incide su quanto paghi e su come si comporta la tua app quando è inattiva.
Un'analogia quotidiana
Pensa a un ristorante.
Il frontend è la sala: il menu, i tavoli, l'arredamento, il cameriere che prende l'ordine. È pensata per i clienti, che possono vedere e toccare tutto.
Il backend è la cucina e l'ufficio: i cuochi che preparano i piatti, il magazzino, la cassa, le regole del responsabile su chi ottiene uno sconto. I clienti non entrano mai lì, e non dovrebbero poterlo fare.
L'API è il passaggio tra i due: il banco da cui gli ordini entrano e i piatti escono, in un formato concordato. Il database è il magazzino e il registro degli ordini.
Un cliente può riscrivere il suo foglio d'ordine (il frontend è sotto il suo controllo), ma la cucina decide comunque cosa cucinare e quanto far pagare. Per questo i controlli importanti stanno nel retro.
Cosa fa ciascuna parte
| Frontend | Backend | |
|---|---|---|
| Gira su | Il dispositivo dell'utente, nel browser | Un server che tu (o il tuo hosting) controlli |
| Compito principale | Mostrare contenuti, raccogliere input, rispondere ai clic | Memorizzare dati, applicare regole, far rispettare i permessi, chiamare altri servizi |
| Gli utenti possono vedere e modificare il codice? | Sì: viene scaricato nel loro browser | No |
| Può contenere chiavi API segrete? | No | Sì, nelle variabili d'ambiente |
| Tecnologie comuni | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Cosa va storto | Layout rotto su mobile, pulsante che non fa nulla, pagina lenta | Dati non salvati, dati sbagliati mostrati, errori, falle di sicurezza |
Alcuni framework sfumano il confine. Next.js, per esempio, permette a un solo progetto di contenere sia codice per il browser sia codice per il server. L'idea resta la stessa: la domanda è sempre dove gira questo pezzo?
Un esempio concreto: prenotare una lezione
Ecco cosa succede quando qualcuno prenota una lezione di yoga, passo dopo passo.
| Passo | Dove | Cosa succede |
|---|---|---|
| 1 | Frontend | La pagina del calendario si carica e chiede al backend le lezioni di questa settimana. |
| 2 | Backend | Legge lezioni e prenotazioni dal database, calcola i posti liberi e restituisce la lista in JSON. |
| 3 | Frontend | Mostra ogni lezione con orario, insegnante e posti liberi. |
| 4 | Frontend | L'utente sceglie una lezione e inserisce nome ed email. Il modulo verifica che l'email sembri valida (per cortesia, non come garanzia). |
| 5 | Frontend → Backend | Invia una richiesta POST /api/bookings tramite l'API. |
| 6 | Backend | Valida di nuovo i dati, controlla che la lezione non sia piena, salva la prenotazione e chiede al servizio email di inviare una conferma usando una chiave segreta. |
| 7 | Backend → Frontend | Restituisce «prenotato» oppure «spiacenti, è al completo». |
| 8 | Frontend | Mostra la schermata di conferma. |
Nota i passi 4 e 6: l'input viene controllato due volte. Il controllo nel frontend dà un riscontro immediato; quello nel backend è quello che conta davvero, perché un utente determinato può aggirare completamente il frontend.
Termini comuni spiegati
| Termine | Significato |
|---|---|
| Client / server | Il client è il browser (o l'app) che invia le richieste; il server le risponde. |
| UI | Interfaccia utente: le schermate e i controlli. |
| API | Il modo concordato con cui il frontend chiede al backend dati o azioni. |
| Endpoint | Un singolo URL specifico dell'API, come /api/bookings. |
| Full stack | Frontend + backend + database insieme. Vedi cos'è un'app full stack. |
| Sito statico | Un frontend senza un backend proprio; gli stessi file per tutti. |
| SPA | Single-page application: un frontend che aggiorna la pagina nel browser invece di caricarne di nuove. |
| Server-side rendering (SSR) | Il server costruisce l'HTML della pagina prima di inviarlo, il che può aiutare velocità e SEO. |
| Variabili d'ambiente | Impostazioni e segreti forniti al backend in esecuzione, tenuti fuori dal codice. |
La tua app ha bisogno di un backend?
| Se la tua app… | Serve un backend? |
|---|---|
| Mostra informazioni uguali per tutti | No |
| Ha un modulo di contatto che ti invia solo un'email | Di solito un piccolo backend, oppure un servizio di moduli |
| Salva dati che altre persone vedranno | Sì |
| Ha accessi e dati privati | Sì |
| Accetta pagamenti | Sì, almeno per creare i checkout e ricevere i webhook di pagamento |
| Usa un'API a pagamento o un'altra API con una chiave segreta | Sì, per tenere la chiave lontana dal browser |
Errori comuni e idee sbagliate
- Mettere chiavi segrete nel frontend. Saranno visibili a chiunque apra gli strumenti per sviluppatori del browser. È l'errore grave più comune nelle app costruite con l'AI.
- Far rispettare le regole solo nel frontend. Nascondere il pulsante «elimina» agli utenti non amministratori non è una protezione: il backend deve rifiutare la richiesta.
- Pensare che il backend sia «solo il database». Il database memorizza i dati. Il backend decide chi può leggerli e modificarli, e come.
- Credere che JavaScript significhi frontend. JavaScript e TypeScript girano anche sui server, con Node.js.
- Dare la colpa alla metà sbagliata. Se la pagina sembra giusta ma i dati non lo sono, il problema di solito è nel backend o nel database, non nel design.
- Costruire troppo. Un portfolio non ha bisogno di un backend personalizzato. Aggiungerne uno aggiunge costi e parti in movimento.
Cosa chiedere al tuo builder AI
- «Quali parti di questa app girano nel browser e quali sul server?»
- «Sposta tutte le chiavi API nel backend e leggile dalle variabili d'ambiente.»
- «Valida ogni modulo sul server oltre che nel browser.»
- «Fai in modo che nel backend solo gli amministratori possano eliminare le prenotazioni.»
- «La pagina sembra a posto ma i dati non vengono salvati: controlla nei log del backend la richiesta.»
- «Questo è un semplice sito di marketing; tienilo solo frontend, a meno che non serva un backend.»
Frontend e backend in Mythex
Un nuovo progetto Mythex parte da un frontend con Vite, React, TypeScript e Tailwind, e l'agente aggiunge un backend quando la tua app ne ha bisogno. Oppure puoi chiedere un'API separata in Node, Python (FastAPI), C# o Java che giri accanto al frontend nello stesso progetto. Nell'anteprima puoi passare tra il sito e il server API, e la pubblicazione distribuisce entrambi, con un database e uno spazio per i file aggiunti quando servono. La documentazione spiega le app multi-servizio, la guida hosting web illustra dove gira ciascuna metà una volta online, e i template di app sono un modo rapido per vedere esempi full stack.
Domande
Qual è la differenza tra frontend e backend?
Il frontend è la parte di un'app che gira nel browser dell'utente: le pagine, i pulsanti e i moduli che vede e usa. Il backend gira su un server che l'utente non vede mai; memorizza i dati, applica le regole di business, verifica i permessi e comunica con altri servizi.
Ogni app ha bisogno di un backend?
No. Un sito di marketing, un portfolio o una semplice landing page possono essere solo frontend. Appena un'app deve salvare dati condivisi, far accedere gli utenti, gestire pagamenti o usare chiavi API segrete, serve un backend di qualche tipo.
HTML è frontend o backend?
HTML, CSS e JavaScript che girano nel browser sono frontend. JavaScript può anche girare su un server usando Node.js, e in quel caso è codice backend. Non è il linguaggio a decidere, ma il luogo in cui il codice viene eseguito.
Cosa significa full stack?
Full stack significa occuparsi sia del frontend sia del backend (e di solito anche del database). Un'app full stack è un'app che ha tutte e tre le parti; uno sviluppatore full stack lavora su tutte.