Şu anda her gün bir soru soruluyor. Topluluktan, müşteriler, e -mail, telefon, anlaşmazlık hakkında, yorumlarda ve kişisel konuşmalarda, sadece birkaç örnek atamak için. Yakın zamanda yayınlanan Makalemden Vanilla Web: The Frontend Trend 2024? tekrar ilgiyi artırdı. Soru şu: “HTMX hakkındaki fikriniz nedir?”
Golo Roden, yerel web GmbH'nin kurucusu ve CTO'sudur. Olaylara ve hizmetlere dayalı olarak dağıtılmış mimarilere özellikle dikkat ederek web ve bulut uygulamalarının yanı sıra arıların anlayışı ve geliştirilmesi ile ilgilenir. Yol gösterici ilkesi, yazılımın gelişiminin kendi başına bir son olmaması, ancak her zaman aşağıda bir profesyonellik izlemesi gerektiğidir.
Bu soruyu kişisel bakış açımdan tam ve iyi kurulmuş bir şekilde cevaplamaya çalışıyorum. Ve eğer HTMX hakkında hiç konuşmak zorunda değilseniz, bu olası ama mümkün değil: bu blog gönderisini okuyun. Er ya da geç şu soruyu çizeceğine ikna oldum: “HTMX'e daha yakından bakmamalı mıyız?” Böylece tamamen hazırlıksız değilsiniz, ancak bunun ne olduğu hakkında yaklaşık bir fikriniz var ve belki de bir veya diğer hazır konuya sahip olmak için, aşağıdaki satırları okumanızı tavsiye ederim.
HTMX zaten nedir?
HTMX, web kullanıcı arayüzleri için kompakt bir kitaplıktır ve başlangıçta adı getirir İntercooler.js. HTMX 1.0'ın Intercooler 2.0'a önemli ölçüde karşılık gelmesi için HTMX olarak yeniden adlandırılan sürüm 2'nin tanıtımı ile. Temel fark, HTMX'in – intercooler'ın aksine – jquarry'ye dayanmayan yeni bir gelişme olarak düşünülebilmesidir. Bu bağlamda, HTMX'in yeni bir yolu var.
HTMX şu anda NPM'de haftada yaklaşık 50.000 indirme kaydediyor. Sınıflandırma için: Quarto neredeyse bir milyon indirmeye ulaşıyor, yaklaşık beş milyona bakın ve 20 milyondan fazla tepki veriyor. Daha sonra HTMX'in neden niş bir teknoloji olmadığını açıklayacağız. O zamana kadar, NPM'de HTMX'ten indirme istatistiklerini yorumlarken belirli bir dikkat kullanılması tavsiye edilir.
Htmx zihniyeti
React gibi diğer teknolojilere kıyasla HTMX'i ayıran nedir? Temel fark yaklaşımdır: HTMX, örneğin React durumunda olduğu gibi JavaScript yerine HTML'de tanımlamaya devam etmek için web kullanıcı arayüzlerine dayanmaktadır. HTMX, JavaScript'e odaklanan diğer birçok kitapçının ve çerçevenin aksine, HTML merkezli bir mimariyi takip eder. Daha sonra normal HTML ile çalışın ve HTMX tarafından tanımlanan özel özelliklerle genişletildi. Bu şekilde, JavaScript'in talep edileceği birçok standart faaliyet, HTML'de tamamen bildirici olarak uygulanabilir.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
HTMX: Mükemmel Kullanıcı Arayüz Teknolojisi !!
Bazı geliştiriciler bu yaklaşımın tamamen yeni bir şey olduğuna inanıyor. Ama gerçekte, kavram yeni değil. Benzer yaklaşımlar geçmişte, 2010'daki nakavt.js'de olduğu gibi zaten var olmuştur. Angular'ın orijinal versiyonu olan Angular 1, 2013'te bu prensibi izledi. HTMX'in öncüsü olan Intercooler'ın 2013'ten de geldiğini belirtmek ilginç. Birçok geliştirici bu aşamayı tek başına deneyimlemediğinden veya onları unutmadığından, HTML'yi ön plana koyma ve bunları genişletme yaklaşımı, gerçekte olmasa bile, şimdi bildirici olarak genişletme radikal ve yeni görünmektedir.
Kişiselleştirilmiş HTML özellikleri
HTMX esasen kişiselleştirilmiş özelliklerin kullanımı ile çalışır. Basit bir örnek vermek için: Yapılandırma div-özelliğe sahip olduğunuz element hx-post Özellikle ekle hx-post="/articles". Genellikle tarayıcı, genellikle bilinmeyen HTML öğelerine ve özelliklere dikkat etmediği için bu özniteliği yok sayar. Ancak htmx bu özelliği yeniden canlandırır: eğer üzerinde iseniz div Tıklayın, HTMX sayesinde, arka planda URL için bir HTTP isteği olacak /Makaleler elçi. Bu şekilde, herhangi bir HTML elemanı bir haksızlık sonrası tetikleyebilir, bu nedenle bu genellikle tıklayarak olur. Modüller söz konusu olduğunda, bir istek genellikle gönderilerek etkinleştirilir. Bu şekilde, her öğe ağ ile etkileşim için kullanılabilir. Bu işlev sadece recupy sonrası isteklerle sınırlı değil, aynı zamanda GET, PUT ve ortadan kaldırmayı da içerir. Sonuç olarak, her HTML öğesi her türlü istek HTTP'yi başlatabilir.
Şimdi soru, sonucun ne olduğu veya sunucu tarafından döndürülen cevap ortaya çıkıyor. HTMX onu alıyor ve yola çıkıyor div-Bu yeni bir içerik olarak sonuç olarak kalacak div-Maddeler. Sunucu yanıtı daha sonra doğrudan görüntülenir. İsteğe bağlı olarak, sonuç başka bir öğede de görülebilir. Bunun için öznitelik de kullanılır hx-target Ve bir değer olarak, sonucun görünmesi gereken öğeyi belirleyen bir CSS seçicisini gösterir. Başka bir deyişle, HTMX, tek bir JavaScript çizgisi yazmak zorunda kalmadan yalnızca iki öznitelikle bir AJAX isteği gerçekleştirmenize olanak tanır.
Ayrıca tüm öğeyi tamamen değiştirmek mümkündür: hx-swap-Kuttribute. Bu, sonucun oluşturulması gerektiğini seçmenizi sağlar: mevcut içerikten önce, mevcut içeriğe göre, iç veya harici bir HTML olarak, mevcut içeriğe göre. Bu birkaç özellik tek başına HTMX'i uygulamada son derece esnek hale getirir.
Şarj göstergeleri, animasyonlar …
Tabii ki, şarj işlemi sırasında bir şarj göstergesi görmek pratik olacaktır. Aslında, HTMX herhangi bir öğenin herhangi bir öğeyi yükleme olarak tanımlamasına izin verir. Yeni içeriği gizlemek için bir animasyon ister misiniz? Buna ek olarak, bu, ilgili animasyonları desteklediği için HTMX ile ilgili bir sorun değildir. İletişim, bir HTTP isteği ile gerçekleştirmemeli, ancak periyodik olarak, örneğin verileri güncellemek için mi yoksa yoklama yoluyla mı? Bu, HTMX'in bir zaman aralığını belirlemesi ile de mümkündür. İtme iletişimi mi tercih edersiniz? HTMX ayrıca weboks kullanmamızı sağlar. Alternatif olarak, HTML5 ile tanıtılan Sindy Server (SSE) etkinliklerini kullanabilirsiniz. Ve bu sadece olasılıkların bir bölümü. Birçok standart uygulama için artık JavaScript yazmanız gerekmiyor, ancak HTML'nize yalnızca bazı özellikler ekleyin ve HTMX arka planda geri kalanını yapıyor.
Bu arada, HTMX ayrıca NPM olmadan tamamen çalışır. HTML'nize bir komut dosyası günü ekleyin ve bir içerik dağıtım ağından (CDN) HTMX yükleyin. Boyut sadece 14 kbyte. Sistem, sadece bazı avantajlar atamak için Internet Explorer ile bile uyumludur. Bu yüzden HTMX kullanmanız gerçekten kolay. HTMX'in sadece bir CDN aracılığıyla entegre edilebilmesi, daha önce NPM indirme istatistiklerinin dikkatle dikkate alınması gerektiğini söylememin sebebidir. Bunlar sadece HTMX'in NPM yoluyla indirildiği sıklığı yansıttığı için, ancak bir CDN tarafından yüklenir veya on yıl önce ortak olduğu gibi muhtemelen doğrudan web sitelerine dahil edilir. Bu nedenle HTMX'in gerçek difüzyonunu belirlemek zordur.
Bir istiridye – ama ne kadar sürer?
Ancak, yayılma şu anda aldığım soruların miktarı kadar büyük olmamalıdır. HTMX'te oldukça kısa ve yönetilebilir kalması gereken belirli bir istiridye var. Ne kadar sürecek ve ne kadar sürdürülebilir olacak.
Bir HTTP talebinin sonucu doğrudan stajyer-html olarak yapılırsa, arılar nasıl? Sonuçta, HTML'de temsil edilebilecek bir şey, bir API'nin sunduğu JSON, XML veya başka bir veri biçiminden türetilmelidir. Yani bir tür model ya da benzer bir şey olmalı, değil mi? Ama bu beklenen yol değil. Aslında, sunucu sonlu HTML parçaları sağlamalıdır. Tabii ki, JSON işlemek için HTMX için eklenti var, ancak belgeler bu yaklaşımın ne kadar önemli olduğunu, yani çok daha düşük olduğunu açıkça açıklıyor.
Golo Roden, yerel web GmbH'nin kurucusu ve CTO'sudur. Olaylara ve hizmetlere dayalı olarak dağıtılmış mimarilere özellikle dikkat ederek web ve bulut uygulamalarının yanı sıra arıların anlayışı ve geliştirilmesi ile ilgilenir. Yol gösterici ilkesi, yazılımın gelişiminin kendi başına bir son olmaması, ancak her zaman aşağıda bir profesyonellik izlemesi gerektiğidir.
Bu soruyu kişisel bakış açımdan tam ve iyi kurulmuş bir şekilde cevaplamaya çalışıyorum. Ve eğer HTMX hakkında hiç konuşmak zorunda değilseniz, bu olası ama mümkün değil: bu blog gönderisini okuyun. Er ya da geç şu soruyu çizeceğine ikna oldum: “HTMX'e daha yakından bakmamalı mıyız?” Böylece tamamen hazırlıksız değilsiniz, ancak bunun ne olduğu hakkında yaklaşık bir fikriniz var ve belki de bir veya diğer hazır konuya sahip olmak için, aşağıdaki satırları okumanızı tavsiye ederim.
HTMX zaten nedir?
HTMX, web kullanıcı arayüzleri için kompakt bir kitaplıktır ve başlangıçta adı getirir İntercooler.js. HTMX 1.0'ın Intercooler 2.0'a önemli ölçüde karşılık gelmesi için HTMX olarak yeniden adlandırılan sürüm 2'nin tanıtımı ile. Temel fark, HTMX'in – intercooler'ın aksine – jquarry'ye dayanmayan yeni bir gelişme olarak düşünülebilmesidir. Bu bağlamda, HTMX'in yeni bir yolu var.
HTMX şu anda NPM'de haftada yaklaşık 50.000 indirme kaydediyor. Sınıflandırma için: Quarto neredeyse bir milyon indirmeye ulaşıyor, yaklaşık beş milyona bakın ve 20 milyondan fazla tepki veriyor. Daha sonra HTMX'in neden niş bir teknoloji olmadığını açıklayacağız. O zamana kadar, NPM'de HTMX'ten indirme istatistiklerini yorumlarken belirli bir dikkat kullanılması tavsiye edilir.
Htmx zihniyeti
React gibi diğer teknolojilere kıyasla HTMX'i ayıran nedir? Temel fark yaklaşımdır: HTMX, örneğin React durumunda olduğu gibi JavaScript yerine HTML'de tanımlamaya devam etmek için web kullanıcı arayüzlerine dayanmaktadır. HTMX, JavaScript'e odaklanan diğer birçok kitapçının ve çerçevenin aksine, HTML merkezli bir mimariyi takip eder. Daha sonra normal HTML ile çalışın ve HTMX tarafından tanımlanan özel özelliklerle genişletildi. Bu şekilde, JavaScript'in talep edileceği birçok standart faaliyet, HTML'de tamamen bildirici olarak uygulanabilir.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
HTMX: Mükemmel Kullanıcı Arayüz Teknolojisi !!
Bazı geliştiriciler bu yaklaşımın tamamen yeni bir şey olduğuna inanıyor. Ama gerçekte, kavram yeni değil. Benzer yaklaşımlar geçmişte, 2010'daki nakavt.js'de olduğu gibi zaten var olmuştur. Angular'ın orijinal versiyonu olan Angular 1, 2013'te bu prensibi izledi. HTMX'in öncüsü olan Intercooler'ın 2013'ten de geldiğini belirtmek ilginç. Birçok geliştirici bu aşamayı tek başına deneyimlemediğinden veya onları unutmadığından, HTML'yi ön plana koyma ve bunları genişletme yaklaşımı, gerçekte olmasa bile, şimdi bildirici olarak genişletme radikal ve yeni görünmektedir.
Kişiselleştirilmiş HTML özellikleri
HTMX esasen kişiselleştirilmiş özelliklerin kullanımı ile çalışır. Basit bir örnek vermek için: Yapılandırma div-özelliğe sahip olduğunuz element hx-post Özellikle ekle hx-post="/articles". Genellikle tarayıcı, genellikle bilinmeyen HTML öğelerine ve özelliklere dikkat etmediği için bu özniteliği yok sayar. Ancak htmx bu özelliği yeniden canlandırır: eğer üzerinde iseniz div Tıklayın, HTMX sayesinde, arka planda URL için bir HTTP isteği olacak /Makaleler elçi. Bu şekilde, herhangi bir HTML elemanı bir haksızlık sonrası tetikleyebilir, bu nedenle bu genellikle tıklayarak olur. Modüller söz konusu olduğunda, bir istek genellikle gönderilerek etkinleştirilir. Bu şekilde, her öğe ağ ile etkileşim için kullanılabilir. Bu işlev sadece recupy sonrası isteklerle sınırlı değil, aynı zamanda GET, PUT ve ortadan kaldırmayı da içerir. Sonuç olarak, her HTML öğesi her türlü istek HTTP'yi başlatabilir.
Şimdi soru, sonucun ne olduğu veya sunucu tarafından döndürülen cevap ortaya çıkıyor. HTMX onu alıyor ve yola çıkıyor div-Bu yeni bir içerik olarak sonuç olarak kalacak div-Maddeler. Sunucu yanıtı daha sonra doğrudan görüntülenir. İsteğe bağlı olarak, sonuç başka bir öğede de görülebilir. Bunun için öznitelik de kullanılır hx-target Ve bir değer olarak, sonucun görünmesi gereken öğeyi belirleyen bir CSS seçicisini gösterir. Başka bir deyişle, HTMX, tek bir JavaScript çizgisi yazmak zorunda kalmadan yalnızca iki öznitelikle bir AJAX isteği gerçekleştirmenize olanak tanır.
Ayrıca tüm öğeyi tamamen değiştirmek mümkündür: hx-swap-Kuttribute. Bu, sonucun oluşturulması gerektiğini seçmenizi sağlar: mevcut içerikten önce, mevcut içeriğe göre, iç veya harici bir HTML olarak, mevcut içeriğe göre. Bu birkaç özellik tek başına HTMX'i uygulamada son derece esnek hale getirir.
Şarj göstergeleri, animasyonlar …
Tabii ki, şarj işlemi sırasında bir şarj göstergesi görmek pratik olacaktır. Aslında, HTMX herhangi bir öğenin herhangi bir öğeyi yükleme olarak tanımlamasına izin verir. Yeni içeriği gizlemek için bir animasyon ister misiniz? Buna ek olarak, bu, ilgili animasyonları desteklediği için HTMX ile ilgili bir sorun değildir. İletişim, bir HTTP isteği ile gerçekleştirmemeli, ancak periyodik olarak, örneğin verileri güncellemek için mi yoksa yoklama yoluyla mı? Bu, HTMX'in bir zaman aralığını belirlemesi ile de mümkündür. İtme iletişimi mi tercih edersiniz? HTMX ayrıca weboks kullanmamızı sağlar. Alternatif olarak, HTML5 ile tanıtılan Sindy Server (SSE) etkinliklerini kullanabilirsiniz. Ve bu sadece olasılıkların bir bölümü. Birçok standart uygulama için artık JavaScript yazmanız gerekmiyor, ancak HTML'nize yalnızca bazı özellikler ekleyin ve HTMX arka planda geri kalanını yapıyor.
Bu arada, HTMX ayrıca NPM olmadan tamamen çalışır. HTML'nize bir komut dosyası günü ekleyin ve bir içerik dağıtım ağından (CDN) HTMX yükleyin. Boyut sadece 14 kbyte. Sistem, sadece bazı avantajlar atamak için Internet Explorer ile bile uyumludur. Bu yüzden HTMX kullanmanız gerçekten kolay. HTMX'in sadece bir CDN aracılığıyla entegre edilebilmesi, daha önce NPM indirme istatistiklerinin dikkatle dikkate alınması gerektiğini söylememin sebebidir. Bunlar sadece HTMX'in NPM yoluyla indirildiği sıklığı yansıttığı için, ancak bir CDN tarafından yüklenir veya on yıl önce ortak olduğu gibi muhtemelen doğrudan web sitelerine dahil edilir. Bu nedenle HTMX'in gerçek difüzyonunu belirlemek zordur.
Bir istiridye – ama ne kadar sürer?
Ancak, yayılma şu anda aldığım soruların miktarı kadar büyük olmamalıdır. HTMX'te oldukça kısa ve yönetilebilir kalması gereken belirli bir istiridye var. Ne kadar sürecek ve ne kadar sürdürülebilir olacak.
Bir HTTP talebinin sonucu doğrudan stajyer-html olarak yapılırsa, arılar nasıl? Sonuçta, HTML'de temsil edilebilecek bir şey, bir API'nin sunduğu JSON, XML veya başka bir veri biçiminden türetilmelidir. Yani bir tür model ya da benzer bir şey olmalı, değil mi? Ama bu beklenen yol değil. Aslında, sunucu sonlu HTML parçaları sağlamalıdır. Tabii ki, JSON işlemek için HTMX için eklenti var, ancak belgeler bu yaklaşımın ne kadar önemli olduğunu, yani çok daha düşük olduğunu açıkça açıklıyor.