Vorstellungsgespräch Fragen für Junior Frontend Entwickler: React, Tools & Fortgeschrittene Themen

Einführung

Dieser umfassende Leitfaden enthält 21 sorgfältig ausgewählte Interviewfragen zu fortgeschrittenen Frontend-Entwicklungsthemen: React und Frameworks, Build-Tools und Versionskontrolle, Performance-Optimierung, Debugging, Barrierefreiheit, Testing und Soft Skills. Dies sind die Fragen, denen Junior Frontend Entwickler in den Jahren 2024-2025 tatsächlich in Vorstellungsgesprächen begegnen. Jede Frage beinhaltet eine ausführliche Antwort, eine Seltenheitsbewertung und eine Schwierigkeitsstufe, basierend auf der Analyse von Hunderten von realen Interviews von großen Technologieunternehmen und Startups.

Dies ist Teil 2 unseres kompletten Interviewleitfadens. Für die Grundlagen von HTML, CSS und JavaScript schau dir Teil 1: HTML, CSS & JavaScript Grundlagen an.

React & Frameworks (8 Fragen)

33. Was ist JSX und warum verwenden wir es in React?

Antwort: JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die HTML ähnlich sieht und verwendet wird, um die UI-Struktur in React zu beschreiben.

Beispiel:

const element = <h1 className="title">Hallo, {name}!</h1>;

// Wird kompiliert zu:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hallo, ',
  name,
  '!'
);

Vorteile:

• Lesbarer und intuitiver als React.createElement()
• Sieht aus wie HTML, aber mit voller JavaScript-Power
• Unterstützt Ausdrücke innerhalb von geschweiften Klammern {}
• Typsicher bei Verwendung von TypeScript
• Vertraute Syntax für Entwickler

Wesentliche Unterschiede zu HTML:

• Verwende className anstelle von class
• Verwende htmlFor anstelle von for
• Alle Attribute sind camelCase (onClick, onChange)
• Alle Tags müssen geschlossen werden (einschließlich <img />, <br />)

Seltenheit: Häufig Schwierigkeit: Einfach

34. Erkläre den Unterschied zwischen Props und State in React

Antwort:

Props (Properties/Eigenschaften):

• Daten, die VON übergeordneten ZU untergeordneten Komponenten übergeben werden
• Schreibgeschützt (unveränderlich aus Sicht der untergeordneten Komponente)
• Wird zur Konfiguration von Komponenten verwendet
• Änderungen kommen von der erneuten Darstellung der übergeordneten Komponente (Re-Rendering)

// Übergeordnete Komponente
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Untergeordnete Komponente
function Child({ name, age }) {
  return <p>{name} ist {age} Jahre alt</p>;
  // Kann name oder age nicht ändern
}

State (Zustand):

• Daten, die INNERHALB einer Komponente verwaltet werden
• Veränderlich (kann mit einer Setter-Funktion geändert werden)
• Änderungen lösen Re-Renders aus
• Privat für die Komponente

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Zähler: {count}
    </button>
  );
}

Wesentlicher Unterschied: Props fließen nach unten (von der übergeordneten zur untergeordneten Komponente), State ist lokal für die Komponente.

Seltenheit: Häufig Schwierigkeit: Einfach

35. Was ist der useState-Hook und wie verwendest du ihn?

Antwort: useState ist ein React Hook, der funktionalen Komponenten State-Management hinzufügt.

Syntax:

const [stateVariable, setStateFunction] = useState(initialValue);

Beispiele:

// Einfacher Zähler
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
      <button onClick={() => setCount(0)}>Zurücksetzen</button>
    </div>
  );
}

// Objekt-State
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Lazy Initialization (teure Berechnung)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

Wichtige Punkte:

• State-Aktualisierungen lösen Re-Renders aus
• State-Aktualisierungen sind asynchron
• Verwende funktionale Aktualisierungen für State, die auf dem vorherigen State basieren: setCount(prev => prev + 1)

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

