Seite 2 - JavaScript

Race Conditions in Async UI Code entstehen, wenn eine spät gestartete, aber schneller antwortende Anfrage eine später gestartete, aber langsamer antwortende Anfrage im Ergebnis überholt. Sequenznummern, AbortController und sauberes State-Handling verhindern, dass Nutzer veraltete Daten angezeigt bekommen, die nicht mehr zur aktuellen Eingabe passen.

Ein Stimulus-Controller entfaltet seine Stärke erst, wenn Lifecycle-Callbacks, Targets, Values und Outlets bewusst eingesetzt werden, statt jedes DOM-Element manuell mit querySelector zu suchen, und genau diese Bausteine machen aus verstreuten jQuery-Fragmenten wartbare, testbare Frontend-Bausteine in Symfony-Projekten.

Reaktive Programmierung ist in jedem modernen Frontend-Framework anders gelöst – mit inkompatiblen APIs und Abstraktion hinter Framework-Grenzen. Das TC39 Signals-Proposal definiert erstmals eine universelle Grundlage: Signal, computed und effect als native JavaScript-Primitive, auf denen Frameworks aufbauen können.

Der Browser-Cache war lange eine Blackbox. Die Cache API gibt Entwicklern vollständige Kontrolle darüber, welche Requests gecacht werden, wie lange sie gültig bleiben und wann sie ersetzt werden – unabhängig von HTTP-Headern und Browser-Heuristiken.

Jeder SPA-Router baut seit Jahren auf pushState() und popstate herum, obwohl beide nie fuer Routing gedacht waren, sondern nur fuer die Manipulation der Browser-Historie. Die Navigation API raeumt mit diesen Workarounds auf und liefert echte Kontrolle ueber jede Art von Navigation.

Die Reporting API gibt Browsern einen standardisierten Weg, Probleme wie CSP-Verstöße, veraltete API-Nutzung oder sogar Tab-Abstürze automatisch an einen zentralen Endpunkt zu melden. Anders als klassisches Error-Tracking läuft das größtenteils ohne zusätzliches JavaScript und erfasst auch Fälle, die eigener Code niemals sehen würde.

Manche Web-Anwendungen brauchen einen dauerhaft aktiven Bildschirm: ein Kochrezept, das man beim Rühren nicht antippen will, ein Video-Call ohne Kamera-Bewegung oder ein Ladebalken, der minutenlang läuft. Die Screen Wake Lock API löst genau dieses Problem, ohne Tricks wie unsichtbare Videos oder Dummy-Timer.

Ein Fehler in einer asynchronen Funktion verschwindet spurlos, die Konsole zeigt eine unhandled rejection, ein leerer catch-Block versteckt genau das Problem, das gerade gesucht wird. Promise-Fehlerbehandlung folgt eigenen Regeln, die sich von synchronem try catch unterscheiden. Dieser Artikel zeigt die konkreten Fallstricke und wie man sie zuverlässig vermeidet.

x-bind koppelt HTML-Attribute, CSS-Klassen und Inline-Styles reaktiv an den Alpine-State, von der einfachen Kurzform bis zur Objekt-Syntax für bedingte Klassen. Wer die Feinheiten kennt, vermeidet fehlerhafte Boolean-Attribute, unnötige Neu-Auswertungen und kaputte ARIA-Bindungen.

Import Maps loesen ein Problem, das ES Module im Browser seit ihrer Einfuehrung hatten: bare Specifiers wie import { render } from "preact" funktionieren nativ nicht, ohne dass ein Build-Schritt den Pfad umschreibt. Mit einer Import Map traegt der Browser selbst die Aufloesung, Scopes erlauben sogar unterschiedliche Versionen fuer verschiedene Modulbereiche, ganz ohne Webpack oder Vite.