Konzepte

Grundlegende Architektur des Webmate Studio Component-Systems.

Component-Struktur

Components sind Verzeichnisse mit definierter Struktur:

components/
└── MyComponent/
    ├── component.html      # HTML Template
    └── islands/            # Optional: JavaScript
        └── my-component.js

Warum Verzeichnisse?

• Co-location: Alles zusammen an einem Ort
• Übersichtlich: Struktur sofort erkennbar
• Versionierbar: Jede Component ist eigenständig

Props System

Props machen Components dynamisch und wiederverwendbar.

Props verwenden

<h1>{{title}}</h1>
<img wm:if="showImage" src="{{imageUrl}}" alt="{{title}}">

Props an Islands übergeben

<div
  data-island="hero"
  data-island-props='{"title": "{{title}}"}'
>
</div>

Prop-Typen:

• string - Text
• boolean - Checkbox
• number - Zahl
• select - Dropdown
• color - Farbwähler
• image - Bild-Upload
• richtext - WYSIWYG Editor

Mehr: Props & Data

Islands Architecture

Islands = Isolierte interaktive Bereiche in statischem HTML

Das Problem

Traditionelle SPAs laden JavaScript für alles:

<!-- ❌ 500kb JavaScript für statische Seite -->
<div id="app"></div>
<script src="bundle.js"></script>

Die Lösung

0kb JavaScript initial. Interaktivität nur wo benötigt:

<!-- ✅ Statisches HTML -->
<header class="bg-white">
  <h1>Static Header</h1>
</header>

<section class="hero">
  <h2>Static Content</h2>
</section>

<!-- Island: Nur hier JavaScript -->
<div data-island="contact-form">
  <!-- 5kb JavaScript, lazy-loaded -->
</div>

<footer class="bg-gray-900">
  <p>Static Footer</p>
</footer>

Vorteile

• Schnellere Ladezeiten - Weniger JavaScript
• Besseres SEO - Statisches HTML für Crawler
• Progressive Enhancement - Funktioniert ohne JavaScript
• Framework-Wahl - Verschiedene Frameworks pro Island

Wann verwenden?

Verwende Islands für:

• ✅ Formulare mit Validierung
• ✅ Image Carousels
• ✅ Interactive Charts
• ✅ Search/Filter UI
• ✅ Modals, Dropdowns
• ✅ Real-time Updates

Nicht verwenden für:

• ❌ Statischer Text
• ❌ Bilder
• ❌ Links
• ❌ Reine CSS-Animationen

Mehr: Islands Architecture

Tailwind CSS

Alle Components haben Zugriff auf Tailwind Utility Classes:

<div class="p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-900 mb-4">{{title}}</h2>
  <p class="text-gray-600">{{description}}</p>
  <button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark">
    {{ctaText}}
  </button>
</div>

Design Tokens

Semantische Farben vom CMS:

• text-primary, bg-primary, border-primary
• text-secondary, bg-secondary
• text-success, bg-success
• text-error, bg-error

Vorteil: CMS-Admins können Farben ändern, ohne Components anzupassen.

Mehr: Design Tokens

Hot Module Reload

Änderungen erscheinen sofort:

1. HTML bearbeiten → Browser aktualisiert
2. Island-Code ändern → Island wird neu initialisiert
3. Tailwind Class hinzufügen → CSS aktualisiert
4. Props ändern → Component wird neu gerendert

Kein manuelles Neuladen erforderlich!

Framework-Wahl

Wähle das beste Framework pro Island:

Framework	Runtime	Best For
Vanilla	0kb	Einfache Interaktionen
Svelte	~2kb	Reaktive UI, klein
Preact	~4kb	React-like, kleiner
Lit	~8kb	Web Components
Alpine	~15kb	HTML-first Reaktivität
Vue	~35kb	Komplexe Anwendungen
React	~45kb	Große Ökosystem

Mix & Match

Verschiedene Islands können verschiedene Frameworks verwenden!

Build-Prozess

Development

wm dev

• Islands on-the-fly gebundelt
• Tailwind CSS dynamisch generiert
• HMR aktiviert
• Source Maps enthalten

Production

wm build

• Statisches HTML generiert
• Islands gebundelt und minified
• Tailwind CSS (nur verwendete Classes)
• Für Performance optimiert

Output:

dist/
├── Hero/
│   ├── index.html
│   ├── styles.css
│   └── islands/
│       └── hero.js

Workflow

1. Development

   • wm generate - Component erstellen
   • HTML/Islands bearbeiten
   • wm dev - Preview

2. Production

   • wm build - Bauen
   • wm push - Hochladen mit Versionierung

3. Updates

   • Component-Dateien ändern
   • wm push - Neue Version hochladen

Nächste Schritte

• CLI Referenz - Alle Befehle
• Component Basics - Erste Component erstellen
• Props - Dynamische Daten
• Conditionals - wm:if Direktive
• Loops - wm:for Direktive
• Islands - JavaScript-Interaktivität