Seite 14 - JavaScript

Wer React im Browser beherrscht, bringt bereits das Kernwissen für React Native mit: Komponenten, Hooks und State funktionieren identisch. Was sich ändert, sind die Bausteine für die Oberfläche, das Styling-Modell und die Art, wie native Funktionen wie Kamera oder Push-Benachrichtigungen angebunden werden. Dieser Artikel zeigt den direkten Umstieg mit konkretem Code.

JavaScript-Numbers sind 64-Bit-Floats – und verlieren bei Ganzzahlen über 9 Billiarden (2^53) lautlos Präzision. BigInt löst das Problem: beliebig große Ganzzahlen ohne Rundungsfehler, für IDs, Kryptographie, Timestamps und Finanzberechnungen.

Web Components, die ihr Shadow DOM erst per JavaScript im connectedCallback aufbauen, zeigen beim ersten Laden haeufig ein kurzes Aufblitzen unformatierten Inhalts. Declarative Shadow DOM beschreibt den Shadow-Root stattdessen direkt im HTML ueber , sodass der Browser ihn bereits waehrend des normalen Parsings aufbaut, lange bevor JavaScript ueberhaupt geladen ist.

Vite transpiliert TypeScript beim Entwickeln blitzschnell über esbuild, prüft dabei aber bewusst keine Typen, damit Hot Module Replacement und Dev-Server-Start schnell bleiben. Dieser Artikel zeigt, wie ihr mit vite-plugin-checker Typfehler trotzdem sichtbar macht, vite.config.ts sauber typisiert und ein minimales Vite plus TypeScript Setup für Admin-Widgets und Frontend-Tools aufsetzt.

Native Web Components lösen Kapselung und Wiederverwendbarkeit auf Browser-Ebene, bringen aber selbst keine deklarative Reaktivität mit. Alpine.js als Ergänzung zu Web Components übernimmt genau diese Lücke: x-data steuert das Verhalten außerhalb eines Custom Elements, während Attribute und Events die Kommunikation über die Shadow-DOM-Grenze hinweg sauber strukturieren.

Eine PWA mit Vue und Vite verwandelt eine bestehende Webanwendung in eine installierbare, offline-fähige App, ohne App-Store-Review und ohne separate native Codebasis. Mit vite-plugin-pwa lassen sich Service Worker, Web-App-Manifest und Caching-Strategien weitgehend automatisiert konfigurieren, während Update-Handling und Offline-Verhalten gezielt auf die eigene Anwendung zugeschnitten werden.

Ein einzelner Heap Snapshot zeigt nur eine Momentaufnahme, aber die Drei Snapshot Technik entlarvt systematisch, welche Objekte trotz Garbage Collector im Speicher bleiben. Retainer Pfade zeigen exakt, welche Referenz eine Freigabe verhindert, und machen aus vagem Speicherverdacht eine konkrete Ursache im Code.

x-show und template x-if lösen beide bedingtes Rendern, aber mit fundamental unterschiedlichem DOM-Verhalten. Wer die Unterschiede bei Lifecycle-Hooks, Transitions und Performance kennt, trifft die Wahl gezielt statt zufällig, und vermeidet unnötige Re-Initialisierungen oder aufgeblähtes DOM.

Die klassische Style-API von JavaScript kennt nur Strings: style.width liefert "320px" zurück, egal ob es sich um eine Länge, einen Winkel oder eine reine Zahl handelt, und jede Rechnung damit beginnt mit Parsing und endet mit erneutem String-Zusammenbauen. Die CSS Typed OM ersetzt das durch echte, typisierte Objekte, die sich direkt addieren, multiplizieren und in andere Einheiten umrechnen lassen, ohne den Umweg über Text.

Interaction to Next Paint bestraft jede Millisekunde, die zwischen Klick und sichtbarer Reaktion vergeht. Wer Long Tasks systematisch identifiziert und mit Yielding, Scheduler API und Event Handler Aufteilung auflöst, senkt die INP Zahl nicht durch Zufall, sondern durch nachvollziehbare technische Eingriffe.