Seite 17 - JavaScript

Ein React Monorepo mit Turborepo bündelt mehrere Apps und geteilte Pakete in einem Repository, ohne dass jeder Build alles neu kompilieren muss. Dieser Artikel zeigt die Workspace-Struktur, die turbo.json-Konfiguration, Remote Caching und eine CI-Pipeline, die nur tatsächlich betroffene Pakete baut.

Tree Shaking ist der Prozess, mit dem moderne Bundler ungenutzten JavaScript-Code aus dem finalen Bundle entfernen. Was simpel klingt, hat komplexe Voraussetzungen: ES-Module sind Pflicht, bestimmte Code-Muster blockieren Tree Shaking, und falsch konfigurierte sideEffects-Flags können gesamte Module eliminieren oder bewahren — mit messbaren Auswirkungen auf Ladezeiten.

Encore zu AssetMapper zu migrieren bedeutet nicht, das Frontend neu zu schreiben, sondern Entrypoints, npm-Pakete und Sass-Dateien Stück für Stück auf Symfonys eingebauten Importmap-Mechanismus zu übertragen, ohne dass Node.js für den Produktions-Build noch zwingend nötig ist.

Memory Leaks in JavaScript-Anwendungen sind unsichtbar – bis der Browser abstürzt oder die Seite nach Minuten spürbar langsamer wird. Heap Snapshots, Allocation Timelines und das Retainer-Diagramm in Chrome DevTools machen unsichtbare Speicherlecks sichtbar, lokalisierbar und behebbar.

Touch Gesten in Vue Apps scheitern selten an der Grundidee, sondern an Details wie Scroll-Konflikten, fehlender Passive-Event-Konfiguration und ruckelnden Animationen unter Last. Mit Pointer Events, VueUse-Composables und sauberer Trennung von Erkennung und Reaktion lassen sich Swipe-to-Delete, Drag-and-Drop und Pinch-to-Zoom robust und performant umsetzen.

Symbol.iterator ist der bekannteste Vertreter der well-known Symbols, aber laengst nicht der einzige. Dieser Artikel zeigt im Detail, wie Symbol.toPrimitive, Symbol.hasInstance und Symbol.toStringTag das Verhalten eigener Objekte bei Typumwandlung, instanceof-Pruefungen und Debug-Ausgaben gezielt steuern, und wie eigene Symbole kollisionsfreie Objekt-Keys ermoeglichen.

Eine Preistabelle mit Umschalter zwischen monatlicher und jährlicher Abrechnung ist bei SaaS-Produkten und Abo-Modellen Standard, weil sie den Jahresrabatt direkt sichtbar macht und die Kaufentscheidung erleichtert. Mit Alpine.js entsteht eine Preistabelle, die Beträge reaktiv umrechnet, Rabatt-Badges anzeigt und den empfohlenen Tarif hervorhebt, komplett ohne Page Reload und ohne serverseitige Logik im Frontend.

Wer für jedes Listenelement einen eigenen Event-Listener registriert, baut eine Speicher- und Performance-Falle. Event Delegation nutzt Event Bubbling und ermöglicht mit einem einzigen Listener die Behandlung von Events auf beliebig vielen Elementen – auch auf solchen, die erst später dynamisch zum DOM hinzugefügt werden.

Fetch und XHR beim Seitenende zu nutzen ist eine Race-Condition gegen den Browser. Wenn der Tab geschlossen oder die Seite entladen wird, bricht der Browser offene Anfragen ab. navigator.sendBeacon überträgt Daten garantiert, ohne die Navigation zu verzögern – das ist die richtige Lösung für Analytics, Session-Daten und Exit-Tracking.

=== vergleicht Objekte nur über Referenzidentität, und JSON.stringify scheitert an Schlüsselreihenfolge, Maps, Sets und Dates. Eine selbst geschriebene Deep-Equality-Funktion vergleicht Werte rekursiv nach Struktur statt nach Referenz und deckt dabei genau die Datentypen ab, an denen die einfachen Ansätze regelmäßig scheitern.