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 | Empresa | Adoptado por |
|---|---|---|
| React | Meta (Facebook) | Netflix, Instagram, Airbnb |
| Angular | Empresas empresariales, apps bancarias | |
| Vue.js | Comunidad open source | Startups, medianas empresas |
| Svelte | Comunidad | Proyectos que priorizan rendimiento |
| Astro | Comunidad | 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 — debe ser < 2.5 segundos
- INP (Interaction to Next Paint): tiempo de respuesta a interacciones — debe ser < 200ms
- CLS (Cumulative Layout Shift): estabilidad visual — cuánto se “mueve” la página al cargar
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: una landing page 1 segundo más rápida puede aumentar conversiones hasta un 7%
- Retención: usuarios abandonan apps con UX deficiente — 88% no vuelve tras una mala experiencia
- SEO: Google penaliza páginas lentas con Core Web Vitals bajos
- 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 protocolo que el frontend usa 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