Seite 2 - JavaScript

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.

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.

Props-Drilling und globale Variablen sind Zeichen enger Kopplung. Custom Events bieten eine native DOM-Lösung: Komponenten senden Events, andere hören zu – ohne direkte Referenz aufeinander, ohne Framework, mit vollem TypeScript-Support.

Signals sind ein Reaktivitäts-Muster, das in Vue, Solid, Preact und Angular unabhängig voneinander implementiert wurde, aber auf denselben wenigen Grundbausteinen beruht. Wer versteht, wie ein minimales Signals-System aus Getter, Setter und automatischem Dependency-Tracking aufgebaut ist, kann Reaktivität in jedem Vanilla-JavaScript-Projekt einsetzen, ganz ohne Framework-Abhängigkeit.

Wer einen Promise von außen auflösen wollte – aus einem Event-Handler, einer Callback-API oder einem anderen asynchronen Kontext –, musste bisher resolve und reject aus dem Konstruktor-Scope herausschmuggeln. Promise.withResolvers() löst das in einer Zeile: { promise, resolve, reject } als strukturiertes Objekt, klar und ohne Boilerplate.

Abbrechbare Async-Operationen entstehen nicht durch das bloße Anhängen eines AbortControllers an einen Fetch-Aufruf, sondern durch einen bewussten Architektur-Entscheid: jede Funktion, die länger läuft, nimmt von Anfang an ein Abbruch-Signal entgegen, garantiert Cleanup und reicht das Signal konsequent durch alle Schichten weiter.

JavaScript ist schnell genug für die meisten Web-Aufgaben – aber für Bildkompression, Audio-DSP, Kryptografie, KI-Inferenz oder Physik-Simulationen stößt es an Grenzen. WebAssembly schließt diese Lücke: kompilierter Maschinencode aus Rust, C oder Go läuft im Browser mit nahezu nativer Geschwindigkeit und kooperiert eng mit dem JavaScript-Ökosystem.

Tagged Template Literals sind weit mehr als hübsche String-Interpolation. Mit einer Tag-Funktion davor verwandeln sie sich in ein mächtiges Werkzeug: SQL-Injection-Schutz, sicheres HTML-Escaping und domänenspezifische Sprachen direkt in JavaScript — ohne externe Parser.

State Machines modellieren erlaubte Zustände und Übergänge explizit, statt sie implizit über verstreute Boolean-Flags zu erraten. XState bringt dieses Konzept als framework-unabhängige Bibliothek nach JavaScript, mit States, Events, Guards und hierarchischen Statecharts, die in React, Vue oder purem JavaScript gleichermaßen funktionieren.

DOM basiertes Cross Site Scripting entsteht meist nicht durch fehlende serverseitige Filterung, sondern durch unsichere Zuweisungen an innerHTML, document.write oder eval mitten im Frontend Code. Die Trusted Types API schließt diese Lücke strukturell, indem der Browser gefährliche Zuweisungen an DOM Sinks nur noch akzeptiert, wenn der Wert vorher durch eine definierte Policy in einen speziellen Typ umgewandelt wurde.