JavaScript'te Reaktiviteye Pratik Alternatif: Alpine.js

AlpineJS, HTML içinde kullanabilen, reaktif olarak DOM işlemleri yapabileceğiniz ufak bir framework.

Şunu sayfaya dahil edip başlayabilirsiniz:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>

1. Örnek:

<div x-data="{message: 'Hello world!'}">
  <h1 x-text="message"></h1>
  <input type="text" x-model="message">
</div>

2. Örnek:

<div x-data="{items: ['first', 'second']}">
    <template x-for="item in items" :key="item">
        <div>
            <span x-text="item"></span>
        </div>
    </template>
</div>

3. Örnek:

<div x-data="{open: false, toggle() { this.open = !this.open }}">
    <button @click="toggle()">
        <span x-text="open ? 'Kapat' : 'Aç'"></span>
    </button>
    <div x-show="open">
        Görüntülenecek olan içerik
    </div>
</div>

Daha detaylı kullanımına dökümantasyonundan göz atabilirsiniz. Bazı eksiklikleri var yeni olmasından dolayı ama bu haliyle bile birçok şeye çözüm olabiliyor.