Definición:
Frontend es la parte de un sitio web o una aplicación con la que una persona interactúa directamente. Incluye la interfaz que se muestra en la pantalla y el código que responde a acciones como pulsar un botón, completar un formulario, navegar por un menú o consultar información.
En una aplicación web, gran parte del frontend se ejecuta en el navegador y se comunica con el backend para solicitar o enviar datos. Ambos forman parte del mismo sistema, pero cumplen funciones diferentes.
Índice de contenidos
Qué incluye el frontend
El frontend combina contenido, presentación y comportamiento. Sus componentes habituales son:
- Estructura: organiza títulos, textos, formularios, enlaces y demás elementos mediante HTML.
- Presentación: define colores, tipografías, espacios, tamaños y distribución mediante CSS.
- Interacción: utiliza JavaScript para responder a eventos, actualizar la interfaz y ejecutar lógica en el cliente.
- Recursos: incorpora imágenes, iconos, fuentes, vídeos y otros archivos necesarios para mostrar la interfaz.
- Estado de la interfaz: conserva información temporal como una selección, el contenido de un carrito o el paso actual de un proceso.
El frontend no se limita a la apariencia. También determina cómo se comporta la interfaz, qué información recibe el usuario y cómo se comunican sus acciones al resto de la aplicación.
Cómo funciona el frontend de una aplicación web
El proceso depende de la arquitectura, pero una interacción habitual sigue estas etapas:
- Solicitud inicial: el navegador solicita un documento o abre una aplicación.
- Carga de recursos: recibe HTML, hojas de estilo, scripts, fuentes e imágenes.
- Construcción de la interfaz: interpreta esos recursos y genera los elementos visibles con los que puede interactuar el usuario.
- Ejecución en el cliente: el código responde a eventos, valida determinadas entradas y actualiza partes de la pantalla.
- Intercambio de datos: cuando necesita información externa, se comunica con un servicio mediante una API.
- Actualización de la vista: presenta los datos recibidos o informa del resultado de la acción.
No toda la lógica pertenece al frontend. Las operaciones sensibles, el acceso a bases de datos y la aplicación de reglas que no deben depender del dispositivo del usuario suelen ejecutarse en el servidor.
Tecnologías y herramientas de frontend
Las tecnologías fundamentales de la web son HTML, CSS y JavaScript. Sobre ellas pueden utilizarse otras herramientas:
- Frameworks y bibliotecas: ayudan a organizar componentes, rutas, estados y comportamientos reutilizables. Un framework también puede establecer convenciones y controlar parte del flujo de la aplicación.
- Preprocesadores y lenguajes tipados: amplían o transforman el código antes de enviarlo al navegador.
- Herramientas de construcción: agrupan archivos, transforman módulos y preparan recursos para su publicación.
- Gestores de paquetes: permiten instalar y mantener dependencias utilizadas por el proyecto.
- Herramientas de prueba y desarrollo: automatizan comprobaciones y permiten inspeccionar el comportamiento, la red y el rendimiento en el navegador.
Estas herramientas no sustituyen los fundamentos de la plataforma web. El navegador termina interpretando HTML, CSS, JavaScript y los recursos generados por el proceso de desarrollo.
Diferencias entre frontend y backend
Frontend y backend se complementan:
- Interfaz: el frontend muestra información y recoge acciones; el backend procesa solicitudes y presta servicios al cliente.
- Entorno de ejecución: el frontend web suele ejecutarse en el navegador; el backend lo hace en servidores o servicios remotos.
- Datos: el frontend presenta y modifica el estado visible; el backend aplica reglas, consulta sistemas de almacenamiento y devuelve resultados.
- Exposición: el código enviado al navegador puede inspeccionarse; las credenciales y operaciones críticas no deben confiarse al cliente.
- Comunicación: ambos intercambian datos mediante solicitudes, respuestas y contratos definidos por la aplicación.
La frontera no siempre es idéntica. El renderizado puede realizarse en el servidor, en el navegador o de forma híbrida, y una misma persona puede trabajar en ambas capas.
Calidad de una interfaz frontend
Un frontend debe funcionar correctamente además de mostrar un diseño. Entre sus áreas de calidad se encuentran:
- Usabilidad: las acciones y la navegación deben resultar comprensibles para las personas destinatarias.
- Accesibilidad web: la estructura, el teclado, el contraste y las alternativas textuales deben permitir el uso con distintas capacidades y tecnologías de asistencia.
- Diseño responsive: la interfaz debe adaptarse a diferentes tamaños y formas de interacción.
- Rendimiento: el peso de los recursos, la ejecución de scripts y el proceso de renderizado afectan al tiempo de carga y a la respuesta de la página.
- Compatibilidad y resiliencia: la aplicación debe gestionar diferencias entre navegadores, conexiones lentas, errores y respuestas incompletas.
La seguridad también afecta al frontend. El código debe tratar los datos recibidos como no confiables, evitar insertar contenido sin control y colaborar con las protecciones del servidor frente a ataques como la ejecución de scripts no autorizados.
Qué hace un desarrollador frontend
El trabajo de frontend puede incluir:
- Convertir diseños en interfaces funcionales mediante componentes y estilos mantenibles.
- Programar interacciones y gestionar el estado visible de la aplicación.
- Integrar servicios y representar los datos devueltos por el backend.
- Probar la interfaz en distintos navegadores, dispositivos y condiciones de uso.
- Medir y mejorar rendimiento, accesibilidad y estabilidad visual.
- Colaborar con diseño, contenidos, backend, analítica y control de calidad.
El alcance varía según el proyecto. En equipos pequeños una misma persona puede asumir varias capas, mientras que en productos complejos suelen existir responsabilidades más especializadas.