36. Was macht der useEffect-Hook? Erkläre das Dependency Array.

Antwort: useEffect führt Side Effects nach dem Rendern aus (Datenabruf, Subscriptions, DOM-Manipulation).

Syntax:

useEffect(() => {
  // Side Effect Code hier
  
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

Verhalten des Dependency Arrays:

// 1. Kein Dependency Array - wird nach JEDEM Rendern ausgeführt
useEffect(() => {
  console.log('Wird bei jedem Rendern ausgeführt');
});

// 2. Leeres Array [] - wird EINMAL beim Mounten ausgeführt
useEffect(() => {
  console.log('Wird nur beim Mounten ausgeführt');
  fetchData();
}, []);

// 3. Mit Dependencies - wird ausgeführt, wenn sich Dependencies ändern
useEffect(() => {
  console.log('Wird ausgeführt, wenn sich count ändert');
  document.title = `Zähler: ${count}`;
}, [count]);

Häufige Anwendungsfälle:

// Daten abrufen
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Event Listener (mit Cleanup)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Seltenheit: Häufig Schwierigkeit: Mittel

37. Wie renderst du eine Liste von Elementen in React? Warum brauchen wir Keys?

Antwort:

Listen rendern:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Warum Keys wichtig sind: Keys helfen React zu identifizieren, welche Elemente sich geändert, hinzugefügt oder entfernt wurden. Sie ermöglichen effiziente Aktualisierungen durch:

• Minimierung der DOM-Manipulation
• Beibehaltung des Komponenten-States
• Aufrechterhaltung der korrekten Elementidentität
• Optimierung des Reconciliation-Algorithmus

Key-Richtlinien:

// GUT - Eindeutige, stabile IDs
items.map(item => <Item key={item.id} {...item} />)

// SCHLECHT - Array-Index (instabil, wenn sich die Liste ändert)
items.map((item, index) => <Item key={index} {...item} />)

// SCHLECHT - Nicht eindeutige Keys verursachen Fehler
items.map(item => <Item key={item.category} {...item} />)

Wann ein Index akzeptabel ist: Statische Listen, die sich nie neu anordnen oder ändern.

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

38. Was ist das Virtual DOM und warum verwendet React es?

Antwort: Das Virtual DOM ist eine leichtgewichtige JavaScript-Darstellung des tatsächlichen DOM, das React im Speicher verwaltet.

Wie es funktioniert:

1. Render: React erstellt einen Virtual DOM-Baum, wenn sich der State ändert
2. Diff: React vergleicht das neue Virtual DOM mit der vorherigen Version (Reconciliation)
3. Update: React berechnet die minimal erforderlichen Änderungen
4. Patch: React aktualisiert nur die geänderten Teile des echten DOM

Warum es vorteilhaft ist:

• Performance: Direkte DOM-Manipulation ist langsam; React bündelt und minimiert Aktualisierungen
• Effizienz: Aktualisiert nur geänderte Elemente, nicht den gesamten Baum
• Developer Experience: Schreibe deklarativen Code, React kümmert sich um effiziente Aktualisierungen
• Abstraktion: Derselbe Code kann verschiedene Plattformen ansprechen (React Native, VR)

Beispiel:

// Du schreibst:
<div>{count}</div>

// Wenn sich count von 0 auf 1 ändert:
// React aktualisiert nur den Textknoten, nicht den gesamten Div

Hinweis: Modernes React (Fiber-Architektur) vergleicht nicht buchstäblich zwei Virtual DOMs, sondern verwendet ein ähnliches Konzept mit Fiber-Knoten.

Seltenheit: Häufig Schwierigkeit: Mittel

39. Wie handhabst du Formulare in React?

Antwort:

Controlled Components (empfohlen): Formularelementwerte werden vom React-State gesteuert.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Verhindert das Neuladen der Seite
    console.log('Übermittelt:', formData);
    // API-Aufruf hier
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Uncontrolled Components (weniger verbreitet): Verwende Refs, um direkt auf DOM-Werte zuzugreifen.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Best Practice: Verwende Controlled Components in den meisten Fällen.

Seltenheit: Häufig Schwierigkeit: Mittel

40. Was ist der Unterschied zwischen Functional und Class Components?

Antwort:

Functional Components (Modern, bevorzugt):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Side Effects
  }, []);
  
  return <h1>Hallo, {name}!</h1>;
}

