Seite 9 - JavaScript

Ein 2-MB-JavaScript-Bundle ist keine Seltenheit, aber es ist fast immer vermeidbar. Bundle-Analyse mit Rollup und Vite macht unsichtbare Probleme sichtbar: Tree-Shaking-Lücken, doppelte Dependencies, unnötige Polyfills – und liefert die Grundlage für gezielte Optimierung.

Funktionale Tests prüfen, ob Code läuft, nicht ob er richtig aussieht. Visual Regression Testing schließt genau diese Lücke: Screenshots von Komponenten und Seiten werden gegen eine gepflegte Baseline verglichen, sodass unbeabsichtigte CSS-Änderungen, kaputte Layouts und Rendering-Fehler auffallen, bevor sie live gehen.

Ein Paint Worklet zeichnet einen Hintergrund nicht als fertige Bilddatei, sondern als kleines JavaScript-Programm, das der Browser bei jedem Repaint direkt in den Element-Hintergrund rendert. Wer einmal ein parametrisierbares Muster als Worklet registriert, kann es über CSS Custom Properties in beliebig vielen Komponenten wiederverwenden, ohne für jede Farbvariante eine neue SVG-Datei zu exportieren.

Die Storage Manager API beantwortet zwei Fragen, die jede Offline-Anwendung früher oder später betreffen: wie viel Speicherplatz steht dem Origin überhaupt zur Verfügung, und wie verhindert man, dass der Browser diese Daten unter Speicherdruck einfach löscht. Wer Quota-Berechnung und Persistenz-Anfragen richtig einsetzt, baut Anwendungen, die Datenverlust proaktiv vermeiden statt ihn nachträglich zu erklären.

Destrukturierung wirkt auf den ersten Blick simpel, doch jenseits von const { a, b } = obj stecken einige Muster, die selbst erfahrene Entwickler ueberraschen. Dieser Artikel geht auf verschachtelte Defaults, computed property keys, Rest kombiniert mit Renaming und den klassischen Fallstrick zwischen undefined und null ein.

Wer bei jedem Zustands-Update ein komplettes Objekt oder Array tief kopiert, verschenkt Speicher und Rechenzeit. Structural Sharing löst dieses Problem, indem eine persistente Datenstruktur beim Update nur den geänderten Pfad neu aufbaut und alle unveränderten Teilbäume mit der alten Version teilt, statt sie zu duplizieren.

Astro rendert Seiten standardmäßig ohne jegliches clientseitiges JavaScript und lädt Interaktivität nur dort nach, wo sie tatsächlich gebraucht wird. Alpine.js und Astro Islands zusammen sind die leichteste Kombination für dieses Modell: eine einzige kleine Bibliothek statt eines vollen React- oder Vue-Bundles pro interaktivem Inselelement.

Ein Formular wird abgeschickt, aber die Verbindung ist gerade weg. Statt eine Fehlermeldung zu zeigen und die Eingabe zu verwerfen, merkt sich die Background Sync API die Aktion und liefert sie zuverlaessig nach, sobald das Netz zurueck ist, auch wenn der Tab laengst geschlossen wurde.

Fortgeschrittene Abfragen in IndexedDB gehen weit über getAll() hinaus: Cursor-Iteration mit IDBKeyRange, Compound Keys über mehrere Felder und Multi-Entry-Indexe für Array-Werte erlauben präzise, speicherschonende Queries direkt auf der Speicher-Engine des Browsers. Wer diese Werkzeuge beherrscht, muss keine Daten mehr client-seitig filtern, sondern lässt IndexedDB die Vorselektion übernehmen.

Turbo ersetzt volle Seitenwechsel durch schnelle Teil-Updates, doch clientseitiger UI-Zustand geht bei jedem Turbo-Frame-Rendering leicht verloren. Alpine.js und Turbo/Hotwire zusammen liefern genau das, was den beiden Ansätzen einzeln fehlt: serverseitige Navigation ohne Reload plus zuverlässig re-initialisierte, lokale Reaktivität in jeder Komponente.