Roadmap de habilidades de frontend engineer para 2026

El frontend en 2026 es React o uno de sus rivales, TypeScript por defecto, un bundler que entrega bundles pequeños y una obsesión con Core Web Vitals. Este roadmap muestra el stack exacto, las soft skills por las que pagan los equipos de producto y el plan de 12 meses para pasar de principiante a un frontend engineer que entrega.

El mercado laboral del frontend se ha dividido en dos carriles. Carril uno: ingenieros de producto que son dueños de las funcionalidades de cara al usuario de principio a fin, de Figma al deploy. Carril dos: ingenieros de plataforma que construyen el design system, el pipeline de build y la estrategia de rendering que usan los demás ingenieros de producto. La mayoría de las contrataciones de 2026 son del carril uno. Este roadmap apunta a esa ruta, con notas sobre cómo deslizarse hacia plataforma más adelante.

Quién es un frontend engineer en 2026

Un frontend engineer construye la interfaz que los usuarios realmente tocan. En 2026 eso significa:

• Traducir diseños de Figma a componentes React/Vue/Svelte accesibles y de buen rendimiento.
• Ser dueño del estado del cliente, el data fetching y los estados de carga/error/vacío de cada pantalla.
• Alcanzar los objetivos de Core Web Vitals (LCP < 2,5s, INP < 200ms, CLS < 0,1) en dispositivos de usuarios reales, no solo en localhost.
• Escribir tests unitarios con Vitest/Jest, tests de componentes con Testing Library y al menos E2E básico con Playwright o Cypress.
• Trabajar con los backend engineers para dar forma a contratos de API que no obliguen al cliente a diez round-trips.

Frontend junior significa «puede construir el componente que alguien diseñó». Nivel mid significa «puede construir la funcionalidad cuando el diseño tiene huecos». Senior significa «puede decidir qué debería ser la funcionalidad cuando producto no lo tiene claro».

Stack base — qué aprender de verdad

Soft skills y pensamiento de sistemas

• Empatía con el diseño. Lea bien Figma, haga las preguntas correctas a los diseñadores, plante cara a patrones que no funcionarán en móvil ni con lectores de pantalla.
• Negociación de APIs. Los backend engineers le entregarán APIs que obligan a tres round-trips. Un buen frontend engineer pide el endpoint adecuado en lugar de aceptar el camino lento.
• Disciplina de carga/error/vacío. Cada pantalla tiene cuatro estados, no uno. Los frontend engineers de nivel mid entregan los cuatro por defecto.
• Presupuestos de rendimiento. Trate el tamaño del bundle y los Core Web Vitals como restricciones, no como algo secundario. Los frontends senior fijan el presupuesto para el equipo.
• La realidad cross-browser. Safari sigue siendo raro. Pruebe en dispositivos reales, no solo con el throttling de Chrome DevTools.

Plan sugerido de 3 / 6 / 12 meses

Meses 1–3: fundamentos

• Domine HTML/CSS/JS sin framework primero. Construya tres proyectos pequeños en JavaScript vanilla (tareas, tiempo, búsqueda según escribe).
• Elija TypeScript pronto. Ponga strict: true desde el primer día.
• Aprenda React o Vue. Construya una app de tutorial y luego reconstrúyala sin el tutorial.
• Aprenda Git y despliegue algo en Vercel o Netlify.

Meses 4–6: una app de portafolio real

• Construya una SPA o app de Next.js de calidad de producción: auth, data fetching, formularios, routing, desplegada.
• Añada tests — al menos 10 tests de componentes y 2 flujos E2E.
• Alcance los objetivos de Core Web Vitals en la versión desplegada. Documéntelo con capturas de Lighthouse.
• Hágala accesible: la navegación por teclado funciona, axe DevTools muestra cero violaciones.

Meses 7–12: profundidad y entrevistas

• Lea la documentación de React de principio a fin. Lea un libro o curso centrado en rendimiento (Frontend Masters tiene buenos).
• Contribuya con un PR a un proyecto frontend OSS — una librería de componentes o un framework.
• Practique system design de frontend: diseñe Twitter, diseñe un widget de chat, diseñe una galería de imágenes. La estructura es distinta del system design de backend.
• Postule con un sitio de portafolio que cargue en <1,5s en móvil. Los hiring managers lo prueban.

Proyectos personales para construir

• Un formulario complejo. Multi-paso, validación, autoguardado, subida de archivos. A las entrevistas de frontend les encantan los formularios.
• Un dashboard en tiempo real. WebSockets o SSE, gráficos, UI optimista. Demuestra habilidad con datos y UI a la vez.
• Un design system pequeño. 8–12 componentes en Storybook, documentados, testeados. Señala que puede trabajar en plataforma.
• Una UI de chat con streaming de IA. Tokens en streaming, historial de mensajes, recuperación de errores. A las contrataciones de 2026 les encanta esto.

Presupuestos de rendimiento y Core Web Vitals en la práctica

El rendimiento es el lugar más fácil para que un candidato de frontend destaque en 2026 porque la mayoría de los candidatos no mide. Los hiring managers detectan la diferencia en los primeros treinta segundos al abrir un sitio de portafolio.

• Fije un presupuesto antes de escribir código. 150 KB de JS, 75 KB de CSS, LCP por debajo de 2,0s en una conexión 4G. Números, no sensaciones.
• Mida en dispositivos reales. El throttling de Chrome DevTools miente. Use un Android de gama media real (o BrowserStack) para los números de verdad.
• Rastree regresiones en CI. Lighthouse CI en cada PR, falle el build cuando el LCP empeore 200ms o el bundle crezca 20 KB.
• Las cuatro mayores victorias. Haga tree-shake de los exports sin usar, lazy-load de los componentes bajo el pliegue, optimice imágenes con next/image o unpic, entregue un solo peso de fuente con font-display: swap.
• Server Components cuando ayudan. El App Router de Next.js recorta drásticamente el JS de cliente en páginas con mucho contenido. No los use solo porque existen; úselos cuando entregan menos código.

Una respuesta de entrevista como «reduje el LCP de 3,4s a 1,6s en la página de marketing con lazy-load del carrusel e inlining del CSS crítico» es el tipo de evidencia específica que cierra procesos.

Cómo conseguir el puesto de frontend

• Un sitio de portafolio que demuestre su oficio. Sitio personal que saque 100 en Lighthouse y 95+ en accesibilidad. El propio portafolio es el currículum.
• GitHub con uno o dos repos pulidos. Más grandes que un «clon de tutorial», más pequeños que una «cosa ambiciosa y abandonada».
• Keywords de currículum. React, TypeScript, Next.js, Tailwind, Vitest, Playwright, Lighthouse, accesibilidad, Core Web Vitals.
• Rondas de entrevista: coding (componente o JavaScript vanilla), system design de frontend, comportamiento, a veces un take-home. Practique las cuatro.
• El take-home. Si le dan uno, entréguelo como si fuera producción: README, tests, comprobación de accesibilidad, enlace desplegado. El 80 % de los candidatos se salta esto; el 80 % de las ofertas va a candidatos que no lo hacen.

FAQ