Seite 205 - Maxim Mironjuk

Sobald zwei Geräte denselben Datensatz offline bearbeiten und beide anschließend synchronisieren, entsteht zwangsläufig ein Konflikt, den die App auflösen muss. Dieser Artikel zeigt, wie solche Konflikte technisch entstehen, welche Auflösungsstrategien sich in der Praxis bewährt haben und wo automatische Lösungen an ihre Grenzen stoßen.

Eine Common Table Expression benennt eine Teilabfrage mit der WITH-Klausel und macht sie im Hauptquery wie eine Tabelle referenzierbar. Statt Subqueries mehrfach zu verschachteln, entsteht eine Abfrage, die von oben nach unten lesbar ist, Logik nur einmal formuliert und sich in Schritten nachvollziehen laesst, egal ob in PostgreSQL, MySQL, SQL Server oder Oracle.

Eine OpenAPI-Spezifikation, die nicht mehr mit der Implementierung übereinstimmt, ist schlechter als gar keine Dokumentation – sie täuscht. Contract-Testing schließt diese Lücke automatisch: Tests prüfen bei jedem Commit, ob die Backend-Implementierung noch dem Vertrag entspricht, den die Spezifikation definiert.

useFetch ist im Kern ein Convenience-Wrapper um useAsyncData in Kombination mit $fetch. Sobald eigene Transform-Funktionen, präzise Caching-Keys oder eine komplexere Datenquelle jenseits eines einfachen HTTP-Requests ins Spiel kommen, ist der direkte Griff zu useAsyncData meist die klarere Wahl.

Dynamic Mapping erspart am Anfang viel Konfigurationsaufwand, kann aber bei unvorhersehbaren Eingabedaten unbemerkt tausende Felder erzeugen und den Cluster in die Knie zwingen. Wer dynamic false, dynamic strict und Dynamic Templates gezielt einsetzt, behaelt die automatische Felderkennung unter Kontrolle, ohne auf ihre Vorteile zu verzichten.

Externe Datenquellen in React zu integrieren, war vor React 18 ein Minenfeld aus Race Conditions und inkonsistenten Renders. useSyncExternalStore ist die offizielle Lösung: ein Hook, der externe Stores korrekt mit dem React-Rendering-Zyklus verbindet und Tearing auch im Concurrent Mode verhindert.

Ein Custom Hook wird zu oft nur indirekt über die Komponente getestet, die ihn verwendet. Das verdeckt Bugs in der Hook-Logik und macht Tests unnötig komplex. renderHook aus der React Testing Library erlaubt es, Zustand, Nebenwirkungen und asynchrone Updates eines Hooks direkt zu prüfen, ganz ohne künstliche Host-Komponente.

Wer lokale Entwicklungsumgebungen mit Docker Compose betreibt, kennt das Problem: Ein Bind Mount spiegelt alles, aber node_modules, Vendor-Verzeichnisse und Build-Artefakte sorgen fuer Performance-Probleme und Konflikte zwischen Host und Container. Docker Compose Watch loest das gezielt mit drei Aktionen, sync, rebuild und sync und restart, und macht Live Reload endlich vorhersehbar.

String-Hacks in Bash – Dateilisten als Leerzeichen-getrennte Strings, Konfigurationswerte als kommaseparierte Felder – brechen systematisch, sobald Werte Sonderzeichen enthalten. Arrays in Bash sind die saubere Alternative: indexed Arrays für geordnete Listen, assoziative Arrays für Key-Value-Strukturen, Slices für Teilmengen und sichere Iteration für jeden Anwendungsfall.

Ein CSV-Export wirkt auf den ersten Blick nach einer reinen Backend-Aufgabe, doch wenn die Daten bereits vollständig als Tabelle im Browser gerendert sind, ist ein zusätzlicher Server-Roundtrip unnötiger Aufwand. Mit wenigen Zeilen Alpine.js lassen sich Tabellendaten direkt im Client in eine korrekt escapte CSV-Datei umwandeln und per Blob-URL zum Download anbieten, ohne dass ein zusätzlicher Request an den Server nötig wäre. Der eigentliche Aufwand steckt dabei weniger im Alpine.js-Teil als im korrekten Umgang mit Sonderzeichen, die im CSV-Format zu handfesten Fehlern führen können, wenn sie nicht sauber escaped werden.