Class Components (Legacy):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Side Effects
  }
  
  render() {
    return <h1>Hallo, {this.props.name}!</h1>;
  }
}

Wesentliche Unterschiede:

• Syntax: Funktionen vs. Klassen
• State: Hooks (useState) vs. this.state
• Lifecycle: Hooks (useEffect) vs. Lifecycle-Methoden
• this Keyword: Nicht benötigt in Functional Components
• Boilerplate: Weniger Code in Functional Components
• Performance: Etwas besser mit Functional Components

Moderner Standard: Functional Components mit Hooks sind jetzt der empfohlene Ansatz (seit React 16.8). Class Components funktionieren weiterhin, gelten aber als Legacy.

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

Build Tools & Versionskontrolle (5 Fragen)

41. Was ist npm und wofür wird package.json verwendet?

Antwort: npm (Node Package Manager) ist der Standard-Paketmanager für JavaScript, der zum Installieren, Verwalten und Freigeben von Codepaketen verwendet wird.

package.json ist die Manifestdatei, die Folgendes enthält:

• Metadaten: Projektname, Version, Beschreibung, Autor
• Dependencies: Pakete, die für die Produktion benötigt werden (dependencies)
• DevDependencies: Pakete, die nur für die Entwicklung benötigt werden (devDependencies)
• Scripts: Befehle für allgemeine Aufgaben (start, build, test)

Beispiel package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Häufige Befehle:

• npm install - Installiert alle Abhängigkeiten
• npm install package-name - Installiert ein bestimmtes Paket
• npm install --save-dev package-name - Installiert als Dev-Dependency
• npm run script-name - Führt ein npm-Skript aus
• npm update - Aktualisiert Pakete

Seltenheit: Häufig Schwierigkeit: Einfach

42. Was ist Git und warum verwenden Teams es?

Antwort: Git ist ein verteiltes Versionskontrollsystem, das Änderungen im Code im Laufe der Zeit verfolgt.

Warum Teams Git verwenden:

• Zusammenarbeit: Mehrere Entwickler arbeiten an derselben Codebasis ohne Konflikte
• Historie: Vollständige Aufzeichnung aller Änderungen (wer, was, wann, warum)
• Branching: Arbeite unabhängig an Features, ohne den Hauptcode zu beeinträchtigen
• Backup: Code wird an mehreren Orten gespeichert (lokal + remote)
• Rollback: Einfaches Zurücksetzen auf frühere funktionierende Versionen
• Code Review: Überprüfe Änderungen vor dem Mergen (Pull Requests)
• Experimentieren: Probiere neue Ideen in Branches ohne Risiko aus

Grundlegende Konzepte:

• Repository (Repo): Projektordner, der von Git verfolgt wird
• Commit: Snapshot von Änderungen mit Nachricht
• Branch: Unabhängige Entwicklungslinie
• Merge: Kombinieren von Änderungen aus verschiedenen Branches
• Remote: Online gehostetes Repository (GitHub, GitLab)

Industriestandard: 93%+ der Entwickler weltweit verwenden Git.

Seltenheit: Häufig Schwierigkeit: Einfach

43. Erkläre gängige Git-Befehle und den Workflow

Antwort:

Grundlegender Workflow:

# Repository klonen
git clone https://github.com/user/repo.git

# Status prüfen
git status

# Neuen Branch erstellen
git checkout -b feature-name
# oder moderne Syntax:
git switch -c feature-name

