Seite 13 - JavaScript

Ein Tab im Hintergrund läuft in den meisten Anwendungen unverändert weiter, Polling-Intervalle feuern, Animationen laufen, Videos spielen unhörbar ab. Die Page Visibility API liefert mit document.hidden und dem visibilitychange-Event einen zuverlässigen Signalgeber, um genau solche Hintergrundarbeit zu drosseln und spürbar CPU, Akku und Netzwerk zu sparen, ohne dass der Nutzer etwas davon merkt.

Öffnet ein Nutzer dieselbe Webanwendung in mehreren Tabs, laufen viele Hintergrundaufgaben unbemerkt parallel: Token-Refresh, Cache-Aufbau, Synchronisation mit dem Server. Die Web Locks API stellt mit navigator.locks eine exklusive Sperre über Origin-Grenzen zwischen Tabs bereit, mit der solche Aufgaben koordiniert und doppelte Ausführung zuverlässig verhindert werden.

Das window-resize-Event war der erste, aber fehlerhafte Ansatz für größenabhängiges JavaScript. ResizeObserver beobachtet einzelne DOM-Elemente direkt – unabhängig davon, ob das Fenster sich ändert, ein Sidebar-Panel sich öffnet oder ein Elternelement dynamisch wächst.

obj.hasOwnProperty(key) sieht harmlos aus, bricht aber bei null-Prototyp-Objekten und bei überschriebenen Prototyp-Methoden. Object.hasOwn(obj, key) ist die statische, robuste Alternative, die genau diese Fallstricke umschifft und in modernem Code die Standardwahl für Property-Prüfungen sein sollte.

Lokale Git-Hooks landen in .git/hooks und werden nie mit dem Repository versioniert, wodurch jeder Entwickler sie einzeln einrichten muss und Teams faktisch keine verlässliche Durchsetzung von Codequalität vor dem Commit haben. Husky verteilt Hooks automatisch über npm, lint-staged beschränkt Prüfungen auf geänderte Dateien und commitlint erzwingt saubere Commit-Nachrichten, ganz ohne manuelle Einrichtung.

Die Alpine.js Modifier debounce und throttle verhindern, dass ein Event Listener bei jedem einzelnen Tastendruck oder jedem einzelnen Scroll-Pixel unnötig aufgerufen wird. Wer den Unterschied zwischen beiden Drosselungsstrategien versteht, baut Live-Suchen, Scroll-Handler und Resize-Reaktionen, die spürbar performanter laufen als ungedrosselte Handler.

Hundert Prozent Code-Coverage bedeutet nur, dass jede Zeile einmal ausgeführt wurde, nicht dass ein Test einen echten Fehler auch bemerken würde. Mutation Testing dreht diese Frage um: Stryker verändert gezielt einzelne Codezeilen zu kleinen Bugs und prüft, ob eure Tests diese Mutanten tatsächlich erkennen und fehlschlagen, statt stillschweigend grün zu bleiben.

Der offizielle TypeScript-Compiler tsc ist in JavaScript geschrieben und für Typsicherheit optimiert, nicht für Geschwindigkeit. esbuild und swc kompilieren denselben TypeScript-Code in Go beziehungsweise Rust und erreichen dabei zehn- bis zwanzigfach kürzere Build-Zeiten, verzichten dafür aber bewusst auf die vollständige Typprüfung während der Transformation.

Sortierbare Tabellenspalten gehören zu den am häufigsten gebrauchten Datenlisten Funktionen, landen aber oft über eine komplette DataTables Bibliothek im Projekt. Mit einer einzigen Alpine.js x-data Komponente, einer generischen Vergleichsfunktion und ein paar Zeilen für die Sortierrichtung entsteht dieselbe Funktionalität ganz ohne zusätzliche Abhängigkeit.

Nutzer öffnen Web-Apps in mehreren Tabs gleichzeitig. Die Broadcast Channel API löst elegantly das Synchronisationsproblem: Logout, Theme-Wechsel, Session-Updates und State-Änderungen werden sofort in alle offenen Tabs gesendet – komplett ohne Server, ohne WebSocket, ohne Polling.