Seite 18 - JavaScript

Die Fetch API ist mehr als ein Ersatz für XMLHttpRequest. Wer Timeouts, Retry-Logik, Streaming-Responses, Authentifizierung und Cache-Strategien beherrscht, schreibt HTTP-Kommunikation, die in realen Anwendungen zuverlässig und wartbar bleibt – ohne externe Bibliotheken.

Ein Cookie Consent Banner entscheidet direkt darüber, ob Tracking-Skripte, Marketing-Pixel und externe Einbettungen überhaupt geladen werden dürfen. Mit Alpine.js entsteht ein Cookie Consent Banner, der Kategorien sauber trennt, Zustimmung persistent speichert, Skripte erst nach Einwilligung nachlädt und den Widerruf jederzeit ohne neue Seite ermöglicht.

Wer Fetch-Requests nicht abbricht, riskiert Race Conditions, Memory Leaks und inkonsistente UI-Zustände. Der AbortController ist die native Browser-API, die dieses Problem ein für alle Mal löst – für Fetch, Event-Listener und beliebige async Operationen.

Wer große Datenmengen in JavaScript verarbeitet, hat lange alles in den Speicher geladen, bevor er damit arbeiten konnte. Die Web Streams API ändert das: Daten fließen als Chunks durch eine Pipeline, Backpressure verhindert Speicher-Überlastung, und der erste Chunk ist verfügbar, bevor der letzte angekommen ist.

Angular Standalone Components entfernen den NgModule-Ballast aus jedem Feature, und Tailwind CSS entfernt den Ballast aus dem Stylesheet. Zusammen entsteht eine Architektur, in der jede Komponente ihre Abhängigkeiten und ihr Aussehen selbst mitbringt, ohne globale Klassenlisten und ohne verschachtelte Modul-Deklarationen. Dieser Artikel zeigt Setup, Signals-Integration, Reactive Forms und die Content-Scanning-Fallstricke, die bei Angular-Projekten besonders häufig auftreten.

Route Splitting ist der Standardeinstieg, aber die spürbare Verbesserung liegt oft eine Ebene tiefer. Component Level Splits, gezieltes Vendor Chunking und Preload Hints entscheiden gemeinsam, ob Code Splitting im Bundle Report gut aussieht oder ob es tatsächlich die Ladezeit für Nutzer verkürzt.

Astro liefert standardmäßig kein JavaScript aus und rendert Seiten als statisches HTML, Tailwind CSS liefert dazu ein Utility System, das genau auf diese Architektur passt. Wer Tailwind CSS mit Astro kombiniert, bekommt kleine CSS Bundles, klar abgegrenzte interaktive Inseln und ein Build, das sich fast von selbst optimiert, wenn man die Islands Architektur richtig versteht.

Wenn Animationen von Laufzeitwerten abhaengen, unterbrechbar sein muessen oder sich mit anderen Animationen synchronisieren sollen, stoesst reines CSS an Grenzen. Die Web Animations API loest genau das, mit derselben Compositor-Performance wie native CSS-Animationen und voller programmatischer Kontrolle ueber jede laufende Animation.

Die Notifications API zeigt nur an, was bereits im Browser liegt. Wer Nutzer wirklich erreichen will, auch wenn der Tab laengst geschlossen ist, braucht die Web Push API: VAPID-Identitaet, Push-Subscription und einen Server, der ueber den Push-Dienst des Browsers zustellt.

VueUse bündelt über zweihundert fertige Composables für Storage, Sensoren, Zeitgeber und Browser-APIs. Wer diese Bibliothek gezielt statt pauschal einsetzt, spart nicht nur Zeit beim Schreiben eigener Utility-Funktionen, sondern reduziert auch Bugs bei Edge-Fällen wie SSR, Cleanup und Reaktivität, die in selbst geschriebenen Composables leicht übersehen werden.