Seite 6 - JavaScript

Mutabler State ist die häufigste Quelle schwer findbarer Bugs in JavaScript-Anwendungen. Immutability Patterns machen Zustandsänderungen explizit, ermöglichen Änderungserkennung per Referenzvergleich und verhindern, dass shared State an unerwarteten Stellen verändert wird – von Object.freeze bis zu Records und Tuples.

WebGPU ist die moderne Antwort des Webs auf direkte GPU-Programmierung und löst schrittweise WebGL als Standard für aufwendige Grafik- und Berechnungsaufgaben im Browser ab. Wer die Grundkonzepte einmal verstanden hat, dem eröffnet sich Zugriff auf Compute-Shader, effizientere Speicherverwaltung und eine deutlich modernere API.

Compiler-Makros wie defineProps und defineModel wirken wie normale Funktionsaufrufe, existieren zur Laufzeit aber gar nicht, sie werden vom Vue-Compiler beim Bauen des Codes wegtransformiert. Das dedizierte Vue Macros Plugin geht noch weiter und ergänzt eigene Makros für Reaktivität, Props-Weiterreichung und bedingte Kompilierung, mit klaren Kompromissen bei Tooling und Vorhersehbarkeit.

Der MutationObserver ist die moderne, performante Alternative zu DOMSubtreeModified und polling-basierten DOM-Beobachtungsansätzen. Er reagiert asynchron auf Attribut-, Kindknoten- und Textänderungen im DOM – ohne das Rendering-Thread-Blocking der alten Mutation-Events.

Wachsender Speicherverbrauch, träge Interaktionen und Browser-Tabs, die nach Stunden abstürzen: JavaScript-Anwendungen mit langlebigen Seiten leiden häufig unter Memory Leaks, die sich erst mit der Zeit bemerkbar machen. Dieser Artikel zeigt die häufigsten Leak-Quellen, den praktischen Umgang mit Heap Snapshots in den Chrome DevTools und einen Schritt für Schritt Debugging-Workflow, mit dem sich Lecks zuverlässig lokalisieren und beheben lassen.

Der Alpine.js window Modifier registriert Listener direkt auf dem window-Objekt und räumt sie automatisch auf, sobald die Komponente aus dem DOM verschwindet. Zusammen mit @click.outside entstehen Dropdowns, Modals und globale Tastatur-Shortcuts ganz ohne manuelles addEventListener und removeEventListener im Komponenten-Code.

Symfony UX Autocomplete verbindet Doctrine-Entities, eigene Suchlogik und externe APIs mit einem einzigen Formularfeld-Typ und liefert dabei serverseitiges Rendering, Stimulus-Steuerung und Tom Select als Frontend, ohne dass ein einziges eigenes JavaScript-Modul geschrieben werden muss.

Klassische Unit-Tests prüfen einzelne, von Hand ausgedachte Beispiele. Property-Based Testing dreht das Prinzip um: Statt Beispiele zu schreiben, definiert man Eigenschaften, die für jede gültige Eingabe gelten müssen, und lässt fast-check tausende zufällige Fälle generieren, um genau die Randfälle zu finden, die ein Mensch beim Schreiben von Tests übersieht.

Vier neue Array-Methoden liefern eine veraenderte Kopie statt das Original zu mutieren. Das macht sort(), reverse() und splice() in State-getriebenem Code endlich ueberfluessig.

Mehrere Web Worker, die sich denselben SharedArrayBuffer teilen, brauchen eine Art, aufeinander zu warten, ohne staendig in einer Schleife zu pollen. Atomics.wait() bietet genau das, blockiert dabei aber den kompletten Thread und ist deshalb im Main Thread verboten. Atomics.waitAsync() loest dasselbe Problem non-blockierend und funktioniert dadurch auch dort, wo Blockieren keine Option ist.