# Änderungen vornehmen, dann stagen
git add file.js
git add .  # Alle Änderungen stagen

# Commit mit Nachricht
git commit -m "Login-Funktion hinzugefügt"

# Zum Remote pushen
git push origin feature-name

# Neueste Änderungen pullen
git pull origin main

# Branch mergen
git checkout main
git merge feature-name

# Historie anzeigen
git log

Wesentliche Befehle, die Juniors kennen müssen:

• clone - Remote-Repository kopieren
• add - Änderungen stagen
• commit - Snapshot mit Nachricht speichern
• push - Zum Remote hochladen
• pull - Remote-Änderungen herunterladen + mergen
• branch - Branches auflisten/erstellen
• checkout/switch - Branches wechseln
• status - Aktuellen Status anzeigen
• log - Commit-Historie anzeigen

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

44. Was ist ein Merge-Konflikt und wie würdest du ihn lösen?

Antwort: Ein Merge-Konflikt tritt auf, wenn Git Änderungen nicht automatisch mergen kann, da konkurrierende Änderungen in denselben Codezeilen vorhanden sind.

Häufiges Szenario:

# Entwickler A ändert Zeile 5
# Entwickler B ändert ebenfalls Zeile 5
# Beim Mergen weiß Git nicht, was beibehalten werden soll

Konfliktmarker:

<<<<<<< HEAD
const greeting = "Hallo";
=======
const greeting = "Hi";
>>>>>>> feature-branch

Lösungsschritte:

1. Konflikte identifizieren: Git markiert Dateien mit Konflikten
2. Konfliktdateien öffnen: Nach Konfliktmarkern suchen
3. Entscheiden, was beibehalten werden soll: Beide Änderungen überprüfen
4. Code bearbeiten: Marker entfernen, gewünschten Code beibehalten
5. Testen: Sicherstellen, dass der Code korrekt funktioniert
6. Gelöste Dateien stagen: git add file.js
7. Merge abschließen: git commit

Best Practices:

• Mit dem Team kommunizieren
• Häufig pullen, um Konflikte zu minimieren
• Commits klein und fokussiert halten
• Nach dem Lösen gründlich testen

Seltenheit: Häufig Schwierigkeit: Mittel

45. Was macht Webpack? Was ist Vite?

Antwort:

Webpack: Ein Modul-Bundler, der JavaScript, CSS, Bilder und andere Assets nimmt, sie verarbeitet und sie zu optimierten Dateien für den Browser bündelt.

Was es macht:

• Bündelt mehrere Dateien in weniger Dateien
• Transformiert Code (Babel für JSX/ES6, Sass zu CSS)
• Optimiert für die Produktion (Minifizierung, Tree Shaking)
• Verwaltet Abhängigkeiten
• Code Splitting für Performance

Grundlegendes Konzept:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (alles kombiniert & optimiert)

Vite: Ein modernes Build-Tool, das deutlich schneller ist als traditionelle Bundler wie Webpack.

Warum Vite schneller ist:

• Verwendet native ES-Module während der Entwicklung (kein Bundling erforderlich)
• Hot Module Replacement (HMR) ist sofortig
• Bündelt nur für die Produktion
• Bessere Developer Experience

Wann verwenden:

• Vite: Neue Projekte, moderne Frameworks (React, Vue)
• Webpack: Bestehende Projekte, komplexe Konfiguration erforderlich

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

Web Performance & Optimierung (3 Fragen)

46. Wie würdest du die Ladeperformance einer Website optimieren?

Antwort:

Bildoptimierung:

• Bilder komprimieren (JPG für Fotos, PNG für Grafiken, WebP für beides)
• Angemessene Größen verwenden (kein 4000px-Bild für 300px-Anzeige laden)
• Lazy Load für Bilder unterhalb des Falzes
• Verwende srcset für responsive Bilder

Code-Optimierung:

