Alpine.js Islands

HTML-first, deklaratives Framework - wie Tailwind für JavaScript.

Überblick

Bundle-Größe: 14-15kb (Alpine Runtime)

Alpine.js ermöglicht es dir, reaktive UIs direkt im HTML zu schreiben.

Grundstruktur

// islands/counter.js
import Alpine from 'alpinejs';

export default class CounterIsland {
  constructor(element, props = {}) {
    this.element = element;
    const title = props.title || 'Counter';

    const html = `
      <div x-data="{ count: 0 }" class="p-6 bg-white rounded-lg border">
        <h3 class="text-lg font-semibold mb-4">${title}</h3>
        <p class="mb-2">Count: <span x-text="count"></span></p>
        <p class="mb-4 text-gray-600">Doubled: <span x-text="count * 2"></span></p>
        <div class="flex gap-2">
          <button @click="count--" class="px-4 py-2 bg-gray-600 text-white rounded">-</button>
          <button @click="count++" class="px-4 py-2 bg-blue-600 text-white rounded">+</button>
        </div>
      </div>
    `;

    element.innerHTML = html;

    if (!window.Alpine) {
      window.Alpine = Alpine;
      Alpine.start();
    } else {
      Alpine.initTree(element);
    }
  }

  destroy() {
    this.element.innerHTML = '';
  }
}

Kernkonzepte

Direktiven - HTML-First

Alpine.js bringt Reaktivität direkt ins HTML:

<!-- State deklarieren -->
<div x-data="{ count: 0, open: false }">

  <!-- Text anzeigen -->
  <span x-text="count"></span>

  <!-- Events -->
  <button @click="count++">Increment</button>

  <!-- Conditional Rendering -->
  <div x-show="open">Content</div>

  <!-- Loop -->
  <template x-for="item in items">
    <div x-text="item.name"></div>
  </template>

  <!-- Two-way binding -->
  <input x-model="message">
</div>

Magische Properties

<div x-data="{ items: [] }">
  <!-- $el - Aktuelles Element -->
  <button @click="$el.classList.add('active')">Click</button>

  <!-- $refs - Referenzen -->
  <input x-ref="myInput">
  <button @click="$refs.myInput.focus()">Focus</button>

  <!-- $watch - State beobachten -->
  <div x-init="$watch('count', value => console.log(value))">
</div>

Vorteile

• ✅ HTML-First - Reaktivität im Markup
• ✅ Einfach - Wie Tailwind für JS
• ✅ Kein Build-Step - Direkt im Browser
• ✅ Schnell - Für einfache Interaktionen

Nachteile

• ❌ Bundle-Größe - 14-15kb (größer als Svelte/Preact)
• ❌ Komplexität - Nicht ideal für komplexe UIs
• ❌ Testbarkeit - Logik im HTML schwer testbar

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering