Interviewfragen zu Entwurfsmustern mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

Entwurfsmuster · Junior

1. Was ist ein Entwurfsmuster?
   ▸Antwort zeigen

   Richtige Antwort: Eine typische Lösung für ein wiederkehrendes Entwurfsproblem

   Ein Muster ist kein Code, sondern die Beschreibung einer Idee: welches Problem es löst, aus welchen Teilen die Lösung besteht und welche Vor- und Nachteile sie hat. Die Umsetzung hängt von Sprache und Kontext ab. Wer Muster kennt, hat im Team ein gemeinsames Vokabular: „hier brauchen wir eine Strategy“ ist ohne lange Erklärungen klar.

2. In welche drei Gruppen werden die klassischen GoF-Muster eingeteilt?
   ▸Antwort zeigen

   Richtige Antwort: Erzeugungs-, Struktur- und Verhaltensmuster

   Erzeugungsmuster befassen sich mit dem Erzeugen von Objekten (Factory, Builder, Singleton), Strukturmuster mit dem Zusammensetzen von Objekten (Adapter, Decorator, Facade), Verhaltensmuster mit Zusammenspiel und Aufgabenverteilung (Observer, Strategy, Command). Das Buch der „Gang of Four“ (1994) beschrieb 23 Muster.

3. Was garantiert das Singleton-Muster?
   ▸Antwort zeigen

   Richtige Antwort: Eine Klasse hat nur eine Instanz und einen globalen Zugriffspunkt darauf

   Beispiele: ein API-Client, ein Logger, eine DB-Verbindung. In JS ist das einfachste Singleton ein Modul: export const api = new ApiClient() - ein Modul läuft einmal, und alle Importierenden bekommen dasselbe Objekt.

4. Warum nennt man Singleton oft ein Anti-Pattern?
   ▸Antwort zeigen

   Richtige Antwort: Es bringt versteckten globalen Zustand und erschwert das Testen

   Code, der direkt auf ein Singleton zugreift, hängt implizit davon ab: Tests beeinflussen sich gegenseitig, und die Implementierung lässt sich schwer tauschen. Ein Kompromiss ist, eine Instanz zu erzeugen, sie aber explizit zu übergeben (Dependency Injection), damit Tests ein Mock einsetzen können.

Entwurfsmuster · Middle

1. Wie unterscheidet sich Decorator von Proxy, wenn ihre Struktur ähnlich ist?
   ▸Antwort zeigen

   Richtige Antwort: Durch die Absicht: Decorator fügt Verhalten hinzu, Proxy steuert den Zugriff

   Beide umhüllen ein Objekt mit derselben Schnittstelle. Decorators stapelt man meist, um Funktionalität aufzubauen (Logging + Cache + Retry). Ein Proxy verwaltet Lebenszyklus und Zugriff: Lazy Loading, Rechteprüfungen, ein entferntes Objekt. Viele Muster unterscheiden sich genau durch ihr Ziel.

2. Wie unterscheidet sich Adapter von Facade?
   ▸Antwort zeigen

   Richtige Antwort: Adapter passt eine Schnittstelle an, Facade vereinfacht ein Subsystem

   Ein Adapter umhüllt meist ein Objekt und macht es mit bestehendem Code kompatibel. Eine Facade definiert eine neue, einfachere Schnittstelle über vielen Objekten. In der Praxis verbindet eine API-Schicht oft beides: eine Facade über HTTP und Adapter für die Daten.

3. Wann passt eine Abstract Factory statt einer einfachen Factory?
   ▸Antwort zeigen

   Richtige Antwort: Wenn man Familien zusammengehöriger, kompatibler Objekte braucht

   Beispiel: ein UI-Kit für zwei Plattformen - die Factory erzeugt Button, Input und Modal in einem Stil, und sie lassen sich nicht mischen. Eine einfache Factory wählt ein Produkt anhand eines Parameters. Führe keine Abstract Factory ein, wenn es nur eine Familie gibt.

4. Was ist an einem Singleton auf Modulebene (export const cache = new Map()) in einer SSR-App gefährlich?
   ▸Antwort zeigen

   Richtige Antwort: Auf dem Server teilen alle Anfragen das Modul, Nutzerdaten vermischen sich

   Im Browser lebt eine Modulvariable innerhalb eines Tabs. Ein Serverprozess bedient Tausende Nutzer, und ein geteilter Cache oder Store auf Modulebene kann die Daten eines Nutzers einem anderen ausliefern. Anfragezustand wird pro Anfrage erzeugt (z. B. React cache(), ein QueryClient pro Anfrage).

Entwurfsmuster · Senior

1. Wie unterscheidet sich das Modell der „Signals“ (Solid, Preact Signals, Angular Signals) vom Modell von React?
   ▸Antwort zeigen

   Richtige Antwort: Nur abhängige Stellen aktualisieren sich, ohne die Komponente neu zu rendern

   Ein Signal ist ein reaktiver Wert (Observer): Lesen registriert eine Abhängigkeit, Schreiben aktualisiert genau seine Abonnenten (Text, ein Attribut, eine Berechnung). React dagegen rendert die Komponente neu und vergleicht den virtuellen Baum; der React Compiler senkt diese Kosten, aber das Modell ist ein anderes.

2. Was ist der Hauptkompromiss von Micro-Frontends?
   ▸Antwort zeigen

   Richtige Antwort: Unabhängige Teams und Deployments auf Kosten von Komplexität, Duplizierung und UX-Einheitlichkeit

   Micro-Frontends lohnen sich bei vielen autonomen Teams und einem großen Produkt: jeder Teil wird separat deployt. Der Preis sind doppelte Abhängigkeiten, komplexe Integration, gemeinsames Design, Routing und Kommunikation zwischen den Teilen. Kleinere Teams kommen meist mit einem modularen Monolithen aus.

3. Warum wird React in Module Federation als shared Singleton deklariert?
   ▸Antwort zeigen

   Richtige Antwort: Zwei Kopien von React in einer App brechen Hooks und Context

   Hooks und Context sind an eine bestimmte React-Instanz gebunden: eine Komponente aus einem Remote-Modul mit eigener Kopie verursacht „Invalid hook call“, und Contexts sind nicht sichtbar. Geteilte Singleton-Abhängigkeiten erfordern abgestimmte Versionen zwischen den Teams.

4. Wie funktioniert das Strangler-Fig-Muster bei der Migration eines Legacy-Frontends?
   ▸Antwort zeigen

   Richtige Antwort: Das neue System übernimmt nach und nach Routen und Features des alten, bis es verschwindet

   Zum Beispiel leitet ein Proxy /checkout zur neuen Next.js-App und alles andere zur alten. Die Risiken sind geringer als bei einem „großen Neuschreiben“: der Nutzen kommt schrittweise, und man kann bei jedem Schritt zurückrollen.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.