Hyvä'da Alpine.js ve Tailwind, RequireJS ve Knockout'un yerini nasıl alıyor?

Hyvä genellikle “daha hızlı bir tema” olarak tanımlanır. Bu doğru, ancak daha hızlı olmasının asıl nedenini gölgede bırakır.

Hyvä, Luma’nın ön yüzünü iyileştirmeye çalışmaz; onu bambaşka ve çok daha küçük bir teknoloji yığınıyla değiştirir. Bu yazıda bu yığının pratikte nasıl göründüğünü gösteriyoruz.

Kısaca Luma yapısı

Luma’nın ön yüzü dört ana parçadan oluşur.

• RequireJS JavaScript modüllerini ihtiyaç anında yükler ve bağımlılıklarını yönetir.
• jQuery ve jQuery UI sekmeler, menüler ve açılır pencereler gibi birçok widget'ı çalıştırır.
• KnockoutJS mini sepet, müşteri verileri ve ödeme sayfasının tamamı gibi dinamik bölümleri oluşturur.
• LESS tema stillerini derin bir değişken, mixin ve geçersiz kılma (override) sistemiyle derler.

Magento 2 tasarlandığında bu parçaların her biri mantıklıydı. Ancak bir araya geldiklerinde ağır bir sayfa ortaya çıkıyor.

Yaptığımız Hyvä ve Luma karşılaştırması, temiz bir Luma sayfasının 250'den fazla istek yaptığını ve yaklaşık yarım megabayt JavaScript yüklediğini gösterdi.

Kısaca Hyvä yapısı

Hyvä bu dört parçanın yerine yalnızca iki parça kullanır.

• Alpine.js etkileşimi, doğrudan şablonun HTML'ine yazılarak yönetir.
• Tailwind CSS stili, şablonlardaki yardımcı sınıflarla (utility class) yönetir.

Modül yükleyici yok, jQuery bağımlılığı yok, Knockout şablon sistemi yok. Aynı temiz karşılaştırma sayfası Hyvä'da 20'den az istek yaptı ve yaklaşık 26 KB JavaScript yükledi.

Basit bir örnek: aç/kapa bloğu

Her mağazada olan bir şeyi ele alalım: açılıp kapanan bir içerik bloğu.

Luma'da bunun için genellikle şablona, RequireJS başlatma bloğu üzerinden bir jQuery UI widget'ı bağlarsınız.

<div id="product-details">
    <div data-role="title">Bilgiler</div>
    <div data-role="content">...</div>
</div>
<script type="text/x-magento-init">
{
    "#product-details": {
        "collapsible": { "openedState": "active" }
    }
}
</script>

Bunun çalışması için tarayıcı önce RequireJS'i, ardından mage başlatıcısını, sonra jQuery, jQuery UI ve collapsible widget'ını yükler.

Hyvä'da aynı davranış, HTML'in kendisine eklenen birkaç öznitelikten ibarettir.

<div x-data="{ open: false }">
    <button type="button" @click="open = !open" :aria-expanded="open">
        Bilgiler
    </button>
    <div x-show="open" x-cloak>...</div>
</div>

Alpine.js zaten sayfada yüklü olduğu için başka hiçbir şeyin yüklenmesi gerekmez. Mantık, kontrol ettiği HTML'in hemen yanında durur; bu da kodu okumayı ve değiştirmeyi kolaylaştırır.

Knockout olmadan müşteri verileri

Magento, önbelleğe alınmış bir sayfadaki sepet adedi veya müşteri adı gibi kişisel her şey için “private content” (özel içerik) kullanır. Luma’da bu veriyi KnockoutJS şablonları tarayıcı tarafında oluşturur.

Hyvä, Magento’nun müşteri veri bölümlerini (customer data sections) korur ama Knockout’u kullanmaz. Veri hazır olduğunda Hyvä bir tarayıcı olayı (event) yayınlar ve herhangi bir Alpine bileşeni bu olayı dinleyebilir.

<div x-data="{ count: 0 }"
     @private-content-loaded.window="count = $event.detail.data.cart?.summary_count || 0">
    <span x-text="count"></span>
</div>

Tam sayfa önbelleği (full-page cache) yine herkese aynı sayfayı sunar. Yalnızca kişiye özel küçük bölümler sonradan doldurulur; böylece önbellek verimli çalışmaya devam eder.

Stil: LESS ve Tailwind

Luma'da bir butonu değiştirmek genellikle doğru LESS değişkenini ya da mixin'i bulmak, bunu bir alt temada (child theme) geçersiz kılmak ve yeniden derlemek demektir. Ortaya çıkan CSS dosyası, sayfanın hiç kullanmadığı birçok bileşenin stilini de içerir.

