Frontend

Qué es

El frontend (o “lado del cliente”) es todo lo que el usuario puede ver y con lo que puede interactuar directamente en una aplicación o sitio web. Es lo que se ejecuta en el navegador (Chrome, Firefox, Safari) o en la app móvil del usuario.

Si el software fuera un restaurante:

El frontend es el salón, el menú, los meseros, la presentación del plato
El backend es la cocina, los ingredientes, las recetas

Tecnologías del Frontend

Las 3 tecnologías base de la web

Tecnología	Función	Analogía
HTML	Estructura y contenido	El esqueleto y los órganos
CSS	Estilo y presentación visual	La ropa y el maquillaje
JavaScript	Interactividad y lógica	Los músculos y el sistema nervioso

Frameworks y librerías modernos

Los desarrolladores rara vez escriben JavaScript puro. Usan frameworks que añaden estructura y productividad:

Framework	Origen / respaldo	Adoptado por
React	Creado por Meta; desde 2026 bajo la React Foundation (Linux Foundation)	Netflix, Instagram, Airbnb
Angular	Google	Grandes empresas, apps bancarias
Vue.js	Creado por Evan You; comunidad open source	Startups, medianas empresas
Svelte	Comunidad open source	Proyectos que priorizan rendimiento
Astro	Equipo de Astro (parte de Cloudflare desde 2026); sigue siendo open source	Sitios de contenido, blogs, marketing

Qué hace un desarrollador frontend

Un desarrollador frontend se encarga de:

Implementar el diseño visual entregado por el diseñador UX/UI
Crear componentes reutilizables (botones, formularios, modales)
Manejar el estado de la aplicación (qué datos se muestran y cuándo)
Consumir APIs del backend para mostrar datos dinámicos
Garantizar responsividad — que funcione en móvil, tablet y desktop
Optimizar el rendimiento — tiempos de carga, animaciones fluidas
Asegurar accesibilidad — funciona con lectores de pantalla, teclado

Métricas clave del frontend

Core Web Vitals (Google los usa para SEO):

LCP (Largest Contentful Paint): velocidad de carga del contenido principal — “bueno” si es ≤ 2.5 segundos
INP (Interaction to Next Paint): tiempo de respuesta a interacciones — “bueno” si es ≤ 200 ms
CLS (Cumulative Layout Shift): estabilidad visual, cuánto se “mueve” la página al cargar — “bueno” si es ≤ 0.1

Los umbrales se evalúan sobre el percentil 75 de las visitas reales.

Frontend moderno: más complejo que antes

El frontend de hoy va mucho más allá de “hacer páginas web bonitas”:

SSR/SSG (Server-Side Rendering / Static Generation): decidir qué renderiza el servidor y qué el cliente
PWA (Progressive Web Apps): apps web que funcionan offline y se instalan como apps nativas
State management: manejar datos que cambian en tiempo real (Redux, Zustand, Pinia)
Testing: pruebas unitarias de componentes, pruebas E2E con Playwright o Cypress
Performance budgets: garantizar que la app no cargue demasiado JS

Frontend vs Backend vs Fullstack

Perfil	Qué hace	Cuándo lo necesitas
Frontend	La interfaz visible	Rediseños, nuevas pantallas, apps web
Backend	La lógica y datos	APIs, procesos, integraciones
Fullstack	Ambos	Startups, proyectos pequeños, prototipado

Por qué importa para tu empresa

Un frontend bien construido impacta directamente en el negocio:

Conversión: páginas más rápidas y fáciles de usar suelen convertir mejor
Retención: los usuarios abandonan con facilidad apps con UX deficiente
SEO: Core Web Vitals forma parte de las señales de experiencia de página que Google considera en el ranking
Marca: el frontend es la cara del producto — refleja la calidad de tu empresa

Términos relacionados

Backend - El complemento del frontend: lógica, datos y servidor
API - El canal de comunicación entre frontend y backend
REST - El estilo de API más común que usa el frontend para pedir datos al backend
Fullstack - Desarrollador que maneja tanto frontend como backend

Recursos adicionales:

MDN Web Docs - La referencia más completa de tecnologías web
web.dev - Guías de Google para rendimiento y Core Web Vitals