Şu anda bana her gün bir soru soruluyor. Topluluktan, müşterilerden, e-posta yoluyla, telefonla, Discord'dan, yorumlardan ve kişisel görüşmelerden sadece birkaç örnek. Yakın zamanda yayınlanan yazımdan Vanilla Web: Ön Uç Trendi 2024? ilgi yeniden ciddi oranda arttı. Soru şu: “HTMX hakkındaki fikriniz nedir?”
Duyuru
Golo Roden, native web GmbH'nin kurucusu ve CTO'sudur. Etkinlik ve hizmet odaklı dağıtılmış mimarilere odaklanarak web ve bulut uygulamaları ile API'lerin tasarımı ve geliştirilmesiyle ilgilenmektedir. Yol gösterici ilkesi, yazılım geliştirmenin kendi başına bir amaç olmadığı, her zaman temeldeki profesyonelliği takip etmesi gerektiğidir.
Bu soruyu kapsamlı ve kişisel bakış açıma dayanarak cevaplamaya çalışıyorum. Ve pek olası olmasa da mümkün olsa da, HTMX'i hiç duymadıysanız: yine de bu blog yazısını okuyun. Ekibinizde er ya da geç şu sorunun ortaya çıkacağına inanıyorum: “HTMX'e daha yakından bakmamız gerekmez mi?” Kendinizi tamamen hazırlıksız bulmamanız, ancak HTMX'in ne hakkında olduğu konusunda zaten belirsiz bir fikriniz olması ve belki bir veya iki konunuzun hazır olması için aşağıdaki satırları okumanızı tavsiye ederim.
HTMX nedir bu arada?
HTMX, web kullanıcı arayüzleri için kompakt bir kütüphanedir ve başlangıçta HTMX olarak adlandırılmıştır. Intercooler.js. Sürüm 2'nin tanıtılmasıyla birlikte isim HTMX olarak değiştirildi, dolayısıyla HTMX 1.0 aslında Intercooler 2.0 ile aynı. Temel fark, HTMX'in Intercooler'dan farklı olarak jQuery'yi temel almayan yeni bir gelişme olarak görülebilmesidir. HTMX bu konuda yeni bir yaklaşım benimsiyor.
Npm'de HTMX'in şu anda haftada yaklaşık 50.000 indirmesi var. Bunu perspektife koymak gerekirse: Svelte neredeyse bir milyon, Vue neredeyse beş milyon ve React 20 milyondan fazla indirmeye ulaştı. HTMX'in neden niş bir teknoloji olmadığını daha sonra açıklayacağız. O zamana kadar, npm'de HTMX indirme istatistiklerini yorumlarken biraz dikkatli olmanız önerilir.
HTMX zihniyeti
HTMX'i React gibi diğer teknolojilerden ayıran şey nedir? Temel fark yaklaşımdadır: HTMX, web kullanıcı arayüzlerini, örneğin React'te olduğu gibi, JavaScript yerine HTML'de tanımlamaya devam etmeye dayanır. HTMX, diğer birçok JavaScript merkezli kitaplık ve çerçevenin aksine, HTML merkezli bir mimariyi takip eder. Yani normal HTML ile çalışıyorsunuz ve onu HTMX tarafından tanımlanan özel niteliklerle genişletiyorsunuz. Bu, normalde JavaScript gerektirecek birçok standart görevin HTML'de tamamen bildirimsel bir şekilde uygulanmasını mümkün kılar.
Önerilen editoryal içerik
İzniniz doğrultusunda harici bir YouTube videosu (Google Ireland Limited) buraya yüklenecektir.
Her zaman YouTube videolarını yükle
YouTube videosunu şimdi indirin
HTMX: mükemmel kullanıcı arayüzü teknolojisi?!
Bazı geliştiriciler bu yaklaşımı tamamen yeni bir şey olarak görüyor. Ancak gerçekte konsept yeni değil. Benzer yaklaşımlar geçmişte de mevcuttu; örneğin 2010'daki Knockout.js'de. Angular'ın orijinal versiyonu olan Angular 1 de 2013'te bu prensibi takip etti. İlginç bir şekilde, HTMX'in öncüsü olan Intercooler'ın da geçmişi o 2013 yılına kadar uzanıyor. Bu nedenle HTMX, yaklaşık on yıllık bir düşünce tarzını benimsiyor. Pek çok geliştirici bu aşamayı kişisel olarak deneyimlemediğinden veya basitçe unuttuğundan, HTML'yi ön plana çıkarma ve onu bildirimsel olarak genişletme yaklaşımı, aslında öyle olmasa bile, artık bazılarına kökten farklı ve yeni görünüyor.
Özel HTML nitelikleri
Temel olarak HTMX, kullanıcı tanımlı niteliklerin kullanımı yoluyla çalışır. Basit bir örnek vermek gerekirse: uyum sağlayın div-Önünde niteliğin olmasını istediğiniz öğe hx-post özellikle ekle hx-post="/articles". Normalde tarayıcı bu özelliği yok sayar çünkü genellikle bilinmeyen HTML öğelerini ve niteliklerini yok sayar. Ancak HTMX bu özelliği geri yükler: dosyayı tıklarsanız div HTMX sayesinde tıklamak, arka planda URL'ye bir HTTP POST isteği gönderir /nesne Yayınlanan. Bu şekilde herhangi bir HTML öğesi, genellikle tıklanarak bir POST isteğini tetikleyebilir. Formlar için bir istek genellikle gönderimle tetiklenir. Bu, her öğenin ağ ile etkileşimde bulunmak için kullanılabileceği anlamına gelir. Bu işlevsellik POST istekleriyle sınırlı değildir, aynı zamanda GET, PUT ve DELETE'i de içerir. Bu, herhangi bir HTML öğesinin her tür HTTP isteğini başlatabileceği anlamına gelir.
Şimdi şu soru ortaya çıkıyor: sonuca, yani sunucunun döndürdüğü yanıta ne olacak? HTMX bunu yakalar ve buna ayarlar div-Örnek kalmak, sonuç olarak yeni içerik bu div-Elementler. Bu, sunucu yanıtının doğrudan görüntülendiği anlamına gelir. İsteğe bağlı olarak sonuç başka bir öğede de görüntülenebilir. Bu özellik bunun için de kullanılır hx-target ve sonucun görüneceği öğeyi belirleyen bir CSS seçiciyi değer olarak belirtir. Başka bir deyişle HTMX, tek bir JavaScript satırı yazmaya gerek kalmadan yalnızca iki özelliği kullanarak bir AJAX isteğinin yürütülmesini mümkün kılar.
Ayrıca öğenin tamamını tamamen değiştirebilirsiniz; yalnızca yazmanız yeterlidir hx-swapbağlanmak. Bu, sonucun nasıl görüntüleneceğini seçmenize olanak tanır: dahili veya harici HTML olarak, mevcut içerikten önce, mevcut içerikten sonra, hiç vb.. Bu birkaç özellik tek başına HTMX'in kullanımını son derece esnek hale getirir.
Göstergeler, animasyonlar yükleniyor…
Elbette şarj işlemi sırasında bir şarj göstergesinin görüntülenmesi pratik olacaktır. Aslında HTMX herhangi bir öğeyi yükleme göstergesi olarak tanımlamanıza olanak tanır. Yeni içerik göründüğünde animasyon mu istiyorsunuz? İlgili animasyonları desteklediği için bu HTMX için de bir sorun değil. İletişim tek seferlik bir HTTP isteği yoluyla mı gerçekleşmeli, bunun yerine periyodik olarak, örneğin verileri güncellemek için, yani yoklama yoluyla mı gerçekleşmeli? Bu aynı zamanda bir zaman aralığı ayarlanarak HTMX ile de yapılabilir. Push iletişimini mi tercih edersiniz? HTMX ayrıca WebSockets'i kullanmanıza da olanak tanır. Alternatif olarak, HTML5 ile sunulan Sunucu Tarafından Gönderilen Olayları (SSE) kullanabilirsiniz. Ve bu sadece olasılıkların bir seçimi. Birçok standart uygulama için artık JavaScript yazmanıza gerek yok, yalnızca HTML kodunuza birkaç özellik ekleyin; gerisini HTMX arka planda halledecektir.
Bu arada, HTMX npm olmadan bile tamamen çalışıyor. Basitçe HTML'nize bir komut dosyası etiketi ekleyin ve HTMX'i bir içerik dağıtım ağından (CDN) yükleyin. Boyutu yalnızca 14 Kbyte civarındadır. Birkaç avantajı saymak gerekirse sistem Internet Explorer ile de uyumludur. Yani HTMX'i kullanmak sizin için gerçekten çok kolay. HTMX'in bir CDN'ye entegre edilmesinin kolay olması, npm indirme istatistiklerinin dikkatle incelenmesi gerektiğini daha önce belirtmemin nedenidir. Bu yalnızca HTMX'in npm aracılığıyla ne sıklıkta indirildiğini yansıtıyor; on yıl önce yaygın olduğu gibi bir CDN'den ne sıklıkta yüklendiğini veya doğrudan web sayfalarına yerleştirildiğini değil. Bu nedenle HTMX'in gerçek dağılımını belirlemek zordur.
Bir reklam – ama ne kadar süreyle?
Ancak yaygınlık muhtemelen şu anda bu konuda aldığım soruların sayısının gösterdiği kadar yaygın değil. HTMX ile ilgili bir miktar heyecan var, ancak muhtemelen kısa ve yönetilebilir kalacak. Bunun ne kadar süreceğini ve ne kadar sürdürülebilir olacağını zaman gösterecek.
Bir HTTP isteğinin sonucu doğrudan dahili HTML olarak işleniyorsa API'ler ne olacak? Sonuçta, bir API tarafından sağlanan JSON, XML veya diğer veri formatının HTML'de temsil edilebilecek bir şeye dönüştürülmesi gerekir. Yani bir çeşit şablon falan olmalı, değil mi? Ancak bu beklenen yol değildir. Aslında sunucunun bitmiş HTML parçalarını sunması gerekir. Elbette HTMX için diğer şeylerin yanı sıra JSON'u da işleyebilen eklentiler var, ancak belgeler bu yaklaşıma ne kadar önem verildiğini, yani son derece düşük olduğunu açıkça gösteriyor.
Haberin Sonu
Duyuru
Golo Roden, native web GmbH'nin kurucusu ve CTO'sudur. Etkinlik ve hizmet odaklı dağıtılmış mimarilere odaklanarak web ve bulut uygulamaları ile API'lerin tasarımı ve geliştirilmesiyle ilgilenmektedir. Yol gösterici ilkesi, yazılım geliştirmenin kendi başına bir amaç olmadığı, her zaman temeldeki profesyonelliği takip etmesi gerektiğidir.
Bu soruyu kapsamlı ve kişisel bakış açıma dayanarak cevaplamaya çalışıyorum. Ve pek olası olmasa da mümkün olsa da, HTMX'i hiç duymadıysanız: yine de bu blog yazısını okuyun. Ekibinizde er ya da geç şu sorunun ortaya çıkacağına inanıyorum: “HTMX'e daha yakından bakmamız gerekmez mi?” Kendinizi tamamen hazırlıksız bulmamanız, ancak HTMX'in ne hakkında olduğu konusunda zaten belirsiz bir fikriniz olması ve belki bir veya iki konunuzun hazır olması için aşağıdaki satırları okumanızı tavsiye ederim.
HTMX nedir bu arada?
HTMX, web kullanıcı arayüzleri için kompakt bir kütüphanedir ve başlangıçta HTMX olarak adlandırılmıştır. Intercooler.js. Sürüm 2'nin tanıtılmasıyla birlikte isim HTMX olarak değiştirildi, dolayısıyla HTMX 1.0 aslında Intercooler 2.0 ile aynı. Temel fark, HTMX'in Intercooler'dan farklı olarak jQuery'yi temel almayan yeni bir gelişme olarak görülebilmesidir. HTMX bu konuda yeni bir yaklaşım benimsiyor.
Npm'de HTMX'in şu anda haftada yaklaşık 50.000 indirmesi var. Bunu perspektife koymak gerekirse: Svelte neredeyse bir milyon, Vue neredeyse beş milyon ve React 20 milyondan fazla indirmeye ulaştı. HTMX'in neden niş bir teknoloji olmadığını daha sonra açıklayacağız. O zamana kadar, npm'de HTMX indirme istatistiklerini yorumlarken biraz dikkatli olmanız önerilir.
HTMX zihniyeti
HTMX'i React gibi diğer teknolojilerden ayıran şey nedir? Temel fark yaklaşımdadır: HTMX, web kullanıcı arayüzlerini, örneğin React'te olduğu gibi, JavaScript yerine HTML'de tanımlamaya devam etmeye dayanır. HTMX, diğer birçok JavaScript merkezli kitaplık ve çerçevenin aksine, HTML merkezli bir mimariyi takip eder. Yani normal HTML ile çalışıyorsunuz ve onu HTMX tarafından tanımlanan özel niteliklerle genişletiyorsunuz. Bu, normalde JavaScript gerektirecek birçok standart görevin HTML'de tamamen bildirimsel bir şekilde uygulanmasını mümkün kılar.
Önerilen editoryal içerik
İzniniz doğrultusunda harici bir YouTube videosu (Google Ireland Limited) buraya yüklenecektir.
Her zaman YouTube videolarını yükle
YouTube videosunu şimdi indirin
HTMX: mükemmel kullanıcı arayüzü teknolojisi?!
Bazı geliştiriciler bu yaklaşımı tamamen yeni bir şey olarak görüyor. Ancak gerçekte konsept yeni değil. Benzer yaklaşımlar geçmişte de mevcuttu; örneğin 2010'daki Knockout.js'de. Angular'ın orijinal versiyonu olan Angular 1 de 2013'te bu prensibi takip etti. İlginç bir şekilde, HTMX'in öncüsü olan Intercooler'ın da geçmişi o 2013 yılına kadar uzanıyor. Bu nedenle HTMX, yaklaşık on yıllık bir düşünce tarzını benimsiyor. Pek çok geliştirici bu aşamayı kişisel olarak deneyimlemediğinden veya basitçe unuttuğundan, HTML'yi ön plana çıkarma ve onu bildirimsel olarak genişletme yaklaşımı, aslında öyle olmasa bile, artık bazılarına kökten farklı ve yeni görünüyor.
Özel HTML nitelikleri
Temel olarak HTMX, kullanıcı tanımlı niteliklerin kullanımı yoluyla çalışır. Basit bir örnek vermek gerekirse: uyum sağlayın div-Önünde niteliğin olmasını istediğiniz öğe hx-post özellikle ekle hx-post="/articles". Normalde tarayıcı bu özelliği yok sayar çünkü genellikle bilinmeyen HTML öğelerini ve niteliklerini yok sayar. Ancak HTMX bu özelliği geri yükler: dosyayı tıklarsanız div HTMX sayesinde tıklamak, arka planda URL'ye bir HTTP POST isteği gönderir /nesne Yayınlanan. Bu şekilde herhangi bir HTML öğesi, genellikle tıklanarak bir POST isteğini tetikleyebilir. Formlar için bir istek genellikle gönderimle tetiklenir. Bu, her öğenin ağ ile etkileşimde bulunmak için kullanılabileceği anlamına gelir. Bu işlevsellik POST istekleriyle sınırlı değildir, aynı zamanda GET, PUT ve DELETE'i de içerir. Bu, herhangi bir HTML öğesinin her tür HTTP isteğini başlatabileceği anlamına gelir.
Şimdi şu soru ortaya çıkıyor: sonuca, yani sunucunun döndürdüğü yanıta ne olacak? HTMX bunu yakalar ve buna ayarlar div-Örnek kalmak, sonuç olarak yeni içerik bu div-Elementler. Bu, sunucu yanıtının doğrudan görüntülendiği anlamına gelir. İsteğe bağlı olarak sonuç başka bir öğede de görüntülenebilir. Bu özellik bunun için de kullanılır hx-target ve sonucun görüneceği öğeyi belirleyen bir CSS seçiciyi değer olarak belirtir. Başka bir deyişle HTMX, tek bir JavaScript satırı yazmaya gerek kalmadan yalnızca iki özelliği kullanarak bir AJAX isteğinin yürütülmesini mümkün kılar.
Ayrıca öğenin tamamını tamamen değiştirebilirsiniz; yalnızca yazmanız yeterlidir hx-swapbağlanmak. Bu, sonucun nasıl görüntüleneceğini seçmenize olanak tanır: dahili veya harici HTML olarak, mevcut içerikten önce, mevcut içerikten sonra, hiç vb.. Bu birkaç özellik tek başına HTMX'in kullanımını son derece esnek hale getirir.
Göstergeler, animasyonlar yükleniyor…
Elbette şarj işlemi sırasında bir şarj göstergesinin görüntülenmesi pratik olacaktır. Aslında HTMX herhangi bir öğeyi yükleme göstergesi olarak tanımlamanıza olanak tanır. Yeni içerik göründüğünde animasyon mu istiyorsunuz? İlgili animasyonları desteklediği için bu HTMX için de bir sorun değil. İletişim tek seferlik bir HTTP isteği yoluyla mı gerçekleşmeli, bunun yerine periyodik olarak, örneğin verileri güncellemek için, yani yoklama yoluyla mı gerçekleşmeli? Bu aynı zamanda bir zaman aralığı ayarlanarak HTMX ile de yapılabilir. Push iletişimini mi tercih edersiniz? HTMX ayrıca WebSockets'i kullanmanıza da olanak tanır. Alternatif olarak, HTML5 ile sunulan Sunucu Tarafından Gönderilen Olayları (SSE) kullanabilirsiniz. Ve bu sadece olasılıkların bir seçimi. Birçok standart uygulama için artık JavaScript yazmanıza gerek yok, yalnızca HTML kodunuza birkaç özellik ekleyin; gerisini HTMX arka planda halledecektir.
Bu arada, HTMX npm olmadan bile tamamen çalışıyor. Basitçe HTML'nize bir komut dosyası etiketi ekleyin ve HTMX'i bir içerik dağıtım ağından (CDN) yükleyin. Boyutu yalnızca 14 Kbyte civarındadır. Birkaç avantajı saymak gerekirse sistem Internet Explorer ile de uyumludur. Yani HTMX'i kullanmak sizin için gerçekten çok kolay. HTMX'in bir CDN'ye entegre edilmesinin kolay olması, npm indirme istatistiklerinin dikkatle incelenmesi gerektiğini daha önce belirtmemin nedenidir. Bu yalnızca HTMX'in npm aracılığıyla ne sıklıkta indirildiğini yansıtıyor; on yıl önce yaygın olduğu gibi bir CDN'den ne sıklıkta yüklendiğini veya doğrudan web sayfalarına yerleştirildiğini değil. Bu nedenle HTMX'in gerçek dağılımını belirlemek zordur.
Bir reklam – ama ne kadar süreyle?
Ancak yaygınlık muhtemelen şu anda bu konuda aldığım soruların sayısının gösterdiği kadar yaygın değil. HTMX ile ilgili bir miktar heyecan var, ancak muhtemelen kısa ve yönetilebilir kalacak. Bunun ne kadar süreceğini ve ne kadar sürdürülebilir olacağını zaman gösterecek.
Bir HTTP isteğinin sonucu doğrudan dahili HTML olarak işleniyorsa API'ler ne olacak? Sonuçta, bir API tarafından sağlanan JSON, XML veya diğer veri formatının HTML'de temsil edilebilecek bir şeye dönüştürülmesi gerekir. Yani bir çeşit şablon falan olmalı, değil mi? Ancak bu beklenen yol değildir. Aslında sunucunun bitmiş HTML parçalarını sunması gerekir. Elbette HTMX için diğer şeylerin yanı sıra JSON'u da işleyebilen eklentiler var, ancak belgeler bu yaklaşıma ne kadar önem verildiğini, yani son derece düşük olduğunu açıkça gösteriyor.
Haberin Sonu