Hyvä'da stil, şablonun içinde Tailwind yardımcı sınıfları olarak yer alır.

<button type="submit" class="btn btn-primary w-full md:w-auto">
    Add to cart
</button>

Derleme sırasında Tailwind temanın şablonlarını tarar ve yalnızca gerçekten kullanılan sınıfları içeren bir CSS dosyası yazar. Kullanılmayan stiller tarayıcıya hiç ulaşmaz.

Marka renkleri, yazı tipleri ve boşluklar, temanın Tailwind yapılandırmasında tasarım değişkenleri (design token) olarak tutulur. Bir değişkeni değiştirip temayı yeniden derlediğinizde değişiklik tüm mağazaya yansır. Bu yaklaşım sayesinde bir ekip, onlarca stil dosyasına dokunmadan mağazanın görünümünü değiştirebilir.

Geliştiricileriniz için bu ne anlama geliyor?

Luma'dan gelen bir ekip için Hyvä genellikle daha sade gelir.

• Şablonlar hala Magento’nun layout XML yapısıyla çalışan PHTML dosyalarıdır; yani Magento yapısı size tanıdık gelir.
• Alpine.js küçüktür ve temel JavaScript bilen herkes tarafından hızla öğrenilir.
• Tailwind, uzun geçersiz kılma zincirlerinin yerine şablonda okunabilen sınıflar getirir.
• Hata ayıklanacak bir RequireJS yapılandırması ya da JavaScript paketleme süreci yoktur.

Yeni bir alışkanlık edinmeniz gerekir: Şablonları veya Tailwind yapılandırmasını değiştirdikten sonra temanın CSS’i, Node derleme script’iyle yeniden derlenmelidir. Bu adım dağıtım sürecinizin bir parçası olmalıdır.

Eklentileriniz için bu ne anlama geliyor?

Bu, madalyonun öbür yüzü. Kendi RequireJS modüllerini, Knockout şablonlarını ya da jQuery widget'larını getiren her eklenti, Luma yapısının sayfada olmasını bekler.

Hyvä’da bu altyapı yoktur; bu nedenle eklentinin mağaza ön yüzüne ait kısmı olduğu gibi çalışmaz. Arka uç (backend) mantığı ise çalışmaya devam eder.

Çözüm, ön yüz kısmını Alpine.js ve Tailwind ile yeniden yazan bir uyumluluk modülüdür. Bunların birçoğu zaten mevcut, olmayanlar da yazılabilir. Başlamadan önce eklentilerinizi nasıl inceleyeceğinizi görmek için Hyvä geçiş kontrol listesi yazımıza göz atın.

Alpine'ın yetmediği yer: ödeme sayfası

Ödeme sayfası (checkout); çok sayıda adımı, doğrulaması ve ödeme entegrasyonuyla her mağazanın en karmaşık sayfasıdır.

Hyvä Checkout bunu, Magento için sunucu tarafında çalışan bir bileşen kütüphanesi olan Magewire ile çözer. Ödeme mantığının büyük kısmı sunucuda PHP ile çalışır; tarayıcı güncellenmiş HTML'i alır, küçük istemci tarafı davranışları ise Alpine.js üstlenir.

Hyvä Checkout'un ne zaman karşılığını verdiğini ve ne zaman başka bir ödeme çözümünün daha uygun olduğunu şu yazıda anlatıyoruz: Hyvä Checkout'a geçmeye değer mi?.

SSS

Hyvä mağazasında jQuery kullanmaya devam edebilir miyim?

Teknik olarak yükleyebilirsiniz; ancak bu, Hyvä'nın kaldırdığı ağırlığı geri getirir. Davranışı Alpine.js ya da sade JavaScript ile yeniden yazmak daha iyidir.

Geliştiricilerimin yeni bir framework öğrenmesi gerekir mi?

Alpine.js ve Tailwind CSS'i öğrenmeleri gerekir. İkisi de küçüktür, iyi belgelenmiştir ve Magento şablonlarıyla çalışan herkes tarafından hızla öğrenilir.

Hyvä, Magento’nun layout XML yapısını değiştirir mi?

Hayır. Hyvä, Magento’nun standart layout XML ve PHTML şablonlarını kullanır. Değişen, bu şablonların içindeki JavaScript ve CSS’tir.

Luma'dan geçişi mi planlıyorsunuz ya da bir eklentinin Hyvä uyumlu hale getirilmesi mi gerekiyor? Nasıl çalıştığımızı görmek için şu sayfaya göz atın: Hyvä tema geliştirme sayfamıza bakın.