Frontend vs backend: quina és la diferència?
El frontend és la part d'una app que s'executa al navegador de l'usuari: les pàgines, els botons, els formularis i les animacions que veu i clica. El backend és la part que s'executa en un servidor que l'usuari mai no veu: emmagatzema i recupera dades, aplica les regles de negoci, comprova qui pot fer què i es comunica amb altres serveis com els pagaments i el correu electrònic. Els dos es comuniquen mitjançant una API i, juntament amb una base de dades, formen una app «full stack».
Per què importa quan construeixes amb IA
Quan descrius una app a un constructor amb IA, n'estàs descrivint les dues meitats alhora, tant si ho saps com si no. «Els clients poden reservar una plaça» vol dir un formulari de reserva (frontend), regles sobre quines places estan lliures (backend) i un lloc on desar les reserves (base de dades).
Conèixer la divisió ajuda en tres aspectes pràctics:
- Seguretat. Tot el que hi ha al frontend pot ser vist i modificat per l'usuari. Les regles i els secrets han de viure al backend.
- Depuració. «El botó no respon» i «el botó respon però no es desa res» apunten a meitats diferents, i dir quina de les dues veus ajuda la IA a trobar la causa més ràpidament.
- Allotjament i cost. Un lloc només de frontend és barat i senzill d'allotjar. Un backend s'ha d'executar en algun lloc, cosa que afecta el que pagues i com es comporta la teva app quan no té activitat.
Una analogia del dia a dia
Pensa en un restaurant.
El frontend és el menjador: la carta, les taules, la decoració, el cambrer que pren la comanda. Està pensat per als clients, que hi poden veure i tocar tot.
El backend és la cuina i l'oficina: els cuiners, el magatzem, la caixa, les normes del gerent sobre qui té un descompte. Els clients no hi entren mai, i no haurien de poder-hi entrar.
L'API és el pas entre tots dos: el taulell on entren les comandes i surten els plats, en un format acordat. La base de dades és el magatzem i el llibre de comandes.
Un client pot reescriure el full de comanda (el frontend és sota el seu control), però la cuina segueix decidint què cuina i què cobra. Per això les comprovacions importants han d'estar al darrere.
Què fa cada part
| Frontend | Backend | |
|---|---|---|
| S'executa a | Al dispositiu de l'usuari, al navegador | Un servidor que tu (o el teu proveïdor d'allotjament) controles |
| Feina principal | Mostrar coses, recollir dades, respondre als clics | Emmagatzemar dades, aplicar regles, fer complir permisos, cridar altres serveis |
| Poden els usuaris veure i canviar el codi? | Sí: es descarrega al seu navegador | No |
| Pot guardar claus d'API secretes? | No | Sí, en variables d'entorn |
| Tecnologies habituals | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Què va malament | El disseny es trenca en mòbil, el botó no fa res, la pàgina va lenta | Les dades no es desen, es mostren dades incorrectes, errors, forats de seguretat |
Alguns frameworks difuminen la frontera. Next.js, per exemple, permet que un mateix projecte contingui codi de navegador i codi de servidor. La idea és la mateixa: la pregunta sempre és on s'executa aquesta peça?
Un exemple resolt: reservar una classe
Això és el que passa quan algú reserva una classe de ioga, pas a pas.
| Pas | On | Què passa |
|---|---|---|
| 1 | Frontend | La pàgina del calendari es carrega i demana al backend les classes d'aquesta setmana. |
| 2 | Backend | Llegeix les classes i les reserves de la base de dades, calcula les places lliures i retorna la llista en JSON. |
| 3 | Frontend | Mostra cada classe amb l'hora, el professor i les places lliures. |
| 4 | Frontend | L'usuari tria una classe i omple el nom i el correu. El formulari comprova que el correu sembla vàlid (una cortesia, no una garantia). |
| 5 | Frontend → Backend | Envia una petició POST /api/bookings a través de l'API. |
| 6 | Backend | Valida de nou les dades, comprova que la classe no estigui plena, desa la reserva i demana al servei de correu que enviï una confirmació fent servir una clau secreta. |
| 7 | Backend → Frontend | Retorna «reservat» o «ho sentim, està plena». |
| 8 | Frontend | Mostra la pantalla de confirmació. |
Fixa't en els passos 4 i 6: les dades es comproven dues vegades. La comprovació del frontend dona una resposta immediata; la del backend és la que realment compta, perquè un usuari decidit pot saltar-se el frontend del tot.
Termes habituals explicats
| Terme | Significat |
|---|---|
| Client / servidor | El client és el navegador (o l'app) que fa les peticions; el servidor les respon. |
| UI | Interfície d'usuari: les pantalles i els controls. |
| API | La manera acordada perquè el frontend demani dades o accions al backend. |
| Endpoint | Una URL concreta de l'API, com /api/bookings. |
| Full stack | Frontend + backend + base de dades junts. Consulta què és una app full stack. |
| Lloc estàtic | Un frontend sense backend propi; els mateixos fitxers per a tothom. |
| SPA | Aplicació d'una sola pàgina: un frontend que actualitza la pàgina al navegador en lloc de carregar-ne de noves. |
| Renderització al servidor (SSR) | El servidor construeix l'HTML de la pàgina abans d'enviar-la, cosa que pot millorar la velocitat i el SEO. |
| Variables d'entorn | Configuracions i secrets que es donen al backend en executar-se, fora del codi. |
La teva app necessita un backend?
| Si la teva app… | Cal un backend? |
|---|---|
| Mostra informació que és la mateixa per a tothom | No |
| Té un formulari de contacte que només t'envia correus | Normalment un de petit, o un servei de formularis |
| Desa dades que altres persones veuran | Sí |
| Té inicis de sessió i dades privades | Sí |
| Cobra pagaments | Sí, almenys per crear els cobraments i rebre els webhooks de pagament |
| Fa servir una API de IA o una altra API de pagament amb clau secreta | Sí, per mantenir la clau fora del navegador |
Errors habituals i idees equivocades
- Posar claus secretes al frontend. Serà visible per a qualsevol que obri les eines de desenvolupament del navegador. És l'error greu més habitual en les apps construïdes amb IA.
- Aplicar les regles només al frontend. Amagar el botó «esborrar» als usuaris que no són administradors no és protecció; el backend ha de rebutjar la petició.
- Pensar que el backend és «només la base de dades». La base de dades emmagatzema dades. El backend decideix qui les pot llegir i canviar, i com.
- Pensar que JavaScript vol dir frontend. JavaScript i TypeScript també s'executen als servidors, amb Node.js.
- Culpar la meitat equivocada. Si la pàgina es veu bé però les dades són incorrectes, el problema sol ser al backend o a la base de dades, no en el disseny.
- Construir de més. Un portfoli no necessita un backend personalitzat. Afegir-ne un suma cost i peces mòbils.
Què demanar al teu constructor amb IA
- «Quines parts d'aquesta app s'executen al navegador i quines al servidor?»
- «Mou les claus d'API al backend i llegeix-les de variables d'entorn.»
- «Valida cada formulari al servidor i també al navegador.»
- «Fes complir al backend que només els administradors puguin esborrar reserves.»
- «La pàgina es veu bé però les dades no es desen; revisa els registres del backend per a la petició.»
- «Això és un lloc de màrqueting senzill; mantén-lo només amb frontend tret que necessitem un backend.»
Frontend i backend a Mythex
Un projecte nou a Mythex comença amb un frontend de Vite, React, TypeScript i Tailwind, i l'agent hi afegeix un backend quan la teva app el necessita; també pots demanar una API separada en Node, Python (FastAPI), C# o Java que funcioni al costat del frontend dins del mateix projecte. A la vista prèvia pots canviar entre el lloc web i el servidor de l'API, i en publicar es desplegen tots dos, amb una base de dades i un emmagatzematge de fitxers afegits quan cal. La documentació explica les aplicacions de múltiples serveis, la guia de allotjament web explica on s'executa cada meitat quan la app està en línia, i les plantilles d'apps són una manera ràpida de veure exemples full stack.
Preguntes
Quina és la diferència entre frontend i backend?
El frontend és la part d'una app que s'executa al navegador de l'usuari: les pàgines, els botons i els formularis que veu i clica. El backend s'executa en un servidor que l'usuari mai no veu; emmagatzema dades, aplica les regles de negoci, comprova els permisos i es comunica amb altres serveis.
Totes les apps necessiten un backend?
No. Un lloc de màrqueting, un portfoli o una pàgina d'aterratge simple pot ser només frontend. En el moment en què una app necessita desar dades compartides, iniciar sessions, cobrar pagaments o fer servir claus d'API secretes, necessita algun tipus de backend.
L'HTML és frontend o backend?
L'HTML, el CSS i el JavaScript que s'executen al navegador són frontend. El JavaScript també pot executar-se en un servidor amb Node.js, i aleshores és codi de backend. El llenguatge no ho decideix; ho decideix on s'executa el codi.
Què vol dir full stack?
Full stack vol dir cobrir tant el frontend com el backend (i normalment la base de dades). Una app full stack té les tres parts, i un desenvolupador full stack treballa en totes.