• JavaScript, CSS, HTML minifizieren (Leerzeichen, Kommentare entfernen)
• Dateien bündeln und komprimieren (gzip oder Brotli)
• Unverwendetes CSS/JS entfernen (Tree Shaking)
• Code Splitting (lade nur den benötigten Code pro Seite)

Caching:

• Browser-Caching mit den richtigen Cache-Headern
• CDN für statische Assets verwenden
• Service Worker für Offline-Funktionen

Ladestrategien:

• Critical CSS inline im <head>
• Nicht-kritisches JavaScript verzögern
• Wichtige Ressourcen vorab laden
• HTTP-Anfragen reduzieren

Performance-Metriken:

• Mit Lighthouse, PageSpeed Insights messen
• Ziel: FCP < 1,8s, LCP < 2,5s, CLS < 0,1

Seltenheit: Häufig Schwierigkeit: Mittel

47. Welche Tools würdest du verwenden, um die Website-Performance zu messen?

Antwort:

Browser DevTools:

• Chrome DevTools Network Tab: Analysiere Anfragezeiten, Dateigrößen, Ladereihenfolge
• Performance/Lighthouse Tab: Generiere Performance-Berichte mit Bewertungen
• Coverage Tab: Finde ungenutztes JavaScript/CSS
• Konsole: Mit console.time() und Performance API messen

Online-Tools:

• Google PageSpeed Insights: Erhalte Performance-Bewertungen und Empfehlungen
• WebPageTest: Detaillierte Waterfall Charts, mehrere Standorte
• GTmetrix: Performance-Analyse mit Noten

Zu überwachende Metriken:

• First Contentful Paint (FCP): Wann der erste Inhalt erscheint
• Largest Contentful Paint (LCP): Wann der Hauptinhalt geladen wird
• Time to Interactive (TTI): Wann die Seite interaktiv wird
• Cumulative Layout Shift (CLS): Visuelle Stabilität
• Total Blocking Time (TBT): Main Thread Blocking Time

Für Juniors: Grundlegende Vertrautheit mit Chrome DevTools und Lighthouse ist ausreichend. Tiefe Profiling-Kenntnisse werden nicht erwartet.

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

48. Was ist Lazy Loading und wann würdest du es verwenden?

Antwort: Lazy Loading verzögert das Laden von nicht-kritischen Ressourcen, bis sie benötigt werden, typischerweise wenn sie in den Viewport gelangen.

Häufige Anwendungsfälle:

Bilder:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Beschreibung">

Natives Lazy Loading (moderne Browser):

<img src="image.jpg" loading="lazy" alt="Beschreibung">

JavaScript/React:

// Component Lazy Loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Laden...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Vorteile:

• Schnelleres anfängliches Laden der Seite
• Reduzierte Bandbreitennutzung
• Bessere Performance bei langsamen Verbindungen
• Verbesserte User Experience (Inhalte erscheinen schneller)

Wann verwenden:

• Bilder unterhalb des Falzes
• Schwere Komponenten, die nicht sofort sichtbar sind
• Inhalte in Tabs/Akkordeons
• Infinite Scroll Implementierungen

Seltenheit: Ungewöhnlich Schwierigkeit: Mittel

Debugging & Developer Tools (2 Fragen)

49. Wie debuggst du einen JavaScript-Fehler im Browser?

Antwort:

Schritt-für-Schritt-Debugging-Prozess:

1. Konsole überprüfen:

console.log(variable);      // Werte inspizieren
console.error('Fehler:', error);  // Fehler protokollieren
console.table(arrayOfObjects);   // Daten in Tabelle anzeigen
console.warn('Warnung');    // Warnungen hervorheben

2. Breakpoints verwenden:

• DevTools Sources/Debugger Panel öffnen
• Auf die Zeilennummer klicken, um einen Breakpoint zu setzen
• Die Codeausführung wird am Breakpoint angehalten
• Variablen im Scope Panel inspizieren
• Code durchgehen (Step Over, Step Into, Step Out)

3. Stack Trace untersuchen:

