Islands Architecture

JavaScript-Interaktivität wo nötig, statisches HTML wo möglich.

Konzept

Islands = Isolierte interaktive Bereiche in statischem HTML

Statt die gesamte Seite mit JavaScript zu rendern, sind nur spezifische Bereiche (Islands) interaktiv.

Vorteile

Traditionelle SPA:

• 500kb JavaScript für alles
• Time to Interactive: 3-4s
• Auch statischer Content braucht JS

Islands:

• 0kb initial (nur HTML)
• Time to Interactive: <0.5s
• JS nur wo benötigt (+12kb per 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

Verwendung

1. Island erstellen

// islands/newsletter.js
export default class NewsletterIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.init();
  }

  init() {
    // Island Logic
  }

  destroy() {
    // Cleanup
  }
}

3. In HTML verwenden

<div
  data-island="newsletter"
  data-island-props='{"title": "{{title}}"}'
>
  <!-- Island übernimmt hier -->
</div>

Mehrere Islands

<div class="page">
  <!-- Navigation Island -->
  <div data-island="mobile-menu"></div>

  <!-- Statischer Content -->
  <main>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </main>

  <!-- Comments Island -->
  <div data-island="comments"></div>
</div>

Jedes Island:

• Lädt unabhängig
• Eigenes Framework möglich
• Eigener Lifecycle

Frameworks

Framework	Runtime	Datei
Vanilla	0kb	.js
Svelte	~2kb	.svelte + .js
Preact	~4kb	.jsx
Lit	~8kb	.js
Alpine	~15kb	.js
Vue	~35kb	.js
React	~45kb	.jsx

Best Practices

1. Kleine Islands

Fokussiert auf eine Aufgabe.

2. Progressive Enhancement

Island enhancet HTML, ersetzt es nicht:

<!-- Funktioniert ohne JS -->
<form action="/api/subscribe" method="POST">
  <input name="email">
  <button>Subscribe</button>
</form>

<!-- Island fügt Validierung hinzu -->
<div data-island="newsletter-form"></div>

3. Lazy Loading

Islands laden nur bei Bedarf (automatisch via Intersection Observer).

Nächste Schritte

• Component Basics - Grundlagen
• wm generate - Island erstellen
• Props - Props an Island übergeben