Mock interview de frontend developer — practique con IA

Las entrevistas de frontend sondean dos cosas a la vez: si usted envía UI y si entiende qué ocurre realmente cuando un navegador renderiza una página. Las preguntas que deciden las ofertas suelen situarse en la costura — «¿por qué esto es lento?», «¿por qué esto es inaccesible?», «¿por qué este estado no se actualiza?». Esta guía muestra cómo usar los mocks con IA para practicar las respuestas hasta que sean automáticas.

La forma de una entrevista de frontend moderna

Un proceso de frontend típico tiene cuatro etapas: una llamada de screening con el recruiter, un screening técnico (45–60 minutos, un ingeniero preguntándole por su stack y su experiencia de shipping), un ejercicio de take-home o de código en vivo, y un proceso presencial o virtual con 3–5 rondas (código, system design para UI, behavioral, a veces una crítica de diseño). Los procesos senior añaden una ronda de arquitectura en la que debe defender un sistema de UI frente a alguien que intenta romperlo.

Los mocks con IA ayudan sobre todo con el screening técnico y la ronda de system design de UI. Ambas son, en su mayor parte, conversación. Los ejercicios de código debería practicarlos en un editor real — los mocks con IA son malos dándole el bucle de retroalimentación de «¿esto realmente se ejecutó?». Para las rondas de entrevista donde la respuesta son párrafos («describe cómo React reconcilia una lista» o «llévame por cómo harías esta página más rápida»), los mocks con IA reproducen el formato casi a la perfección.

JavaScript y TypeScript: qué sondean realmente los entrevistadores

Las preguntas clásicas de JS siguen apareciendo porque siguen funcionando como filtros. Closures, hoisting, el binding de this, el event loop, micro- frente a macrotareas, promises frente a async/await, la diferencia entre == y === — todas expectativas razonables. Pero las preguntas interesantes están una capa más profunda. No «qué es un closure», sino «¿por qué este setTimeout dentro de un bucle for imprime el número equivocado y cómo lo arreglas de tres formas distintas?».

Preguntas de TypeScript que debería saber responder

• Diferencia entre interface y type, y cuándo es correcto cada uno.
• Qué le da unknown que any no le da.
• Cómo las uniones discriminadas estrechan tipos en la práctica.
• Cuándo ayudan los genéricos y cuándo hacen el código ilegible.
• Qué hace as const y por qué recurriría a él.

La trampa que evitar: no cite la documentación al pie de la letra. Los entrevistadores lo notan. Hable de código real — «usé una unión discriminada el trimestre pasado para nuestros tipos de estado de pago porque el compilador detectó un bug en el que olvidamos manejar el caso de reembolso».

React y Vue: preguntas a nivel de framework

React

Espere reconciliación, las reglas de los hooks, qué causa un re-render, por qué useEffect con el array de dependencias equivocado rompe cosas, en qué se diferencian useMemo y useCallback en la práctica, cuándo elevar el estado y cuándo colocarlo, server components frente a client components si se entrevista para un rol de Next.js. El modo de fallo más común: los candidatos explican las reglas de los hooks pero no saben decir por qué existen las reglas. La razón es que React usa el orden de llamada para asociar las llamadas a hooks con el estado — rompa el orden y rompe la asociación.

Las preguntas de React a nivel senior empujan hacia el rendimiento y la arquitectura. ¿Cómo haría desplazable una lista de 10 000 elementos sin perder frames? ¿Cuándo ayuda la virtualización y cuándo perjudica? ¿Cómo mide si un memo realmente ayuda o solo añade sobrecarga? El mock con IA hará preguntas de seguimiento — si dice «usaría virtualización», espere «con qué librería, por qué esa y qué le cuesta?».

Vue

Temas específicos de Vue 3: la composition API frente a la options API, cuándo se rompe la reactividad (asignar a un índice, reemplazar todo el array), ref frente a reactive, en qué se diferencia la reactividad basada en proxy de la de React. A los entrevistadores de Vue les encanta preguntar por los gotchas de la reactividad porque el modelo es más «mágico» que el de React, y los modelos mágicos tienen más bordes.

Internals del navegador, rendimiento, accesibilidad

Internals del navegador

El DOM es un árbol, el CSSOM es un árbol, el render tree es lo que realmente pinta. Invalidación de estilos, layout (reflow), paint, composite — conozca el pipeline y qué dispara cada etapa. Una pregunta de entrevista fiable: «¿por qué animar top es malo y animar transform es bueno?». Respuesta: transform se salta layout y paint, se ejecuta en el hilo del compositor.

Rendimiento

Los Core Web Vitals importan a cualquiera que tenga un sitio público. LCP, INP (que reemplazó a FID a principios de 2024), CLS — esté listo para definir cada uno, decir con qué comportamiento del usuario se correlaciona y nombrar una o dos formas de mejorar cada uno. Bundle splitting, lazy loading de rutas, elección de formato de imagen (AVIF/WebP), fetchpriority, los resource hints (preload, preconnect, dns-prefetch). Si alguna vez ha enviado una mejora de rendimiento y tiene la métrica de antes/después, empiece por ahí.

Accesibilidad

Orden de navegación por teclado, focus traps para modales, roles ARIA frente a HTML semántico (prefiera el semántico), ratios de contraste de color (4.5:1 para texto de cuerpo, 3:1 para texto grande), comportamiento del lector de pantalla con contenido dinámico (aria-live), nombres accesibles para botones solo de icono. Una pregunta trampa habitual: «¿es accesible un div con onclick?» — respuesta: no, necesita tabindex, manejadores de teclado y un role, o simplemente use un button.

Rondas behavioral: no las subestime

Los candidatos de frontend pierden ofertas habitualmente en la ronda behavioral porque la tratan como una charla informal. No lo es. Espere: una historia sobre una decisión técnica difícil, una historia sobre un conflicto cross-funcional (diseñador frente a ingeniero es el escenario canónico de frontend), una historia sobre haber enviado algo con un plazo ajustado, una historia sobre un incidente en producción. Tenga tres o cuatro historias listas que pueda adaptar — formato STAR (Situación, Tarea, Acción, Resultado), siendo el Resultado una métrica o un desenlace concreto.

Una trampa específica de frontend: cuando le pidan «cuéntame una decisión técnica difícil», los candidatos suelen elegir una migración de framework (React a Vue, Webpack a Vite). Eso está bien, pero es genérico. Una historia más fuerte es un tradeoff específico de UI/UX — «enviamos una función con actualizaciones optimistas y aceptamos un parpadeo ocasional de reconciliación porque la ganancia de latencia valía más que el pulido visual». Real, específico y revela criterio. Consulte nuestra guía de práctica de entrevista behavioral para el marco STAR completo.

Preguntas frecuentes