Systemdesign-Interviews für Frontend-Entwicklung

In Senior-Frontend-Interviews sollen Sie eine nicht triviale UI-Funktion von Anfang bis Ende entwerfen: einen Newsfeed, eine Autovervollständigung, eine Bildergalerie oder ein Dashboard mit Infinite Scroll. Bewertet werden Architektur, Bewusstsein für Kompromisse, ein Gespür für Performance und Kommunikation — nicht Framework-Trivia.

Die meisten 45- bis 60-minütigen Interviews folgen diesem Ablauf: 1) Anforderungen klären (5 Min.). 2) Architektur auf hoher Ebene skizzieren (10 Min.). 3) Komponenten aufschlüsseln (10 Min.). 4) Datenabruf und State (10 Min.). 5) Performance und Barrierefreiheit (10 Min.). 6) Vertiefung eines Bereichs (nach Wahl der interviewenden Person).

Beginnen Sie nicht mit dem Programmieren. Fragen Sie: Welche Zielgeräte? Angemeldete oder anonyme Nutzung? Offline-Unterstützung? Echtzeitaktualisierungen? Erwartete Größenordnung (10 Benutzer oder 10 Mio.)? Anforderungen an die Barrierefreiheit? Browser-Unterstützung? Diese Entscheidungen wirken sich auf den gesamten Entwurf aus.

Zeichnen Sie die Bausteine: Client (SPA oder SSR?), API-Gateway, Services, Cache, CDN. Kennzeichnen Sie die Aktionen der Benutzer und den Datenfluss. Erwähnen Sie Sonderfälle früh — das zeigt, dass Sie bereits reale Systeme entwickelt haben.

Skizzieren Sie eine Komponenten-Hierarchie. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Bestimmen Sie, welche Komponenten wiederverwendbar und welche spezifisch für diese Funktion sind.

Wo befindet sich jeder Teil des States? Lokal (useState), in der URL (Router), im Server-State (React Query) oder im Client-State (Zustand)? Besprechen Sie die Strategie für den Datenabruf: initiales SSR, Infinite Scroll, Echtzeitaktualisierungen per WebSocket und optimistische UI.

Code-Splitting an den Grenzen von Routen. Virtualisierte Listen für lange Feeds. Bildoptimierung (Lazy Loading + AVIF/WebP). Blockierungen des Main Threads vermeiden. Bundle-Budgets. Cache-First-SW für wiederholte Besuche.

Semantisches HTML. Tastaturnavigation. ARIA-Rollen und Live-Regionen. Farbkontrast. Tests mit Screenreadern. Zusatzpunkte gibt es für den Hinweis auf Fokusverwaltung beim Routenwechsel.

Besprechen Sie: Infinite Scroll mit IntersectionObserver, Virtualisierung zur Speichereinsparung, optimistische Likes, einen Echtzeit-Hinweis auf neue Beiträge, Lazy Loading von Bildern mit unscharfem Platzhalter, SSR für SEO sowie ISR-/Edge-Caching für stark frequentierte Timelines.

Besprechen Sie: verzögertes Auslösen der Eingabe per Debounce, AbortController zum Abbrechen veralteter Anfragen, Deduplizierung von Anfragen, Antwort-Caching (LRU), Tastaturnavigation (Pfeil nach oben/unten/Eingabe/Escape), ARIA-Combobox-Rollen und den Umgang mit der virtuellen Tastatur auf Mobilgeräten.

Besprechen Sie: Masonry- oder Grid-Layout, responsives srcset für Retina-Displays, Intersection-basiertes Lazy Loading, das Vorabladen des nächsten Bildes, eine Lightbox/ein Modal mit Fokusfalle, Wischgesten auf Mobilgeräten, Tastaturnavigation mit den Pfeiltasten und Deep Linking.

Nennen Sie bei jeder Entscheidung die Alternative und begründen Sie Ihre Wahl. „Ich würde IntersectionObserver für Lazy Loading verwenden, weil es nativ und effizient ist. Alternative: ein Scroll-Listener mit Throttling — einfacher, aber auf langsamen CPUs ruckeliger.“ Das honorieren Senior-Interviewende.

1) Mit dem Programmieren beginnen, bevor die Anforderungen geklärt sind. 2) Barrierefreiheit ignorieren. 3) Fehlerzustände vergessen (Netzwerkfehler, leere Ergebnisse). 4) Ladezustände nicht berücksichtigen. 5) Vage Antworten geben („Ich würde React verwenden“ — aber welche Architektur?).

Sie sollen in einem Systemdesign-Interview ein Suchfeld mit Autovervollständigung entwerfen. Was sollten Sie als Erstes tun?

Klären Sie zuerst den Umfang. Architektur auf hoher Ebene (Client, API, Cache, CDN). Komponentenbaum. Ort des States (lokal, URL, Server-Cache, global). Strategie für den Datenabruf. Performance (Code-Splitting, Virtualisierung, Bildoptimierung). Barrierefreiheit (Tastatur, ARIA, Kontrast). Kommunizieren Sie Kompromisse. Springen Sie nicht direkt zum Code. Üben Sie klassische Muster: Feed, Autovervollständigung, Galerie und Dashboard.