COMPOSABLE COMMERCE ENGINEERING
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH-Architektur für maximale Performance, Flexibilität und Ownership — ein modernes Commerce-Betriebssystem, das Frontend und Backend sauber trennt.
Headless bedeutet nicht mehr nur 'das Frontend abkoppeln'; es ist eine composable Operation, in der nach MACH-Prinzipien (Microservices + API-first + Cloud-native + Headless) Frontend, Commerce Engine, CMS, Search, Payment und Identity best-in-class ausgewählt und auf der Edge komponiert werden.
Der E-Commerce 2026 steht unter drei Belastungen: monolithische Theme-Systeme stoßen an die Grenzen von Geschwindigkeit und Flexibilität, Edge Runtimes (Cloudflare Workers, Vercel Edge, Shopify Oxygen) sind zur primären Auslieferungsschicht geworden, und React Server Components + streaming SSR haben TTFB von Sekunden auf wenige hundert Millisekunden gesenkt. Die meisten Marken glauben immer noch, 'Hydrogen = nur Shopify', und bewerten Stacks wie commercetools / BigCommerce / Saleor in Kombination mit Next.js + Sanity / Contentful + Algolia gar nicht. Die Headless-Operation von Roibase ruht auf sechs Prinzipien.
METHODIK
Composable-Commerce-Operation in 6 Schichten
Assess → Architect → Compose → Migrate → Launch → Observe. Jede Schicht wird mit Deliverable + ADR + SLA übergeben.
01
ASSESS
Bewertung des bestehenden Stacks (Monolith/Themes, Apps, CDN), Performance-Baseline, SEO-Risiken, Betriebskosten und Teamkapazität.
02
ARCHITECT
MACH-Architektur, Vendor-Shortlist (Engine/CMS/Search/Payment/Identity), Edge-Strategie, ADR-Dokumente, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), Integration der composable Backends, GraphQL Gateway, Event Bus (Webhook + Queue), Feature Flags.
04
MIGRATE
Daten-ETL (Catalog/Customer/Order/Content), 301-Mapping + hreflang + Sitemap, Staging-Parität, feature-complete Smoke Test.
05
LAUNCH
Canary Rollout, Launch mit Feature Flags, RUM + Sentry, BFCM-ready Stress Test, Weekend On-call + War Room.
06
OBSERVE
SLO/SLI-Tracking, monatliches Performance-QBR, SEO-Ranking-Monitoring, Cost Review, ADR-Updates, Runbook + Schulung + Handoff.
— VERGLEICH
Monolithisches Theme vs. Template-only Headless vs. Roibase Composable Commerce
Die Unterschiede der drei Ansätze in Performance, Flexibilität, Vendor-Lock-in, SEO und TCO.
| Dimension | Monolithisches Theme | Template-only Headless | Roibase Composable Commerce |
|---|---|---|---|
| Architektur | Einzelner Monolith | Template + einzelnes Backend | MACH + composable + Edge |
| Vendor-Flexibilität | Plattform-Lock-in | Engine-Lock-in | Best-of-breed-Auswahl (pro Schicht) |
| Edge Runtime | Keine | Teilweise | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2,5–4,5 s | 2,0–2,8 s | < 1,5 s Baseline + RUM |
| Content + CMS | Plattform-CMS (eingeschränkt) | Einzelnes CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native Suche | Elasticsearch/Algolia Einstieg | Algolia/Typesense/Coveo + KI-Relevance |
| SEO | Theme-abhängig | SPA-risikobehaftet | SSR + Schema + 301 + hreflang-Engineering |
| TCO im 24. Monat | Niedrig, aber technische Schulden | Mittel + Single-Vendor-Risiko | Mittel + Ownership + Flexibilität + Geschwindigkeit |
PROOF
Outcomes, measured
75p mobil; nach Headless-Migration + Edge Runtime.
6-Monats-Durchschnitt nach Performance + streaming SSR + Edge Cache.
Im 12. Monat nach SEO-Preservation + Schema + hreflang + grünen Core Web Vitals.
Globale CDN auf Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Nach Strategie aus ISR + partial prerendering + Edge Cache.
Engine + CMS + Search + Identity — jede separat iterierbar.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + Edge-Deployment (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server Components + streaming + partial prerendering (Next 15) + Turbopack; Vercel Edge Deployment + ISR + SWR.
Composable Commerce Engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; best-fit Engine-Auswahl + GraphQL + Webhook + event-getriebene Flows.
Headless-CMS-Integration
Sanity, Contentful, Storyblok, Hygraph, Strapi; Content-Modell, Preview Mode, Editorial Workflow + Live Preview.
Search + Merchandising
Algolia / Typesense / Coveo / MeiliSearch; Instant Search, federierte Suche, KI-basiertes Relevance Tuning, Merchandising Rules.
Edge Caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, Edge Middleware.
Core-Web-Vitals-Engineering
Budget LCP < 1,5 s / INP < 200 ms / CLS < 0,05; Font Preload + Image Optimization + Critical CSS + Bundle Splitting + RUM.
Identity + Payment + Subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; Passkey + SCA + 3DS2 + Apple/Google Pay.
Migrations-Playbook
Von Magento / WooCommerce / Legacy-Shopify / BigCommerce nach Headless; 301-Mapping, Feature-Parität, Staging/Canary, Go-Live-Weekend.
A/B + Feature Flags + Observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; Canary Rollout + Rollback + SLO/SLI-Metric-Tree.
— NUTZEN
Die konkrete Wirkung auf Ihre Commerce-Infrastruktur
Wenn Edge Runtime + composable + Performance + SEO-Preservation + Observability zusammenspielen, hängt der ROI nicht mehr an einer einzigen Kennzahl.
Deutlich höhere Geschwindigkeit
Streaming SSR + Edge Runtime + RSC halbieren den LCP und bringen Mobile-Conversion sowie Core Web Vitals ins Grüne.
Conversion wächst
Speed + Personalisierung + flexiblere UX senken Funnel-Drops und die Warenkorb-Abbruchrate.
SEO-Ranking bleibt stabil und wächst
Durch SSR + schema.org + 301 + hreflang + Sitemap-Engineering bleibt der Migrationsdip auf 2–3 Wochen begrenzt, danach Ranking-Anstieg.
Vendor-Flexibilität öffnet sich
Engine / CMS / Search / Identity lassen sich in jeder Schicht austauschen; Vendor-Lock-in und jährlicher Preisdruck nehmen ab.
Produktgeschwindigkeit steigt
Mit Feature Flags + Canary + ISR lassen sich neue Features nicht täglich, sondern stündlich ausrollen; die Experimentiergeschwindigkeit steigt.
Betriebskosten sinken
Composable Services ersetzen auf den Monolithen gestapelte Apps; Edge Cache reduziert Origin-Last, die Infrastrukturkosten werden optimiert.
LIEFERUMFANG
Was Sie bei jedem Headless-Engagement erhalten
Feste Liefer-Liste im Paket Setup + 6 Monate Betrieb; keine versteckten Zusatzkosten.
Headless-Feasibility- + ROI-Report
Audit des bestehenden Stacks, TCO-Modell, Performance-Baseline, SEO-Risiken, Bewertung der Teamkapazität; 50–80 Seiten.
MACH-Architektur + ADR-Dokumente
Entscheidungen zu Engine + CMS + Search + Payment + Identity + Edge + CI/CD, jeweils begründet als ADRs.
Framework-Auswahl + POC
Entscheidungsmatrix Hydrogen / Next.js / Remix / Nuxt + 2–3 Wochen POC + Performance-Benchmark-Report.
Composable-Backend-Setup
Integration von commercetools / Saleor / BC / Shopify Storefront API + GraphQL Gateway + Webhook + Event Bus.
Headless-CMS-Schema
Sanity / Contentful / Storyblok Content-Modell, Preview Mode, Editorial Workflow + Live Preview.
Search + Merchandising
Setup von Algolia / Typesense / Coveo + Index-Schema + KI-Relevance-Tuning + Merchandising Rules.
Edge-Runtime- + Cache-Strategie
Deployment auf Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + Edge Middleware.
Identity + Payment + Subscription
Integration von Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Passkey + SCA + 3DS2-konforme Flows.
SEO-Preservation-Paket
301-Mapping, Canonicals, schema.org, hreflang, Sitemap, robots, ITA (International Targeting); Ranking-Monitoring-Dashboard.
Feature-Flag- + A/B-Infrastruktur
GrowthBook / Statsig / LaunchDarkly + Canary + Kill Switch + Experiment-Metric-Tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; Incident-Runbook.
Runbook + Schulung + 3 Monate Support
Runbook für Architecture + Deploy + Rollback + Monitoring, Team-Schulungen, 90 Tage Support + On-call.
— LEISTUNGSUMFANG
Was wir leisten — und was wir nicht leisten
Der Scope für Composable Commerce ist schriftlich fixiert; Überraschungen und Nachberechnungen sind ausgeschlossen.
Wir leisten
- MACH + Composable-Commerce-Architektur + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- Sanity / Contentful / Storyblok Headless CMS
- Algolia / Typesense / Coveo Search + Merchandising
- Edge Runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO Preservation (301 / Schema / hreflang / Sitemap)
- Feature Flags + Canary + Rollback + Observability
- Integration von Identity + Payment + Subscription
- Core-Web-Vitals-Engineering + RUM
- Runbook + Schulung + 90 Tage Support + On-call
Wir leisten nicht
- Entwicklung monolithischer Magento-/WooCommerce-Themes (nur Migration)
- Kernentwicklung von ERP / OMS / WMS (wir integrieren)
- Bewirtschaftung von Werbebudgets (Acquisition-Einheit als separates Engagement)
- Physische Logistik / Lager / Customs-Betrieb
- Kreditkartenverarbeitung / PCI-Scope-Ownership (bleibt beim Payment-Vendor)
- Banking- / KYC- / AML-Regulatorik (mit Partnerfirmen)
- Outsourcing des Kundenservice (wir richten Tools ein, der Betrieb bleibt beim Kunden)
- Fake Reviews / Bot-Traffic / künstliche Speed-Manipulation
HOW WE WORK
12–16 Wochen Setup + Migration, danach monatlicher Betrieb
Woche 1–2: Assess + Feasibility
Audit des bestehenden Stacks, Performance-Baseline, SEO-Risiken, TCO-Modell, Teamkapazität + ADR-Entwurf.
Woche 3–4: Architect + Vendor-RFP/POC
MACH-Architektur, Shortlist für Engine/CMS/Search/Payment/Identity + RFP + 2–3 Wochen POC.
Woche 5–6: Compose + Framework-Setup
Setup von Hydrogen / Next.js, Integration von Storefront API / Commerce Engine, GraphQL Gateway, Edge-Runtime-Deployment.
Woche 7: CMS + Search + Merchandising
Sanity- / Contentful-Content-Modell, Algolia- / Typesense-Index + Relevance Tuning, Merchandising Rules.
Woche 8: Identity + Payment + Subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + Passkey + Accelerated Checkout.
Woche 9–10: Daten-ETL + 301-Mapping
ETL für Catalog / Customer / Order / Content, URL-Mapping, 301-Plan, hreflang + Sitemap + Schema.
Woche 11–12: Staging + Canary + BFCM-Stress
Staging-Parität, Smoke Test, Canary Rollout, Launch mit Feature Flags, BFCM-Stress-Test + War-Room-Plan.
Ab Woche 13: Go-live + Observe + QBR + Support
Go-Live-Weekend-Playbook, RUM + Sentry + SLO/SLI, monatliches QBR, Runbook + Schulung + 3 Monate Support.
— TOOLKIT
Unsere Tools — vendor-agnostisch, aber mit klarer Auswahl
Wir wählen pro Kunde das passende Tool; unsere Unabhängigkeit wahren wir, indem wir keine Provisionen annehmen.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSAR
Grundbegriffe des Composable Commerce
Die gemeinsame Sprache für Engineering-, Produkt-, Operations- und Marketing-Teams.
- MACH
- Abkürzung für Microservices + API-first + Cloud-native + Headless; das Framework der Composable-Commerce-Architektur, definiert durch die MACH Alliance.
- Composable Commerce
- Eine Commerce-Architektur, in der statt einer einzelnen monolithischen Plattform für jede Funktion ein Best-of-breed-Vendor ausgewählt und komponiert wird; Engine + CMS + Search + Payment + Identity sind separate Services.
- Headless
- Die Trennung der Schicht zwischen Frontend (Presentation) und Backend (Commerce Engine / CMS) über APIs; dadurch kann das Frontend in beliebigen Frameworks und Runtimes laufen.
- React Server Components (RSC)
- Mit React 18+ eingeführtes Component-Modell, das auf dem Server gerendert wird und keinerlei JavaScript an den Client sendet; Next.js App Router und Shopify Hydrogen nutzen es nativ und senken Bundle- und Hydration-Kosten.
- Streaming SSR
- Ein Rendermodus, bei dem das HTML einer Seite nicht in einem Stück, sondern ab den ersten fertigen Teilen im Stream vom Server zum Client gesendet wird; TTFB und LCP sinken.
- Edge Runtime
- Eine Runtime, in der Code auf dem geografisch nächsten CDN-Node zum Nutzer ausgeführt wird; Cloudflare Workers, Vercel Edge und Shopify Oxygen sind die bekanntesten Beispiele. Minimale Latenz, globale Konsistenz.
- ISR (Incremental Static Regeneration)
- Die periodische oder Trigger-basierte Regenerierung statisch gebauter Seiten im Hintergrund; vereint statische Geschwindigkeit mit frischen Daten.
- Stale-While-Revalidate (SWR)
- HTTP-Cache-Strategie; dem Nutzer wird sofort Stale-Content gezeigt, während im Hintergrund die frische Version abgerufen wird. Balance aus Speed und Freshness.
- Storefront API
- Shopifys öffentliche GraphQL-API; ermöglicht Headless / Custom Frontends / Mobile Apps den Zugriff auf Produkt-, Collection-, Cart- und Checkout-Daten.
- commercetools
- Eine Composable-Commerce-Engine; API-first + MACH-konform, eine der am häufigsten genutzten Engines für Enterprise-B2B- und B2C-Szenarien. Inklusive commercetools Frontend + Studio-Ökosystem.
- ADR (Architecture Decision Record)
- Ein Dokumentationsformat, das Kontext, Optionen, Ergebnis und Tradeoffs einer Software-Architekturentscheidung schriftlich festhält; Standard für Vendor-Entscheidungen in Composable Stacks.
- Feature Flag
- Ein Feature-Schalter, der unabhängig vom Deploy zur Laufzeit ein- oder ausgeschaltet werden kann; wird für Canary Releases, A/B-Tests und Kill-Switch-Szenarien eingesetzt; zentrale Tools sind GrowthBook/Statsig/LaunchDarkly.
- SSR (Server-Side Rendering)
- HTML auf dem Server rendern und fertig an den Browser ausliefern. Schlägt CSR bei SEO und LCP; Standardmodus von Frameworks wie Nuxt 3, Next.js, Remix. Im Skalieren braucht es Edge-Caching und eine durchdachte Hydration-Strategie.
- CSR (Client-Side Rendering)
- Auslieferung einer fast leeren HTML-Hülle + JS-Bundle und Rendering im Browser. Typische SPA-Variante; First Paint ist langsam, SEO braucht zusätzliches Route-Prerendering. LCP bricht bei schwachem Netz oder Low-End-Geräten stark ein.
- Edge Functions
- Leichtgewichtige Compute-Schicht direkt im CDN (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Geo-Routing, A/B-Test-Bucketing, Header-Manipulation und Auth in Millisekunden, ohne zum Origin zurückzukehren; nahezu kein Cold Start.
- CDN (Content Delivery Network)
- Netzwerk, das statische (und zunehmend dynamische) Inhalte auf geografisch verteilten Edge-Nodes cached. Senkt TTFB und LCP, schützt den Origin vor DDoS und Lastspitzen. Cloudflare, Fastly, Akamai, AWS CloudFront — Pflichtbestand jedes modernen Stacks.
- Frontend
- Die Schicht, die der Nutzer im Browser sieht und mit der er interagiert — HTML, CSS, JS, visuelle Assets und Runtime-Verhalten zusammen. Lebt getrennt vom Backend; gängige Frameworks: Vue/Nuxt, React/Next, Svelte/SvelteKit; erste Verteidigungslinie für Performance, A11y und SEO.
- Backend
- Die serverseitige Schicht für Geschäftslogik, Datenbankzugriff, Authentifizierung, Zahlungen und Integrationen. Stellt die APIs bereit, die das Frontend konsumiert; meistgenutzte Stacks: Node.js, Python, Go, .NET; eigentlicher Eigentümer von Skalierung, Sicherheit und Datenkonsistenz.
- Component-based Architecture
- Frontend-Architektur, die das UI in isolierte, wiederverwendbare und einzeln testbare Bausteine zerlegt. Das Kern-Paradigma von Vue/React/Svelte; das physische Pendant eines Design Systems, senkt Refactor-Kosten und visuelle Inkonsistenz.
- State Management
- Disziplin, wo geteilter Daten- und UI-State im Frontend lebt, wie er sich aktualisiert und an Components propagiert. Pinia (Vue), Redux/Zustand (React), Svelte Stores; in komplexen Produkten Basis für Rendering-Performance und Fehler-Nachvollziehbarkeit.
- Code Splitting
- Statt eines einzigen großen JS-Bundles pro Route oder Feature getrennte Chunks erzeugen und nur dort laden, wo gebraucht. Kernoptimierung von Vite/Webpack/Rollup; direkter Effekt auf LCP und TTI, meist gemeinsam mit Lazy Imports + Dynamic Routes diskutiert.
- Lazy Loading
- Technik, die Inhalte (Bild, Component, Route, Library) erst lädt, wenn sie wirklich gebraucht werden. Nativ über <img loading="lazy">, in Frameworks über Dynamic Imports; senkt First-Paint-Zeit und Datenverbrauch deutlich.
- SPA (Single Page Application)
- App-Typ, der die komplette Shell beim ersten Aufruf lädt und alle weiteren Navigationen per Client-Side Router abwickelt. Fühlt sich instant an; erster Paint schwer, SEO braucht zusätzliches Prerendering, weiterhin beliebt für App-artige und Hidden-Route-Oberflächen.
- PWA (Progressive Web App)
- Web-App, die aus dem Browser installierbar ist, offline läuft und Push-Notifications empfängt. Basiert auf Service Workern + Web App Manifest; verhält sich wie eine Native-App, ohne ASO oder Store-Distribution.
- SSG (Static Site Generation)
- Alle Seiten zur Build-Zeit als HTML erzeugen und vom CDN ausliefern. Maximale Performance bei minimalen Infrastrukturkosten; ideal für selten ändernde Inhalte (Blog, Marketing, Docs, Glossar) — Nuxt generate, Next.js export, Astro.
- Web Component
- Der browser-native Framework-unabhängige Component-Standard: Custom Elements + Shadow DOM + HTML Templates. Mit Stencil/Lit gebaut, in jedem Framework nutzbar; verwandelt ein Design System in portable Bausteine über React/Vue/Svelte hinweg.
- REST API
- Architekturstil, der über HTTP-Verben (GET/POST/PUT/PATCH/DELETE) und ressourcen-basierte URLs kommuniziert. Stateless, transportiert meist JSON, dokumentiert via OpenAPI; weiter Standard-Integrationspunkt von ca. 80 % aller Web- und Mobile-Apps.
- GraphQL
- Eine Query-Language + Runtime, die den Client in einer einzigen Query nur die wirklich benötigten Felder anfordern lässt. Alternative zu REST-Over/Under-Fetching; Typsystem und Schema-First verbessern die Frontend-DX deutlich.
- Webhook
- Pattern, bei dem ein System bei einem Event (Zahlung abgeschlossen, Bestellung angelegt) per HTTP POST eine vorab registrierte URL benachrichtigt. Gegenteil von Polling — Echtzeit, ressourcensparend; Signature-Verifikation und idempotentes Handling sind Pflicht.
- JWT (JSON Web Token)
- Kompakter, selbst-validierbarer Token-Standard im Format Header.Payload.Signature. Für stateless Authentication zwischen SPA und API; Ablauf-Claims, Refresh-Token-Rotation und Secret-Management sind die entscheidenden Stellschrauben.
- OAuth 2.0
- Delegationsprotokoll, mit dem ein Nutzer einer Third-Party-App eingeschränkten Zugriff gewährt, ohne sein Passwort herauszugeben. Authorization Code + PKCE ist der moderne Web-Standard-Flow; Basis von "Mit Google anmelden" und "Slack-App verbinden".
- Rate Limiting
- Schicht, die Requests pro Sekunde oder Minute an einer API begrenzt, um Missbrauch, Brute-Force-Angriffe und Kostenexplosionen zu verhindern. Umsetzung per Token-Bucket oder Sliding-Window; X-RateLimit-*-Response-Header sind De-facto-Standard.
- API Gateway
- Reverse-Proxy-Schicht, durch die der gesamte externe API-Traffic an einem Punkt fließt. Authentication, Rate Limiting, Routing, Request/Response-Transformation und Metrik-Sammlung zentral; AWS API Gateway, Kong, Apigee, Cloudflare API Gateway sind gängig.
- Design Pattern
- Bewährtes Rezept für ein wiederkehrendes Problem in Software-Architektur (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator u. a. 23 Klassiker; gemeinsames Vokabular, das Refactor-Diskussionen und Code Review beschleunigt.
- Monorepo
- Mehrere Projekte/Libraries in einem einzigen Git-Repo halten. Nx, Turborepo, pnpm workspaces; ermöglicht Cross-Package-Refactor, Atomic Commits und shared Tooling — verlangt aber mit Wachstum ernsthafte Build-System-Disziplin.
- TDD (Test-Driven Development)
- Schleife: erst einen fehlschlagenden Test schreiben → minimalen Code zum Bestehen → refactoren (Red-Green-Refactor). Lässt Tests das Design formen, fängt Regressionen, dokumentiert Intention — passt aber nicht zu jedem Team/Projekt, braucht Disziplin.
- Refactoring
- Verbesserung der inneren Code-Struktur ohne Änderung des äußeren Verhaltens — für Lesbarkeit, Einfachheit, Testbarkeit. Test-Coverage ist Voraussetzung (Sicherheitsnetz), kleine Schritte + Commits ist die Rhythmusregel, IDE-Refactor-Tools (Extract Method, Rename) sind Standard.
- Semantic Versioning (SemVer)
- Versionsnummern-Schema im Format MAJOR.MINOR.PATCH: MAJOR = Breaking Change, MINOR = Rückwärts-kompatibles Feature, PATCH = Bugfix. Gemeinsame Sprache der npm-/PyPI-/Cargo-Ökosysteme; Basis für Range-Operatoren wie "^1.2.3".
- Race Condition
- Bug, der entsteht, wenn zwei oder mehr Threads/Prozesse in unvorhersehbarer Reihenfolge auf eine gemeinsame Ressource zugreifen. Lösung über Mutex, Semaphore, atomare Operationen, immutable State oder Single-Writer-Pattern; eine der schwer zu debuggenden Bug-Klassen.
- Idempotency
- Eigenschaft, bei der das System nach N gleichen Requests im selben Zustand ist wie nach einem. PUT, DELETE sind natürlich idempotent; für POST nutzt man einen Idempotency-Key-Header (Stripe, Payment-Webhooks). Pflicht-Voraussetzung für Distributed Retries.
- Memory Leak
- Programm, das Speicher nicht freigibt, der nicht mehr gebraucht wird — RAM-Verbrauch wächst und endet im OOM-Crash. In JS detached DOM-Refs + Closure-Captures, in Node Leaked Event Listener, in DI-Containern festgehaltene Referenzen — die üblichen Übeltäter.
- Garbage Collection (GC)
- Runtime-Mechanismus, der automatisch nicht mehr erreichbare Speicherbereiche erkennt und freigibt. JS V8 = generational + incremental, Java/JVM = ZGC/G1, Go = concurrent Mark-Sweep; Alternative zum manuellen Memory Management (C/C++).
- Concurrency vs Parallelism
- Concurrency = mit vielen Aufgaben gleichzeitig umgehen (Struktur), Parallelism = viele Aufgaben gleichzeitig ausführen (Hardware). Single-Core Async I/O ist concurrent; Multi-Core Thread Pool ist parallel — oft verwechselt, aber unterschiedliche Konzepte.
- Immutability
- Prinzip, dass eine Datenstruktur nach Erstellung nicht modifiziert werden kann — jede "Änderung" erzeugt eine neue Kopie. Basis der funktionalen Programmierung und natürliche Verteidigung gegen Race Conditions in React-State, Redux, Vue Pinia und Concurrent Code; Structural Sharing hält die Performance vertretbar.
- Dependency Injection (DI)
- Pattern, in dem eine Component ihre Abhängigkeiten von außen erhält statt sie selbst zu instanziieren. Steigert Testbarkeit (Mock Injection), lose Kopplung und Konfigurations-Flexibilität enorm; Spring, Angular, NestJS, Vue provide/inject nutzen es.
- Polyfill
- Code, der eine moderne JS-API (fetch, Array.flat, Promise) in alten Browsern nachbaut. Wird normalerweise zur Build-Zeit per @babel/preset-env oder core-js basierend auf Target-Browsern injiziert; soll NICHT an moderne Browser ausgeliefert werden (Bundle-Bloat).
- Regex (Regular Expression)
- Mini-Sprache zum Definieren von Text-Mustern für Suche, Matching, Parsing und Replace. Syntax aus Character-Klassen + Quantoren + Anchors wie /^\d{3}-\d{4}$/; in jeder Sprache (JS, Python, Go) unterstützt — soll aber nicht zum HTML-Parsen verwendet werden.
- SDK (Software Development Kit)
- Library + Doku-Paket, das eine Integration mit einer Plattform/Service (Stripe, AWS, Twilio) erleichtert. Ersetzt rohe HTTP-API-Calls durch type-safe Methoden, eingebaute Retries, Auth-Helfer und Test-Tooling.
- Callback Hell
- Tiefe Pyramidenform des Codes, die durch stark verschachtelte Callbacks entsteht (.then().then().then()...). Gelöst durch Promises + async/await; überlebt heute vor allem in jQuery-Legacy und alten Node.js-Libraries.
- Code Review
- Praxis, dass andere Entwickler den Code eines Kollegen vor dem Merge lesen und kritisieren. Findet Bugs, verteilt Wissen und sichert Konsistenz; PR-basierter GitHub/GitLab-Workflow ist Standard — gesund ist eine "Discussion"-Tonart, nicht Blocking Gatekeeping.
- Pair Programming
- Zwei Entwickler arbeiten an einem Rechner — der Driver schreibt Code, der Navigator denkt Strategie und entdeckt Fehler. Verbessert Wissenstransfer, Code-Qualität und Onboarding-Tempo; Remote läuft es über VS Code Live Share oder JetBrains Code With Me.
- Technical Debt
- "Zu zahlende" Komplexität, die sich aus Quick-Fixes und Shortcut-Designentscheidungen aufbaut. Refactor-Kosten wachsen wie Zinsen; Management braucht Debt-Log, Sichtbarkeit (Tech-Debt-Board) und 15-20 % Sprint-Kapazität für die Rückzahlung.
- Long Task
- JS-Arbeit, die den Main-Thread des Browsers länger als 50 ms blockiert. Hauptgegner von INP und TBT; muss via Debounce, requestIdleCallback, Web Workers oder Time-Slicing (Yielding) zerlegt werden. Erscheint als rote Balken im Chrome-DevTools-Performance-Panel.
- Speculation Rules API
- Neues API in Chrome 109+, das Seiten im Hintergrund vorrendert, basierend auf "der Nutzer besucht diesen Link wahrscheinlich". Eine JSON-Liste definiert Prerender-/Prefetch-Ziele, die nächste Seite öffnet sofort. Die browser-native Version klassischer SPA-Performance-Tricks.
- View Transitions API
- Natives Browser-API in Chrome 111+, das SPA-artige weiche Übergänge zwischen Seiten oder State-Änderungen erzeugt. Eine in document.startViewTransition() gewrappte DOM-Mutation erzeugt automatisch Fade-/Slide-Animationen; kombinierbar mit SPA-Frameworks.
- Container Queries
- CSS-Feature, das eine Komponente nach der Größe ihres eigenen Containers stylt — nicht via @media. Eine Card kann bei 300 px kompakt und bei 600 px breit gerendert werden, ohne dass das Viewport sich ändert. Seit 2023 in allen modernen Browsern; fehlendes Glied im Component-Driven-Design.
- CSS Cascade Layers (@layer)
- CSS-Feature von 2022, das Specificity-Kriege auflöst. Mit @layer reset, base, components, utilities ist die Layer-Reihenfolge eindeutig — selbst ein !important in einer unteren Schicht verliert gegen einen normalen Stil in der oberen. In Tailwind v4 und Bootstrap 5+ Standard.
- CSS Houdini
- Familie von W3C-APIs, mit denen JavaScript die CSS-Rendering-Pipeline des Browsers erweitert. Paint API (Custom Backgrounds), Layout API (Custom Flex/Grid), Properties & Values API. Effekte, die nativ nicht in CSS existieren, lassen sich GPU-beschleunigt statt als JS-Polyfill realisieren.
- WebGPU
- Nachfolger von WebGL — modernes Grafik- und Compute-API. Gibt rohen GPU-Zugriff via Vulkan/Metal/DirectX 12 und ermöglicht im Browser Spiele in nativer Qualität, AI-Inference und Scientific Computing. Mit Chrome 113 allgemein verfügbar; treibt Stable-Diffusion- und LLM-Inference-Web-Demos.
- WebAssembly (WASM)
- Low-Level-Bytecode, der im Browser nahe nativer Geschwindigkeit läuft, kompiliert aus Sprachen wie C/C++/Rust/Go. Treibt Figma, Photoshop Web, AutoCAD Web, Stockfish-Schach-Engine; ideal für Szenarien mit 5-20× JS-Performance-Bedarf.
- Service Worker
- JS-Proxy zwischen Browser und Netzwerk, der auch nach Schließen der Seite weiterläuft. Fundament von Offline-First-PWA-Cache-Strategien, Push-Notifications und Background-Sync. Workbox-Library ist das gebräuchlichste Werkzeug.
- Workbox
- Google-JavaScript-Library, die das Schreiben von Service Workern vereinfacht. Liefert fertige Cache-Strategien (Cache-First, Network-First, Stale-While-Revalidate), Precaching, Runtime-Caching und Background-Sync-APIs. Standard in PWA-Build-Pipelines (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- Technik, die das minimale CSS für den Above-the-Fold-Bereich inline in den HTML-<head> setzt. Während externe Render-Blocking-CSS-Dateien parallel laden, verbessern sich FCP/LCP um 200-500 ms. Tools wie critters, beasties und penthouse automatisieren den Workflow.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- <link>-Tags, die dem Browser sagen "diese Ressource wird bald gebraucht". preload: kritisches Asset der aktuellen Seite (Font, Hero); prefetch: nächste Navigation; preconnect: TLS-Handshake vorzeitig; dns-prefetch: nur DNS-Lookup. Richtig eingesetzt, senken sie LCP um ~500 ms.
- fetchpriority
- HTML-Attribut / fetch()-Option, das <img>, <link> oder fetch()-Requests "high"/"low"/"auto"-Priorität zuweist (Chrome 101+). Überschreibt die Default-Resource-Priority des Browsers; fetchpriority="high" am LCP-Image bringt dramatische Beschleunigung.
- HTTP/3 (QUIC)
- Dritte HTTP-Generation auf Basis des Google-QUIC-Protokolls über UDP statt TCP. 0-RTT-Verbindung (TLS-Handshake im ersten Paket), kein Head-of-Line-Blocking, keine Verbindungsabbrüche bei Mobile-Netzwechseln. Standard auf Cloudflare, Akamai, Fastly.
- Brotli (compression)
- 2015 von Google eingeführter HTTP-Content-Encoding-Algorithmus, der 15-25 % besser komprimiert als Gzip. 95 %+ der modernen Browser unterstützen ihn; statische Assets werden zur Build-Zeit mit Brotli-11 vorkomprimiert, dynamisches HTML zur Laufzeit mit Brotli-4/5.
- Edge Compute
- Paradigma, Code auf Edge-Nodes nahe am Nutzer statt am Origin auszuführen. Cloudflare Workers, Vercel Edge Functions, Netlify Edge, Fastly Compute@Edge senken Latenz auf 20-50 ms; A/B-Tests, Geo-Redirects und Auth-Header-Injection passieren am Edge.
- Streaming Hydration
- Technik, bei der der Server HTML chunkweise streamt und React/Vue Hydration mit jedem Chunk parallel startet. React-18-Suspense + Server Components, Nuxt 3 und Qwiks Resumability gehen in diese Richtung. Senkt TTFB und TTI, indem sie überlappen.
- Islands Architecture
- Von Astro populär gemachte "Default Static + Interactive Islands"-Architektur. Der Großteil der Seite wird mit null JS prerendert; nur interaktive Komponenten ("Inseln") hydratisieren. JS-Bundles schrumpfen 70-90 %, Performance-Scores steigen. Ideal für content-lastige Sites.
- Partial Hydration
- Technik, die statt der gesamten Seite nur sichtbare oder interaktive Komponenten hydratisiert. Beispiele: Vue 3.5 hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction sowie React Lazy + Suspense. Grundmechanismus hinter der Islands-Architektur.
- Tree Shaking
- Bundler-Optimierung (Webpack, Rollup, esbuild, Vite), die ungenutzten Code (Dead Code) aus dem Production-Bundle entfernt, indem der ES-Module-Import/Export-Graph gewalkt wird. Bei Side-Effect-Free-Paketen schrumpfen Bundles 30-70 %; Hinweis: "sideEffects: false" in package.json.
- Web Worker
- Browser-API, das JavaScript in einem separaten Thread außerhalb des Main-Threads ausführt. Schwere Rechenarbeit (Image Processing, Encryption, Parsing) und große Array-Sortierungen laufen im Worker, ohne den Main-Thread zu blockieren. Die Comlink-Library verwandelt die Message-API in RPC.
- Shared Worker
- Ein einziger Web Worker, der von mehreren Tabs/IFrames derselben Origin geteilt wird. Genutzt für Cross-Tab-State-Sync (Login-Status, Real-Time-Events), eine einzige geteilte WebSocket-Verbindung und einen Shared Cache. Unterschied zum Service Worker: Shared Worker dient roher Compute-Arbeit.
- Cache Storage API
- Modernes asynchrones API im Service Worker, das Request-/Response-Objekte als Key-Value speichert. caches.open() öffnet einen Cache; .put / .match manipulieren ihn. Fundament von PWA-Precaching und Runtime-Caching; behält HTTP-Semantik, anders als LocalStorage.
- ETag
- Versions-Fingerprint (Hash) einer HTTP-Response. Beim nächsten Request schickt der Browser ihn via If-None-Match zurück; bei unverändertem Inhalt liefert der Server 304 Not Modified und spart die erneute Übertragung. Kernmechanismus für Static-Asset-Caching und API-Response-Validierung.
- Sustainable Web Manifesto
- Sechs-Prinzipien-Erklärung (Clean, Efficient, Open, Honest, Regenerative, Resilient) zur Reduktion des Umwelt-Impacts einer Website. Veröffentlicht 2019 von Wholegrain Digital + Mightybytes; Grundlagenreferenz dafür, dass das Web 2-3,7 % globaler Emissionen ausmacht.
- Website Carbon Footprint Calculator
- Offener Service, der die Carbon-Emission einer Website pro Page-View berechnet. Verbreitetster: websitecarbon.com von Wholegrain Digital; Formel: Daten-Transfer × Carbon-Intensity der CDN-Region × User-Device-Faktor. Ziel 1 g CO₂/Page-Load; Durchschnitt 2-5 g, schwere Animation/Video 8-15 g.
— ENTSCHEIDUNGSBAUM
Ist eine Composable-Commerce-Operation für Sie passend?
Beantworten Sie 4 Fragen mit Ja/Nein — und erhalten Sie eine klare Empfehlung.
01 / 04
Beträgt Ihr jährlicher GMV mindestens 2 Mio. $ oder betreiben Sie aktiv B2B?
Mindestschwelle für den ROI einer MACH- + Composable-Investition; kleinere Shops erzielen mit OS 2.0 schneller ROI.
— LET'S BEGIN
Was bremst die Frontend-Geschwindigkeit Ihres E-Commerce — fast jede Woche aufs Neue?
Wir scannen Ihre bestehende Website und erstellen Web Vitals, Cache-Strategie, SEO-Risikokarte und Headless-ROI-Modell.