Frontend, backend y full-stack

"¿Qué tengo que aprender?" es la pregunta más común al empezar. La respuesta depende del tipo de desarrollador que quieras ser. En esta lección conocerás las tres grandes áreas del desarrollo web, qué tecnologías usa cada una y cómo se combinan en un proyecto real.

Concepto

Piensa en un restaurante:

• Frontend es el comedor: la decoración, el menú, las mesas, cómo te atienden. Es lo que el cliente ve y toca.
• Backend es la cocina y la bodega: recetas, inventario, cobros. El cliente no la ve, pero sin ella no hay comida.
• Base de datos es la bodega donde se guarda todo de forma ordenada.
• Full-stack es la persona que sabe trabajar tanto en el comedor como en la cocina.

Frontend

El frontend es todo lo que se ejecuta en el navegador del usuario.

Tecnología	Rol	Analogía
HTML	Estructura y contenido	El esqueleto de una casa
CSS	Presentación y diseño	La pintura, muebles y decoración
JavaScript	Comportamiento e interactividad	La electricidad: luces, puertas automáticas

Además del trío básico, en el frontend profesional encontrarás:

• Frameworks/librerías: React, Vue, Svelte, Angular.
• Meta-frameworks: Next.js, Nuxt, Astro (combinan frontend con algo de servidor).
• Herramientas: Vite, npm, TypeScript, Sass, Tailwind CSS.

Un desarrollador frontend se preocupa por: diseño responsive, accesibilidad, rendimiento (que cargue rápido), experiencia de usuario y compatibilidad entre navegadores.

<!-- Frontend puro: un botón que reacciona al clic -->
<button id="saludo">Saludar</button>

<script>
  // Este código corre en el navegador del visitante
  document.getElementById('saludo').addEventListener('click', () => {
    alert('¡Hola desde el frontend!');
  });
</script>

Backend

El backend es lo que se ejecuta en el servidor. Sus responsabilidades:

• Recibir datos de formularios y validarlos.
• Guardar y leer información de una base de datos.
• Autenticar usuarios (login, permisos).
• Enviar correos, procesar pagos, generar PDFs.
• Exponer APIs para que el frontend o una app móvil pidan datos.

Lenguajes y frameworks populares:

Lenguaje	Frameworks	Dónde brilla
PHP	Laravel, Symfony, WordPress	Hosting barato, sitios de pymes, CMS
JavaScript (Node.js)	Express, NestJS, Fastify	Mismo lenguaje que el frontend, tiempo real
Python	Django, FastAPI	Datos, IA, prototipos rápidos
Java / C#	Spring, .NET	Empresas grandes, bancos
Go	Gin, Fiber	Alto rendimiento

Bases de datos: SQL (MySQL, PostgreSQL, SQLite) para datos estructurados con relaciones, y NoSQL (MongoDB, Redis) para datos flexibles o caché.

<?php
// Backend: recibe el formulario de contacto (corre en el servidor)
$nombre = htmlspecialchars($_POST['nombre'] ?? '');
$email  = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);

if (!$email) {
    http_response_code(400);
    exit('Correo inválido');
}

// Aquí se guardaría en la base de datos o se enviaría un correo
echo "Gracias, $nombre. Te contactaremos pronto.";

El usuario nunca ve el backend

Si abres "Ver código fuente" en un sitio PHP, verás el HTML resultante, nunca el código PHP. Por eso las contraseñas y claves secretas van en el backend, jamás en el frontend.

Full-stack

Un full-stack domina lo suficiente de ambos lados para construir una aplicación completa. No significa ser experto en todo, sino poder llevar un proyecto de principio a fin. Combinaciones ("stacks") comunes:

• LAMP: Linux + Apache + MySQL + PHP (clásico, muy usado en hosting compartido).
• Laravel + Vue/React: muy popular en agencias de Latinoamérica.
• MERN: MongoDB + Express + React + Node.js.
• Next.js + PostgreSQL: moderno, todo en JavaScript/TypeScript.

¿Y los sitios estáticos?

No todos los proyectos necesitan backend. Un sitio estático es sólo HTML, CSS y JS: portafolios, landing pages, sitios informativos de un negocio. Son rápidos, seguros y se publican gratis (Netlify, GitHub Pages). Para el formulario de contacto puedes usar servicios como Formspree o un pequeño script PHP.

Un sitio dinámico genera contenido al vuelo: tiendas en línea, blogs con panel de administración, sistemas de reservas, plataformas con usuarios.

Casos de uso reales

Proyecto del cliente	¿Qué necesita?	Stack sugerido
Landing page de un dentista	Frontend + formulario	HTML, CSS, JS + Formspree o PHP
Restaurante con menú editable	Frontend + panel admin	WordPress, o Laravel + MySQL
Tienda en línea	Full-stack + pagos	Shopify/WooCommerce, o Next.js + Stripe
Sistema interno de inventario	Full-stack con usuarios	Laravel + Vue, o Node + React
App con chat en tiempo real	Backend con WebSockets	Node.js + Socket.io

Buena práctica

Elige la tecnología según el proyecto y el presupuesto del cliente, no según la moda. Una landing page no necesita React ni una base de datos.

Error común

Intentar aprender todo a la vez (HTML, React, Node, Docker...). Termina en frustración. Empieza por los fundamentos del frontend (HTML, CSS, JavaScript): son obligatorios para cualquier rol web.

Otros roles que encontrarás

• UI/UX Designer: diseña la interfaz y la experiencia (Figma). Te entrega los diseños.
• DevOps: servidores, despliegues automáticos, monitoreo.
• QA/Tester: prueba que todo funcione.
• Desarrollador WordPress / CMS: personaliza gestores de contenido; muy demandado por pymes.

Como freelancer, al principio harás un poco de todo. Por eso entender el panorama completo es tan valioso.

Ejercicios

1. Clasifica como frontend (F), backend (B) o base de datos (D): a) el color de un botón, b) verificar una contraseña, c) la tabla de clientes, d) un menú desplegable, e) enviar un correo de confirmación.
2. Un cliente quiere un sitio para su gimnasio con horarios, fotos y un formulario de contacto. ¿Necesita backend completo? Justifica.
3. Investiga qué stack usa una empresa que admires (busca "stack tecnológico de ..." o revisa sus ofertas de trabajo).

Ver solución

1. a) F, b) B, c) D, d) F, e) B.
2. No necesita un backend completo: es un sitio informativo. Basta con HTML/CSS/JS y un servicio de formularios (Formspree) o un script PHP sencillo. Si quisiera que el gimnasio editara los horarios por sí mismo, convendría un CMS como WordPress.
3. Respuesta libre. Ejemplo: muchas startups usan React/Next.js en el frontend, Node.js o Python en el backend y PostgreSQL como base de datos.

Resumen

• Frontend: lo que corre en el navegador (HTML, CSS, JavaScript y frameworks).
• Backend: lo que corre en el servidor (PHP, Node.js, Python...) junto con la base de datos.
• Full-stack: domina ambos lo suficiente para crear proyectos completos.
• No todos los proyectos necesitan backend; elige según la necesidad del cliente.
• Empieza siempre por HTML, CSS y JavaScript.

Siguiente: Prepara tu entorno de trabajo.