• Fehlermeldungen zeigen Dateinamen und Zeilennummern
• Dem Call Stack folgen, um den Ursprung des Fehlers zu finden
• Netzwerkfehler im Network Tab überprüfen

4. DOM-Probleme debuggen:

• Elemente im Elements Panel inspizieren
• Berechnete Styles überprüfen
• :hover State Forcing verwenden
• Überprüfen, ob Event Listener angehängt sind

5. Netzwerk-Anfragen überprüfen:

• Network Tab zeigt fehlgeschlagene API-Aufrufe
• Request/Response Header untersuchen
• Statuscodes überprüfen (404, 500 usw.)

Häufige Debugging-Techniken:

• Füge debugger; Anweisung hinzu, um die Ausführung anzuhalten
• Verwende bedingte Breakpoints
• Watch Expressions
• Black Box Code von Drittanbietern

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

50. Was sind die wichtigsten Panels in Chrome DevTools und wofür verwendest du sie?

Antwort:

Wesentliche Panels:

1. Konsole:

• JavaScript-Fehler und -Protokolle anzeigen
• JavaScript-Befehle ausführen
• Ausdrücke interaktiv testen
• API-Testing

2. Elemente (Inspector):

• HTML-Struktur inspizieren und ändern
• CSS in Echtzeit bearbeiten
• Layout-Probleme debuggen
• Berechnete Styles, Box Model anzeigen
• Responsive Designs testen

3. Quellen (Debugger):

• Quelldateien anzeigen
• Breakpoints setzen
• Codeausführung durchgehen
• Änderungen bearbeiten und speichern (Workspaces)
• Call Stack anzeigen

4. Netzwerk:

• HTTP-Anfragen/-Antworten überwachen
• Ladezeiten und Dateigrößen überprüfen
• API-Aufrufe debuggen
• Nach Typ filtern (JS, CSS, XHR, Bilder)
• Netzwerkgeschwindigkeit drosseln

5. Performance/Lighthouse:

• Laufzeitleistung analysieren
• Performance Audits generieren
• Engpässe identifizieren
• Core Web Vitals überprüfen

6. Anwendung:

• Local Storage, Session Storage inspizieren
• Cookies anzeigen und löschen
• Service Worker überprüfen
• Cache verwalten

Für Juniors: Eine gute Vertrautheit mit Konsole, Elemente, Quellen und Netzwerk wird erwartet. Performance Profiling ist ein Plus.

Seltenheit: Häufig Schwierigkeit: Einfach

Barrierefreiheit & Best Practices (2 Fragen)

51. Was ist Web Accessibility und warum ist sie wichtig?

Antwort: Web Accessibility bedeutet, Websites so zu entwerfen und zu entwickeln, dass sie von allen genutzt werden können, einschließlich Menschen mit Behinderungen (visuell, auditiv, motorisch, kognitiv).

Warum es wichtig ist:

1. Inklusives Design: 15 % der Weltbevölkerung haben irgendeine Form von Behinderung 2. Gesetzliche Anforderungen: ADA (Americans with Disabilities Act), Section 508, WCAG-Konformität 3. Besseres UX für alle: Untertitel helfen in lauten Umgebungen, Tastaturnavigation hilft Power-Usern 4. SEO-Vorteile: Semantisches HTML und eine korrekte Struktur verbessern das Suchmaschinenranking 5. Größeres Publikum: Schließe keine potenziellen Nutzer/Kunden aus 6. Ethische Verantwortung: Gleicher Zugang ist ein Menschenrecht

Häufige Behinderungen, die berücksichtigt werden müssen:

• Visuell: Blindheit, Sehschwäche, Farbenblindheit
• Auditiv: Taubheit, Hörverlust
• Motorisch: Eingeschränkte Mobilität, Zittern, Lähmung
• Kognitiv: Lernbehinderungen, Gedächtnisprobleme

