Systemdesignintervjuer för frontend

I intervjuer för seniora frontendutvecklare ska ni utforma en icke-trivial UI-funktion från början till slut: nyhetsflöde, autoslutförande, bildgalleri eller dashboard med oändlig scrollning. Intervjuarna bedömer arkitektur, förståelse för avvägningar, känsla för prestanda och kommunikation — inte ramverkstrivia.

De flesta intervjuer på 45–60 minuter följer denna struktur: 1) Klargör krav (5 min). 2) Skissa en övergripande arkitektur (10 min). 3) Bryt ner komponenterna (10 min). 4) Datahämtning och state (10 min). 5) Prestanda och tillgänglighet (10 min). 6) Fördjupning inom ett område (intervjuarens val).

Börja inte koda. Fråga: vilka enheter ska stödjas? inloggning eller anonym åtkomst? stöd för offline? realtidsuppdateringar? förväntad skala (10 användare jämfört med 10 miljoner)? tillgänglighetskrav? webbläsarstöd? Det är beslut som påverkar hela designen.

Rita rutorna: klient (SPA eller SSR?), API-gateway, tjänster, cache och CDN. Markera användaråtgärderna och dataflödet. Nämn kantfall tidigt — det visar att ni har byggt verkliga system.

Skissa en komponenthierarki. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Identifiera vilka komponenter som kan återanvändas och vilka som är specifika för funktionen.

Var ska varje del av state ligga? Lokalt (useState), i URL:en (router), som server-state (React Query) eller som klient-state (Zustand)? Diskutera strategi för datahämtning: initial SSR, oändlig scrollning, realtidsuppdateringar via WebSocket och optimistiskt UI.

Code splitting vid route-gränser. Virtualisering för långa flöden. Bildoptimering (lazy load + AVIF/WebP). Undvik att blockera huvudtråden. Budgetar för paketstorlek. Cache-first-SW för återkommande besök.

Semantisk HTML. Tangentbordsnavigering. ARIA-roller och live-regioner. Färgkontrast. Testning med skärmläsare. Extra plus: nämn fokushantering vid route-byten.

Diskutera: oändlig scrollning med IntersectionObserver, virtualisering för att spara minne, optimistiska gilla-markeringar, indikator för nya inlägg i realtid, lazy load av bilder med suddig platshållare, SSR för SEO samt ISR-/edge-cachning för populära tidslinjer.

Diskutera: debounced inmatning, AbortController för att avbryta inaktuella förfrågningar, deduplicering av förfrågningar, cachning av svar (LRU), tangentbordsnavigering (upp/ner/enter/escape), ARIA-roller för combobox och hantering av virtuella tangentbord på mobiler.

Diskutera: masonry- eller grid-layout, responsiv srcset för retina, lat inläsning baserad på intersection, förinläsning av nästa bild, lightbox/modal med fokusfälla, svepgester på mobiler, navigering med piltangenter och deep linking.

För varje val ska ni nämna alternativet och varför ni valde det ena. ”Jag skulle använda IntersectionObserver för lazy loading eftersom det är inbyggt och effektivt. Alternativet är en scroll-lyssnare med throttle — enklare men med mer hackig respons på långsamma processorer.” Det är sådant seniora intervjuare belönar.

1) Börja skriva kod innan kraven har klargjorts. 2) Ignorera tillgänglighet. 3) Glömma fellägen (nätverksfel, tomma resultat). 4) Inte tänka på laddningstillstånd. 5) Ge vaga svar (”Jag skulle använda React” — vilken arkitektur?).

Klargör omfattningen först. Övergripande arkitektur (klient, API, cache, CDN). Komponentträd. Var state ska ligga (lokalt, URL, servercache, globalt). Strategi för datahämtning. Prestanda (code splitting, virtualisering, bildoptimering). Tillgänglighet (tangentbord, ARIA, kontrast). Kommunicera avvägningar. Hoppa inte direkt till koden. Öva på klassiska mönster: flöde, autoslutförande, galleri och dashboard.