Colloqui di system design frontend

Nei colloqui per sviluppatori frontend senior le viene chiesto di progettare una funzionalità UI non banale dall'inizio alla fine: feed di notizie, autocomplete, galleria di immagini, dashboard con scorrimento infinito. Vengono valutati l'architettura, la consapevolezza dei compromessi, l'attenzione alle prestazioni e la capacità di comunicare, non le nozioni sui framework.

La maggior parte dei colloqui di 45-60 minuti segue questo schema: 1) Chiarimento dei requisiti (5 min). 2) Abbozzo dell'architettura di alto livello (10 min). 3) Suddivisione in componenti (10 min). 4) Recupero dei dati + stato (10 min). 5) Prestazioni + accessibilità (10 min). 6) Approfondimento di un'area (a scelta dell'intervistatore).

Non inizi a scrivere codice. Chieda: dispositivi target? accesso con login o anonimo? supporto offline? aggiornamenti in tempo reale? scala prevista (10 utenti contro 10 milioni)? requisiti di accessibilità? browser supportati? Sono decisioni che si ripercuotono sull'intero progetto.

Disegni i riquadri: client (SPA o SSR?), API gateway, servizi, cache, CDN. Indichi le azioni dell'utente e il flusso dei dati. Menzioni subito i casi limite: dimostrano che ha realizzato sistemi reali.

Abbozzi una gerarchia di componenti. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Identifichi quali componenti sono riutilizzabili e quali sono specifici della funzionalità.

Dove risiede ogni elemento dello stato? Stato locale (useState), URL (router), stato del server (React Query), stato del client (Zustand)? Discuta la strategia di recupero: SSR iniziale, scorrimento infinito, aggiornamenti WebSocket in tempo reale, interfaccia ottimistica.

Applichi il code splitting ai confini delle route. Utilizzi liste virtualizzate per i feed lunghi. Ottimizzi le immagini (caricamento lazy + AVIF/WebP). Eviti di bloccare il main thread. Definisca budget per il bundle. Utilizzi un service worker (SW) con strategia cache-first per le visite successive.

HTML semantico. Navigazione da tastiera. Ruoli ARIA e live region. Contrasto cromatico. Test con screen reader. Come punto extra, citi la gestione del focus durante il cambio di route.

Discuta: scorrimento infinito con IntersectionObserver, virtualizzazione per ridurre l'uso della memoria, like ottimistici, indicatore dei nuovi post in tempo reale, caricamento lazy delle immagini con placeholder sfocato, SSR per la SEO, caching ISR/edge per le timeline più visitate.

Discuta: input con debounce, AbortController per annullare le richieste obsolete, deduplicazione delle richieste, caching delle risposte (LRU), navigazione da tastiera (su/giù/invio/esc), ruoli ARIA di combobox, gestione della tastiera virtuale mobile.

Discuta: layout masonry o a griglia, srcset responsive per display retina, caricamento lazy basato sull'intersezione, prefetch dell'immagine successiva, lightbox/modal con focus trap, gesti swipe su dispositivi mobili, navigazione da tastiera con le frecce, deep linking.

Per ogni scelta, menzioni l'alternativa e spieghi perché ha scelto quella soluzione. «Userei IntersectionObserver per il caricamento lazy perché è nativo ed efficiente. Alternativa: listener di scroll con throttle, più semplice ma meno fluido sulle CPU lente.» È questo che gli intervistatori senior apprezzano.

1) Iniziare a scrivere codice prima di aver chiarito i requisiti. 2) Ignorare l'accessibilità. 3) Dimenticare gli stati di errore (problemi di rete, risultati vuoti). 4) Non considerare gli stati di caricamento. 5) Dare risposte vaghe («Userei React»: quale architettura?).

In un colloquio di system design le viene chiesto di progettare una casella di ricerca con autocomplete. Qual è la prima cosa che dovrebbe fare?

Chiarisca prima l'ambito. Architettura di alto livello (client, API, cache, CDN). Albero dei componenti. Posizione dello stato (locale, URL, cache del server, globale). Strategia di recupero dei dati. Prestazioni (code splitting, virtualizzazione, ottimizzazione delle immagini). Accessibilità (tastiera, ARIA, contrasto). Comunichi i compromessi. Eviti di passare subito al codice. Faccia pratica con i pattern classici: feed, autocomplete, galleria, dashboard.