Business Case: Barrierefreie Websites erreichen mehr Nutzer, ranken besser in der Suche, vermeiden Rechtsstreitigkeiten und demonstrieren unternehmerische Verantwortung.

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

52. Was sind einige grundlegende Möglichkeiten, eine Website barrierefreier zu machen?

Antwort:

HTML-Struktur:

• Verwende semantische Elemente (<header>, <nav>, <main>, <article>, <footer>)
• Korrekte Überschriftenhierarchie (H1 → H2 → H3, kein Überspringen)
• Formulareingaben korrekt beschriften

<label for="email">E-Mail:</label>
<input id="email" type="email" name="email" />

Bilder:

• Immer beschreibenden alt-Text einfügen
• Leeren Alt-Text für dekorative Bilder verwenden: alt=""

Tastaturnavigation:

• Alle interaktiven Elemente sollten über die Tastatur zugänglich sein
• Logische Tab-Reihenfolge
• Sichtbare Fokusindikatoren
• Entferne nicht die :focus-Outline

Farbe und Kontrast:

• Ausreichender Farbkontrast (4,5:1 für normalen Text, 3:1 für großen Text)
• Verlasse dich nicht ausschließlich auf Farbe, um Informationen zu vermitteln
• Mit Farbenblindheitssimulatoren testen

ARIA-Attribute (bei Bedarf):

<button aria-label="Dialog schließen">×</button>
<div role="alert" aria-live="polite">Änderungen gespeichert</div>
<nav aria-label="Hauptnavigation">...</nav>

Testing:

• Screenreader verwenden (VoiceOver, NVDA, JAWS)
• Nur-Tastatur-Navigation
• Browser-Accessibility-Tools (Lighthouse, axe)

Seltenheit: Häufig Schwierigkeit: Mittel

Testing Awareness (1 Frage)

53. Was ist Unit Testing und warum ist es wichtig?

Antwort: Unit Testing beinhaltet das Testen einzelner Funktionen oder Komponenten in Isolation, um zu überprüfen, ob sie korrekt funktionieren.

Was es testet:

• Gibt die Funktion die erwartete Ausgabe für die gegebene Eingabe zurück?
• Rendert die Komponente korrekt mit den gegebenen Props?
• Funktionieren Edge Cases korrekt?

Beispiel (Jest):

// Zu testende Funktion
function add(a, b) {
  return a + b;
}

// Unit Test
test('addiert 1 + 2 und ergibt 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('verarbeitet negative Zahlen', () => {
  expect(add(-1, -2)).toBe(-3);
});

Warum es wichtig ist:

• Fängt Bugs frühzeitig ab: Finde Probleme vor der Produktion
• Vertrauen in Änderungen: Refaktorieren ohne Angst
• Dokumentation: Tests zeigen, wie Code verwendet werden sollte
• Schnelleres Debugging: Lokalisiere den genauen Ort des Fehlers
• Besseres Design: Testbarer Code ist in der Regel saubererer Code

Testing-Pyramide:

• Viele Unit Tests (schnell, billig)
• Weniger Integrationstests (Komponenten zusammen testen)
• Wenige End-to-End-Tests (vollständige User Flows, langsam)

Für Juniors: Es reicht aus, zu verstehen, warum Testing wichtig ist und die grundlegenden Konzepte zu kennen. Das Schreiben umfassender Test Suites wird für Einstiegspositionen in der Regel nicht erwartet, aber die Bereitschaft, Testing zu lernen, ist wichtig.

Häufige Frameworks: Jest, React Testing Library, Mocha, Jasmine

Seltenheit: Häufig Schwierigkeit: Einfach-Mittel

Gesamt: 21 Fragen

Diese Sammlung repräsentiert die fortgeschrittenen Themen und Tools, denen Junior Frontend Entwickler in Vorstellungsgesprächen begegnen. In Kombination mit Teil 1: HTML, CSS & JavaScript Grundlagen hast du eine vollständige Abdeckung von 55 wesentlichen Interviewfragen für 2024-2025.