Seite 5 - JavaScript

JavaScript ist single-threaded, aber nicht sequenziell. Der Event Loop bestimmt die Ausführungsreihenfolge von synchronem Code, Promises, Timern und Callbacks. Wer den Unterschied zwischen Mikrotasks und Makrotasks nicht versteht, schreibt asynchronen Code, der rätselhaft falsch läuft.

Mehrere Vue-Anwendungen und geteilte Pakete in einem Repository zu verwalten, wird ohne Task-Orchestrierung schnell langsam und unübersichtlich. Turborepo bringt inkrementelles Caching, parallele Task-Ausführung und eine deklarative Pipeline-Definition, die Build-Zeiten in Vue-Monorepos von Minuten auf Sekunden reduziert.

Fuer Formulierungen wie 'vor 3 Tagen' oder 'in 2 Stunden' braucht es keine externe Bibliothek mehr: Intl.RelativeTimeFormat erledigt lokalisierte relative Zeitangaben nativ im Browser, inklusive Rundungslogik fuer alle gaengigen Zeiteinheiten und ohne zusaetzliches Bundle-Gewicht.

Dynamic Import mit import() ist mehr als eine bequeme Alternative zu statischen Imports: die Funktion gibt ein Promise zurueck, laedt Code erst zur Laufzeit und ermoeglicht Muster wie Route-basiertes Code-Splitting, bedingtes Laden nach Feature Detection und robuste Retry-Strategien, wenn ein Chunk im Netzwerk verloren geht.

Cross Site Request Forgery gilt in vielen Teams als gelöstes Problem, sobald eine Anwendung auf eine Single Page Architektur mit Fetch statt klassischer Formulare umsteigt. Tatsächlich verschiebt sich das Risiko nur, sobald Session Cookies für authentifizierte API Aufrufe im Spiel sind, bleibt aber real und erfordert eine bewusste Kombination aus Double-Submit-Cookie, SameSite-Attribut und Custom Headern.

Kaum ein Browser-Feature wird so oft falsch eingesetzt wie die Notifications API: Ein Berechtigungsdialog direkt beim ersten Seitenbesuch führt in den allermeisten Fällen zur dauerhaften Ablehnung. Richtig eingesetzt, mit passendem Timing, klarem Kontext und Service-Worker-Integration, wird aus derselben API ein Feature, das Nutzer aktiv anfragen, statt es wegzuklicken.

Dependency Injection kehrt die Kontrolle über die Erzeugung von Abhängigkeiten um, statt jede Klasse ihre eigenen Kollaborateure selbst instanziieren zu lassen. Ohne Angular oder NestJS zeigt dieser Artikel, wie Constructor Injection, ein minimaler DI-Container und saubere Lifecycle-Verwaltung in reinem JavaScript lose Kopplung und einfache Testbarkeit ermöglichen.

JavaScript ist single-threaded – aber das ist kein Naturgesetz für Browser-Anwendungen. Web Workers bringen echtes Multithreading in den Browser: CPU-intensive Berechnungen, Dateiverarbeitung, Verschlüsselung und KI-Inferenz laufen in Hintergrundthreads, während der UI-Thread reaktionsfähig bleibt und Nutzerinteraktionen flüssig verarbeitet.

setTimeout(0) und requestIdleCallback geben dem Browser keine echte Information darueber, wie wichtig ein Task tatsaechlich ist. scheduler.postTask() schliesst diese Luecke mit expliziten Prioritaetsstufen: user-blocking, user-visible und background, sodass eigener Code sich in dieselbe Warteschlange einreiht, die auch Rendering und Eingaben verwaltet, statt gegen sie zu konkurrieren.

Custom Elements bringen vier Lifecycle-Callbacks mit, die auf den ersten Blick recht simpel wirken, in der Praxis aber einige nicht offensichtliche Timing-Garantien und Fallstricke besitzen. Dieser Artikel geht auf connectedCallback, disconnectedCallback, attributeChangedCallback und adoptedCallback im Detail ein, inklusive des haeufig vergessenen observedAttributes und der Reentrancy-Falle.