Seite 6 - JavaScript

Web Components sind eine Gruppe nativer Browser-APIs, mit denen sich gekapselte UI-Bausteine bauen lassen, die ohne Framework-Runtime funktionieren. Custom Elements, Shadow DOM und HTML Templates ermöglichen Komponenten, die in React, Vue, Angular und in reinem HTML gleichermaßen einsetzbar sind, ideal für Design-Systeme über Team- und Stack-Grenzen hinweg.

Ein gewöhnliches Map-Objekt als Zuordnung von Objekten zu privatem Zustand verhindert, dass diese Objekte jemals vom Garbage Collector eingesammelt werden, solange die Map existiert. WeakMap und WeakSet lösen genau dieses Problem, indem sie ihre Schlüssel nur schwach referenzieren und damit private Zustände ermöglichen, die automatisch mit dem zugehörigen Objekt verschwinden.

Ein visuell ansprechendes Modal ist nur die halbe Arbeit. Wer Barrierefreiheit nach WCAG 2.1 ernst nimmt, muss Fokus-Management, korrekte ARIA-Rollen und vollständige Keyboard-Navigation implementieren. Alpine.js macht das möglich – ohne jQuery, ohne externe Bibliotheken.

Monorepo JS Tooling loest ein Problem, das mit wachsender Anzahl an Paketen in einem Projekt unausweichlich wird: geteilte Abhaengigkeiten, wiederholte Build-Schritte und Versionierung ueber mehrere Packages hinweg. Workspaces in npm, pnpm und yarn legen das Fundament, waehrend Turborepo und Nx als Task-Runner darauf aufbauen und mit Caching die Build-Zeit drastisch senken.

AbortSignal.timeout() ersetzt die manuelle setTimeout-plus-AbortController-Kombination durch einen Einzeiler, und AbortSignal.any() führt mehrere Abbruchquellen zu einem einzigen Signal zusammen. Zusammen lösen beide Methoden eines der hartnäckigsten Boilerplate-Probleme in modernen Fetch-basierten Anwendungen.

Mocks sagen nur, ob das Frontend mit einer angenommenen API-Antwort korrekt umgeht, nicht ob diese Annahme noch stimmt. Contract Testing mit Pact.js schließt genau diese Lücke: Das Frontend definiert seine Erwartungen als ausführbaren Vertrag, und das Backend verifiziert automatisch, ob es diesen Vertrag tatsächlich erfüllt.

Der Browser-Main-Thread ist eine geteilte Ressource: Animationen, Event-Handler und Rendering konkurrieren mit eurer Geschäftslogik. requestIdleCallback löst diesen Konflikt, indem es nicht-kritische Aufgaben in die Leerlaufphasen des Browsers verschiebt – ohne dass der Nutzer irgendetwas davon bemerkt.

Math.random() ist für IDs ungeeignet – es nutzt einen vorhersagbaren Pseudozufallsgenerator. crypto.randomUUID() liefert echte UUID v4 aus einem kryptografisch sicheren Zufallsgenerator, ohne externe Abhängigkeiten, in Browser und Node.js gleichermaßen.

Speicherlecks in JavaScript entstehen selten durch Zufall – sie entstehen durch starke Referenzen, die Objekte im Heap festhalten, obwohl der Code sie längst nicht mehr braucht. WeakRef und FinalizationRegistry sind die offiziellen JavaScript-APIs, um mit dem Garbage Collector zu kooperieren und Ressourcen sauber freizugeben – ohne das Fundament der automatischen Speicherverwaltung zu untergraben.

Wer asynchrone Datenströme bisher mit manuellen Schleifen und push-Aufrufen in ein Array überführt hat, kennt die Race-Conditions und die umständliche Fehlerbehandlung. Array.fromAsync löst genau dieses Problem: eine einzige eingebaute Methode, die Async Iterables, Generatoren und gemischte Promise-Listen kontrolliert und in der richtigen Reihenfolge in ein Array sammelt.