Entrevistas de diseño de sistemas frontend

En las entrevistas para puestos sénior de frontend se le pedirá diseñar de principio a fin una funcionalidad de interfaz no trivial: un feed de noticias, un autocompletado, una galería de imágenes o un dashboard con desplazamiento infinito. Se evalúan la arquitectura, la capacidad para valorar compromisos, el criterio de rendimiento y la comunicación, no los detalles específicos de un framework.

La mayoría de las entrevistas de 45 a 60 minutos siguen esta estructura: 1) Aclarar los requisitos (5 min). 2) Esbozar la arquitectura de alto nivel (10 min). 3) Desglosar los componentes (10 min). 4) Obtención de datos y estado (10 min). 5) Rendimiento y accesibilidad (10 min). 6) Profundizar en un área (a elección del entrevistador).

No empiece a programar. Pregunte: ¿qué dispositivos son el objetivo? ¿se requiere inicio de sesión o se permite el acceso anónimo? ¿se necesita compatibilidad sin conexión? ¿habrá actualizaciones en tiempo real? ¿cuál es la escala prevista (10 usuarios frente a 10 millones)? ¿qué requisitos de accesibilidad existen? ¿qué navegadores deben ser compatibles? Son decisiones que repercuten en todo el diseño.

Dibuje los bloques: cliente (¿SPA o SSR?), API gateway, servicios, caché y CDN. Marque las acciones del usuario y el flujo de datos. Mencione pronto los casos límite: demuestran que ha creado productos reales.

Esboce una jerarquía de componentes. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Identifique qué componentes son reutilizables y cuáles son específicos de la funcionalidad.

¿Dónde vive cada parte del estado? ¿En local (useState), en la URL (router), en el estado del servidor (React Query) o en el estado del cliente (Zustand)? Explique la estrategia de obtención: SSR inicial, desplazamiento infinito, actualizaciones en tiempo real mediante WebSocket e interfaz optimista.

División del código en los límites de las rutas. Listas virtualizadas para feeds largos. Optimización de imágenes (carga diferida + AVIF/WebP). Evitar bloquear el hilo principal. Presupuestos de bundle. SW con estrategia de caché primero para las visitas repetidas.

HTML semántico. Navegación con teclado. Roles ARIA y regiones dinámicas. Contraste de color. Pruebas con lectores de pantalla. Puntos extra: mencione la gestión del foco al cambiar de ruta.

Analice: desplazamiento infinito con IntersectionObserver, virtualización para reducir el uso de memoria, likes optimistas, indicador de nuevas publicaciones en tiempo real, carga diferida de imágenes con marcador de posición desenfocado, SSR para SEO y caché ISR/en el edge para líneas de tiempo con mucho tráfico.

Analice: entrada con debounce, AbortController para cancelar solicitudes obsoletas, deduplicación de solicitudes, caché de respuestas (LRU), navegación con el teclado (arriba/abajo/enter/escape), roles ARIA de combobox y gestión del teclado virtual en dispositivos móviles.

Analice: diseño masonry frente a grid, srcset adaptable para pantallas retina, carga diferida basada en intersecciones, precarga de la siguiente imagen, lightbox/modal con trampa de foco, gestos de deslizamiento en dispositivos móviles, navegación con las flechas del teclado y enlaces profundos.

Para cada decisión, mencione la alternativa y explique por qué ha elegido una opción. «Usaría IntersectionObserver para la carga diferida porque es nativo y eficiente. Alternativa: un listener de scroll con throttle; es más sencillo, pero produce más tirones en CPU lentas». Esto es lo que valoran los entrevistadores sénior.

1) Empezar a escribir código antes de aclarar los requisitos. 2) Ignorar la accesibilidad. 3) Olvidar los estados de error (fallo de red, resultados vacíos). 4) No pensar en los estados de carga. 5) Dar respuestas vagas («Usaría React»: ¿qué arquitectura?).

Le piden diseñar un cuadro de búsqueda con autocompletado en una entrevista de diseño de sistemas. ¿Qué es lo primero que debería hacer?

Aclare primero el alcance. Arquitectura de alto nivel (cliente, API, caché y CDN). Árbol de componentes. Ubicación del estado (local, URL, caché del servidor y global). Estrategia de obtención de datos. Rendimiento (división del código, virtualización y optimización de imágenes). Accesibilidad (teclado, ARIA y contraste). Comunique los compromisos. Evite saltar directamente al código. Practique patrones clásicos: feed, autocompletado, galería y dashboard.