Neden bir sonraki web tabanlı yan projeniz için HTMX'i seçmeli ve karmaşık MPA ve SPA'yı bir kenara bırakmalısınız

Birçok yan proje geliştiriyorum, bu yüzden her zaman benim onları daha hızlı ve daha ucuz bir şekilde benzer kalitede inşa etmemi sağlayan teknolojiler ve paradigmalar arayışındayım. Son birkaç aydır, HTMX ve Alpine gibi düşük-js araçlarla web uygulamaları geliştirmeyi deniyorum.

Bu yazıda HTMX'in web uygulamalarını daha hızlı ve daha ucuz bir şekilde inşa etmek için neden harika bir seçim olduğunu ve şimdi teknoloji yığınının - HAM Stack'in - temel bir parçası haline geldiğini paylaşacağım.

MPA vs SPA
MPA vs SPA

Çok Sayfalı Uygulamalar (MPA)
Başlangıçta Çok Sayfalı Uygulamalar (MPA) vardı.

Her URL bir web sayfasına gider
Bu web sayfası sunucu tarafında işlenir ve kullanıcıya geri gönderilir
Eğer bir kullanıcı bir şeyi değiştirirse veya sayfanın ( üzerinde bir şeyi güncellemeniz gerekirse veya yenilemesi gerekiyorsa, o zaman tüm sayfanın yeniden yüklenmesi gerekir.
Bu iyi çalışıyor ama sayfadaki bir şey değiştiğinde HER ŞEYİ yeniden yüklemeniz gerektiği için çok yavaş / hantal bir his veriyor. Bunun bir örneği olarak - bir Eyalet hükümeti web sitesini düşünün, çoğu hala eski tarz MPA'lar ve çoğu modern uygulamalara kıyasla eski ve hantal hissediyor.

MPA Artıları ve Eksileri

Artılar: Yapması basit
Eksileri: Yenilemeler nedeniyle yavaş ve hantal hissettiriyor.
Tek Sayfa Uygulamaları )SPA(
Bunu çözmek için, Tek Sayfa Uygulamaları )SPA( oluşturuldu.

Bir URL, bir dizi uygulama mantığı içeren büyük bir JS yükünü yükler.
Bu JS sayfa render'ını devralır
Sayfanın nasıl görünmesi gerektiğini belirlemek için iç durumu kullanır ve sahne arkasında veri transferleri yapar, böylece yalnızca değişmesi gereken sayfa kısımlarını güncellemesi gerekir.
Bu kullanıcıya daha iyi geliyor çünkü değişiklikler daha hızlı hissediliyor. Sayfa yalnızca ihtiyaç duyulan yerlerde güncelleniyor ve verileri değiştirmek için tam sayfa yenilemesine ihtiyaç duymuyoruz. Günümüzde çoğu uygulama / web sitesi böyle hissediyor çünkü genellikle daha iyi bir kullanıcı deneyimi sağlıyor.

Artılar: Zengin "modern" kullanıcı deneyimleri
Eksiler: Ölçeklendirmede karmaşık - veri transferleriyle uğraşmak )graphQL bunun için oluşturuldu(, soyutlamalar ve uygulama mantığı yük boyutları
Genel olarak:

Çok Sayfalı Uygulamalar )MPA( - İnşa etmesi basit ama zengin "modern" kullanıcı deneyimleri elde etmesi zor
Tek Sayfa Uygulamaları )SPA( - İnşası karmaşık ama zengin "modern" kullanıcı deneyimleri elde edebilir.
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

u/Abhilash26'nın r/htmx'teki görüntü ilhamı.

HTMX birkaç yıldır var ama son bir yılda gerçekten büyük bir heyecan kazandı. Bu heyecan yersiz değil - genellikle modern web uygulamalarını bir SPA'dan daha hızlı ve daha ucuz bir şekilde inşa etmenizi sağlar.

HTMX temelde HTML'yi genişleterek kısmi sayfa yenilemeleri yapabilmesini sağlar.

Herhangi bir öğe, güncel verileri nasıl alabileceğini ve bunu ne zaman yapması gerektiğini belirtebilir.
Element, yeni verilerle ne yapılacağını belirleyebilir - kendisini veya sayfadaki diğer öğeleri değiştirmek.
MPA ile SPA karşılaştırmasına geri dönersek, kısmi sayfa yenilemelerinin eksikliğinin MPAları gerçekten geri tutan ana faktör olduğunu görebiliriz. Bu nedenle, bu yeteneği bir MPA'ya eklemek, çoğunlukla bir SPA'nın zengin "modern" kullanıcı deneyimlerinin çoğunu MPA'nın karmaşıklık seviyesi ile elde etmenizi sağlar.

HTMX Yan Projeleri için
Bir yan projenin amacı genellikle sadece şeyi inşa etmektir. Muhtemelen bunu yapmak için bir mühendis ekibiniz veya VC parası yığınınız yok - sadece siz ve bilgisayarınız var.

Bu nedenle, bir yan projenin başarılı olması için inşa etmenin maliyetini - hem zaman hem de para açısından - düşürmek çok önemlidir.

Bana göre, HTMX modern uygulamalar oluşturmanıza çok düşük karmaşıklık )ve dolayısıyla zaman ve maliyet (sağlama konusunda harika bir denge sunuyor. Bu nedenle, teknoloji yığınımın - HAM Yığını'nın - temel bir parçası haline geldi.

Sonraki
Md Saidur Rahman