Bir web sitesi oluşturken ve bazı temel kullanıcı etkileşimlerini gerçekleştirmek için jQuery, Bootstrap, Vue.js veya React gibi frameworkler kullanırız. Alpine.js, bu frameworklerin boyutunun çok küçük bir kısmıdır çünkü hiçbir inşa adımı içermez ve temel bir kullanıcı arayüzü oluşturmak için ihtiyacınız olan tüm araçları sağlar.
Çoğu geliştirici gibi, iş akışımı aşırı karmaşıklaştırma konusunda kötü bir eğilimim var, özellikle de ufukta yeni bir heyecan varsa. CSS-in-JS kullanabiliyorsanız neden CSS kullanmalısınız? Gulp kullanabiliyorsanız neden Grunt kullanıyorsunuz? Webpack’i kullanabiliyorsanız neden Gulp kullanmalısınız? Başsız olabileceğiniz zaman neden geleneksel bir CMS kullanasınız? Yine de sık sık, yenilik hayatı kolaylaştırır.
Son zamanlarda, Tailwind CSS gibi yardımcı program tabanlı araçların yükselişi bunu CSS için yaptı ve şimdi Alpine.js, JavaScript için benzer bir şey vaat ediyor.
Bu yazıda, Alpine.js’ye ve etkileşimli web siteleri oluşturmak için JQuery veya daha büyük JavaScript kitaplıklarının yerine nasıl geçebileceğine daha yakından bakacağız. Kullanıcı etkileşimine dayalı olarak kullanıcı arayüzünü değiştirmek için düzenli olarak Javascript gerektiren siteler oluşturuyorsanız, bu yazıyı inceleyebilirsiniz.
Yazı boyunca Vue.js’ye atıfta bulunuyorum, ancak Vue deneyiminiz yoksa endişelenmeyin – bu gerekli değildir. Aslında, Alpine.js’yi harika yapan şeylerden biri, JavaScript’i neredeyse hiç bilmenize gerek kalmamasıdır.
Şimdi başlayalım.
Alpine.Js Nedir?
Tabs(Sekme) gibi temel bir kullanıcı arayüzü modelini ele alalım. Nihai hedefimiz, bir kullanıcı bir sekmeyi tıkladığında sekme içeriğinin görüntülenmesidir. Bir PHP arka planından geliyorsak, bu sunucu tarafını kolayca başarabiliriz. Ancak her sekme tıklamasında sayfa yenilemesi çok “reaktif” değildir.
Yıllar geçtikçe daha iyi bir deneyim oluşturmak için geliştiriciler jQuery veya Bootstrap ile bu işlemi gerçekleştirir. Bu durumda, sekmede bir olay dinleyicisi oluştururuz ve bir kullanıcı tıkladığında olay tetiklenir ve tarayıcıya ne yapması gerektiğini söyleriz.
1 2 3 4 5 6 7 8 9 10 11 | <button onClick="tabGoster('#sekme')">Sekmeyi Aç</button> <div id="sekme" style="display: none;">Sekme içeriği</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script> <script> function tabGoster(tab) { $(tab).toggle(); } </script> |
Nasıl çalışıyor. Ancak tarayıcıya tam olarak ne yapacağını söylediğimiz bu kodlama tarzı (zorunlu kodlama) bizi çabucak ortalığı karıştırır. Düğmeye tıklandıktan sonra devre dışı bırakmak veya sayfanın arka plan rengini değiştirmek isteyip istemediğimizi düşünün. Hızlı bir şekilde ciddi bir spagetti koduna gireceğiz.
Geliştiriciler, Vue, Angular ve React gibi çerçevelere geçerek bu sorunu çözdüler. Bu çerçeveler, sanal DOM’u kullanarak daha temiz kod yazmamızı sağlar. Tarayıcı belleğinde depolanan kullanıcı arayüzünün bir tür aynasıdır. Sonuç, bu çerçevelerden birinde bir DOM öğesini (bir sekme gibi) “hide”; display:none; özelliği eklenmez gerçek DOM’dan çıkarır.
Bu, daha temiz ve okunması daha kolay olan daha açıklayıcı kod yazmamızı sağlar. Ama bunun bir bedeli var. Tipik olarak, bu çerçevelerin paket boyutu büyüktür ve bir jQuery arka planından gelenler için öğrenme eğrisi inanılmaz derecede zordur. Özellikle tek yapmak istediğiniz sekmeler arasında geçiş yapmak olduğunda! Ve işte burada Alpine.js devreye girer.
Vue ve React gibi, Alpine.js de bildirimsel kod yazmamıza izin verir, ancak “gerçek” DOM’u kullanır; Bir metin düzenleyicisini veya geliştirme araçlarını açtığımızda sizin ve benim düzenleyebileceğimiz aynı düğümlerin içeriğini ve niteliklerini değiştir. Sonuç olarak, daha büyük çerçevenin dosya boyutunu, sihirbazlığını ve bilişsel yükünü azaltır, ancak bildirimsel programlama metodolojisini koruyabilirsiniz. Ve bunu paketleyici, derleme süreci ve komut dosyası etiketi olmadan elde edersiniz. Sadece 6kb Alpine.js yükleyin ve işte buradasınız!
| Alpine.js | JQuery | Vue.js | React + React DOM | |
| Kodlama stili | Bildirge | Zorunlu | Bildirge | Bildirge |
| Paketleyici gerektirir | Hayır | Hayır | Hayır | Evet |
| Dosya boyutu (GZiplenmiş, küçültülmüş) | 6.4kb | 30kb | 32kb | 5kb – 36kb |
| Geliştirme Araçları | Hayır | Hayır | Evet | Evet |
Alpine.js Ne Zaman Kullanmalıyım?
Benim için Alpine’ın gücü, DOM manipülasyonunun kolaylığında yatıyor. Bootstrap ile kutudan çıkardığınız şeyleri bir düşünün, Alpine.js onlar için harikadır. Örnekler şunlar olabilir:
- Belirli koşullar altında DOM düğümlerini gösterme ve gizleme,
- Kullanıcı girdisini bağlama,
- Olayları dinlemek ve buna göre kullanıcı arayüzünü değiştirmek,
- Eklenen sınıflar.
Verileriniz JSON’da mevcutsa şablon oluşturmak için Alpine.js’yi de kullanabilirsiniz, ancak bunu başka bir güne saklayalım.
Alpine.js Ne Zaman Kullanmamalıyım
Veri alıyorsanız veya doğrulama ya da veri depolama gibi ek işlevler gerçekleştirmeniz gerekiyorsa, muhtemelen başka bir yere bakmalısınız. Daha büyük çerçeveler, daha büyük kullanıcı arayüzleri oluştururken paha biçilmez olabilecek geliştirme araçlarıyla birlikte gelir.
jQuery’den Vue’ya ve Alpine’e
Alpine’nin sözdizimi neredeyse tamamen Vue.js’den alınmıştır. Toplamda 13 direktif var. Aşağıdaki örneklerde çoğunu ele alacağız.
Başlarken
Vue ve jQuery gibi, herhangi bir derleme işlemi gerekmez. Vue’dan farklı olarak, Alpine kendini başlatır, bu nedenle yeni bir örnek oluşturmaya gerek yoktur. Sadece Alpine’yi yükleyin ve hazırsınız.
1 2 3 | <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> |
Herhangi bir bileşenin kapsamı, x-data yönergesi kullanılarak bildirilir. Bu, her şeyi başlatır ve gerekirse bazı varsayılan değerleri ayarlar:
1 2 3 | <div x-data="{ foo: 'bar' }">...</div> |
Kullanıcı Girişini Yakalama
x-model, herhangi bir girdi elemanını x-data kullanılarak ayarlanan değerlerle senkronize tutmamıza izin verir. Aşağıdaki örnekte, ad değerini boş bir dizeye (form etiketi içinde) ayarladık. x-model kullanarak bu değeri girdi alanına bağlarız. x-text kullanarak, değeri paragraf elemanının innerText’ine dahil ederiz.
1 2 3 4 5 6 7 8 | <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> <div x-data="{isim:''}"> <label for="isim">İsim:</label> <input id="isim" type="text" x-model="isim" /> <p x-text="isim"> </div> |
Alpine.js, jQuery ve de Vue.js arasındaki farkları vurgulayalım.
JQuery’de paragraf etiketini güncellemek, belirli olayları dinlememizi (keyup?), Güncellemek istediğimiz düğümü ve yapmak istediğimiz değişiklikleri açıkça belirlememizi gerektirir. Alpine’nin sözdizimi ise ne olması gerektiğini belirtir. Bildirimsel programlama ile kastedilen budur.
Paragrafı Vue’da basitken güncellemek, yeni bir komut dosyası etiketi gerektirir:
1 2 3 | new Vue({ el: '#app', data: { isim: '' } }); |
Bu dünyanın sonu gibi görünmese de, Alpine ile ilk büyük kazancı vurguluyor. Bağlam değiştirme yoktur. Her şey orada HTML’de yapılır – herhangi bir ek JavaScript’e gerek yoktur.
Tıklama Olayları, Boolean Nitelikler ve Sınıflara Geçiş
Vue’da olduğu gibi x-bind (öznitelikleri bağlayan) için @ bir kısaltma işlevi vardır. @, x-on için kısaltmadır (bu, Alpine’ın olayları dinlemesi gerektiğini belirtir).
Aşağıdaki örnekte, x-data kullanarak yeni bir bileşen başlatıyoruz ve show’un varsayılan değerini false olarak ayarlıyoruz. Butona tıklandığında, gösterinin değerini değiştiririz. Bu değer doğru olduğunda, Alpine’e aria-expanded özniteliği eklemesini söyleriz.
x-bind, sınıflar için farklı çalışır: anahtarın sınıf adı (bizim durumumuzda aktif) ve değerin bir boolean ifadesi (show) olduğu nesneyi iletiriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> <style> button{ padding:10px; border:none; } .active { background-color: #00cec9; } </style> <div x-data="{ show: false }"> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'" :class="{ 'active': show }"> Toggle Butonu </button> </div> |
Gizle ve Göster
Gösterme ve gizleme sözdizimi neredeyse Vue ile aynıdır.
1 2 3 4 5 6 7 8 9 10 | <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> <div x-data="{ goster: false }"> <button @click="goster = !goster" :aria-expanded="goster ? 'true' : 'false'" :class="{ 'active': goster }"> Göster / Gizle </button> <div x-show="goster">Merhaba Dünya</div> </div> |
Bu, belirli bir DOM düğümünü display:none olarak ayarlar. Bir DOM öğesini tamamen kaldırmanız gerekirse, x-if kullanılabilir. Ancak, Alpine.js Sanal DOM’u kullanmadığından, x-if yalnızca bir (gizlemek istediğiniz öğeyi saran etiket) üzerinde kullanılabilir.
Sihirli Özellikler
Yukarıdaki yönergelere ek olarak, üç Büyü Özellikleri bazı ek işlevler sağlar. Bunların tümü, Vue.js’de çalışan herkese tanıdık gelecektir.
$el, kök bileşeni (x-data özniteliğine sahip olanı) getirir;
$refs, bir DOM öğesini almanıza izin verir;
$nextTick, ifadelerin yalnızca Alpine işini yaptıktan sonra çalıştırılmasını sağlar;
$event, bir doğal tarayıcı olayını yakalamak için kullanılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> <div x-data> <span x-ref="foo"></span> <button class="btn btn-dark" @click="$refs.foo.innerText = 'Tasarım Kodlama'"> Tıkla </button> </div> <div x-data> <button class="btn btn-secondary" @click="$el.innerHTML = 'Tasarım Kodlama'"> Tıkla </button> </div> <div x-data="{ text: 'Tıkla' }"> <button class="btn btn-primary" @click=" text = 'Tıklandı'; $nextTick(() => { // Tıkla -> Tıklandı olacak. console.log($event.target.innerText) });" x-text="text"></button> </div> |
Yararlı Bir Şey Yapalım
Gerçek dünya için bir şeyler inşa etme zamanı. Kısa olması adına stiller için Bootstrap kullanacağım, ancak tüm JavaScript için Alpine.js kullanacağım. Oluşturmakta olduğumuz sayfa, bir form işleyiciye gönderen ve güzel bir başarı mesajı gösteren bir modal içinde görüntülenen bir iletişim formunun yer aldığı basit bir açılış sayfasıdır. Bir müşterinin hemen isteyebileceği ve bekleyebileceği türden bir şey olacak.
Bunun işe yaraması için jQuery ve Bootstrap.js ekleyebiliriz, ancak bu çok fazla işlevsellik için oldukça fazla ek yüktür. Muhtemelen Vanilla JS’de yazabiliriz, ama bunu kim yapmak ister? Bunun yerine Alpine.js ile çalışmasını sağlayalım.
İlk olarak, bir kapsam ve bazı başlangıç değerleri belirleyelim:
1 2 3 | <body class="text-center text-white bg-dark h-100 d-flex flex-column" x-data="{ showModal: false, name: '', email: '', success: false }"> |
Şimdi, buton ile showModal değerini true olarak ayarlamasını sağlayalım:
1 2 3 4 5 | <div class=" d-flex h-100 p-3 mx-auto flex-column"> <button class="btn btn-lg btn-secondary" @click="showModal = true" >Göster</button> </div> |
ShowModal true olduğunda, modal’ı görüntülememiz ve bazı sınıflar eklememiz gerekir:
1 2 3 4 5 | <div class="modal fade text-dark" :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog"> Model </div> |
Girdi değerlerini Alpine’a bağlayalım:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="modal-body"> <div class="form-group"> <label for="name">İsim</label> <input type="text" class="form-control" name="isim" x-model="isim" > </div> <div class="form-group"> <label for="email">Your email</label> <input type="email" class="form-control" name="email" x-model="email" > </div> </div> |
Ve şu değerler ayarlanana kadar “Kaydet” butonunu devre dışı bırakın:
1 2 3 | <button type="button" class="btn btn-primary" :disabled="!isim|| !email">Kaydet</button> |
Son olarak, verileri bir tür eşzamansız işleve gönderelim ve işimiz bittiğinde modu gizleyelim:
1 2 3 4 5 6 | <button type="button" class="btn btn-primary" :disabled="!isim || !email" @click="kayitForm({isim: isim, email: email}).then(() => { showModal = false; success= true; })">Kaydet</button> |
Ve işte bu kadar!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script> </head> <body class="text-center text-white bg-dark h-100 d-flex flex-column" x-data="{ showModal: false, name: '', email: '' }"> <div class=" d-flex h-100 p-3 mx-auto flex-column"> <button class="btn btn-lg btn-secondary" @click="showModal = true" >Göster</button> </div> <div class="modal fade text-dark" :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Model</h5> <button type="button" class="close" aria-label="Close" @click="showModal = false" > <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <div class="form-group"> <label for="name">İsim</label> <input type="text" class="form-control" name="isim" x-model="isim" > </div> <div class="form-group"> <label for="email">Your email</label> <input type="email" class="form-control" name="email" x-model="email" > </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" :disabled="!isim || !email" @click="kayitForm({isim: isim, email: email}).then(() => { showModal = false; success= true; })">Kaydet</button> </div> </form> </div> </div> </div> <script> //formu gönderme function kayitForm(data){ return fetch('https://httpstat.us/200', { method: 'POST', body: JSON.stringify(data) }); } </script> </body> </html> |
Web siteleri oluştururken, giderek artan bir şekilde kendime “yeteri kadar JavaScript” ne olurdu diye sormaya çalışıyorum. Gelişmiş bir web uygulaması oluştururken, bu pekala React olabilir. Ancak bir pazarlama sitesi veya benzer bir şey oluştururken, Alpine.js yeterli geliyor. (Öyle olmasa bile, benzer sözdizimi verildiğinde, Vue.js’ye geçmek hiç zaman almaz).
Kullanımı inanılmaz derecede kolaydır (özellikle VueJS’yi hiç kullanmadıysanız). Küçük (gzip ile <6kb sıkıştırılmış). Ve bu, HTML ve JavaScript dosyaları arasında artık bağlam geçişi olmadığı anlamına gelir.
Yorum Yap