Co to jest htmx i jak może uprościć moją stronę internetową?

Maya Patel included in Programming Web Development Javascript Html

2024-01-22 1169 words 6 minutes

Contents

Szybkie linki

⭐ Co to jest htmx?

⭐ Jak można wykorzystać htmx w prostej aplikacji internetowej

⭐ Zalety i wady htmx

Kluczowe wnioski

Htmx to innowacyjna biblioteka JavaScript zaprojektowana w celu usprawnienia procesu zarządzania żądaniami HTTP poprzez wykorzystanie wygodnych atrybutów HTML, zapewniając użytkownikom uproszczony dostęp do powszechnie używanych funkcji w tym zakresie.

Włączenie skryptu htmx do aplikacji internetowej jest ułatwione poprzez włączenie hiperłącza kierującego do hostowanej wersji skryptu w sieci dostarczania treści (CDN).

Wykorzystanie htmx umożliwia płynną nawigację, taką jak paginacja, walidacja formularzy i edycja w czasie rzeczywistym w aplikacji, bez konieczności pisania kodu JavaScript.

Ostatnie dyskusje w społeczności twórców stron internetowych dotyczące htmx wzbudziły zainteresowanie, ale jego prawdziwa natura pozostaje stosunkowo nieskomplikowana. Jednak pomimo swojej prostoty, potencjalna użyteczność i wpływ htmx wygenerowały znaczny szum.

Co to jest htmx?

Htmx to skomplikowany framework JavaScript, który koncentruje się na określonym zestawie funkcji, umożliwiając wygodny dostęp do takich możliwości za pomocą atrybutów HTML. Podstawowa ilustracja znajduje się poniżej:

 <a href="/about" hx-get="/about">About</a>

Podany kod demonstruje wykorzystanie dostosowanego atrybutu HTML, a mianowicie “hx-get”. Po kliknięciu biblioteka htmx ułatwia wykonanie żądania AJAX, co skutkuje płynnym ładowaniem docelowej strony internetowej bez konieczności całkowitego odświeżania zawartości przeglądarki.

Oprócz swojej podstawowej funkcji, HTMX zawiera opcjonalną funkcję, która umożliwia użytkownikom przesyłanie zapytań za pośrednictwem wyznaczonego interfejsu.

Skrupulatnie wykonane ze źródeł wykraczających poza konwencjonalne granice zwykłej egzystencji, nasze kreacje wykraczają poza przyziemność, aby osiągnąć niezwykłe wyżyny.

We wszystkich przypadkach, które nie wymagają kliknięcia lub przesłania, ważne jest, aby je odnotować.

Włączenie metod protokołu HTTP wykraczających poza konwencjonalne metody GET i POST jest zalecaną praktyką zwiększania funkcjonalności i bezpieczeństwa aplikacji internetowych.

Zamiast zastępować całą stronę internetową, niektóre narzędzia są w stanie aktualizować określone jej części lub elementy.

Podczas gdy HTML5 Media Extensions (HTMX) obsługuje zaawansowane technologie, takie jak animacje CSS i WebSockets, koncentruje się przede wszystkim na usprawnieniu procesu zarządzania żądaniami HTTP.

Jak można wykorzystać htmx w prostej aplikacji internetowej

HTMX koncentruje się na określonych funkcjach występujących w aplikacjach internetowych i witrynach internetowych, w przeciwieństwie do ogólnego zachowania całej aplikacji.

Jedną z godnych uwagi cech tej biblioteki jest jej prostota w inicjowaniu użytkowania. Użytkownicy mają możliwość pobrania i zainstalowania kopii według własnego uznania; jednak ponieważ nie ma żadnych zewnętrznych zależności, dodanie odniesienia do skryptu za pośrednictwem sieci dostarczania treści (CDN) wystarczy do rozpoczęcia:

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

protokół nie obsługuje żądań AJAX.

Prosty przykład wykorzystujący Infinite Scroll

Ten przykład jest dostępny do pobrania w naszym repozytorium GitHub, które zapewnia wygodną i dostępną lokalizację do uzyskania niezbędnych plików do implementacji.

Nieskończone przewijanie jest wszechobecną strategią stosowaną przez platformy takie jak Twitter w celu ułatwienia ciągłego przeglądania. Podczas przeglądania listy, po osiągnięciu jej punktu kulminacyjnego, nieskończone przewijanie automatycznie pobiera dodatkowe elementy do płynnego przeglądania.

Wykorzystanie JavaScript jest niezbędne do określenia aktualnej pozycji przewijania strony internetowej i dynamicznej aktualizacji jej zawartości bez przeładowywania całej strony, co jest dokładnie tym, do czego htmx został zaprojektowany w Twoim imieniu.

Rozważmy reprezentację serii wpisów, w której każdemu wpisowi towarzyszy element wizualny w postaci obrazu:

 <ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol>

Rozważmy scenariusz, w którym posiadasz wiele plików zawierających informacje na różne tematy, takie jak “feed1.html”, “feed2.html” i tak dalej. Pliki te mają na celu przedstawienie ograniczonego widoku ich zawartości, umożliwiając użytkownikom przewijanie ich w celu uzyskania dalszych szczegółów.

Jedną z alternatyw jest wykorzystanie linków “następna strona” do nawigacji między stronami; jednak wdrożenie mechanizmu nieskończonego przewijania jest również realną opcją. Aby to osiągnąć, wystarczy zmodyfikować ostatni element w bloku kodu w następujący sposób:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

Uwzględnienie tych czterech cech skutkuje implementacją funkcji nieskończonego przewijania dla elementu listy.Pozwolę sobie wyjaśnić ich znaczenie:

Atrybut

Wartość

Znaczenie

-|-|-

hx-trigger

ujawniony

Gdy ten element po raz pierwszy pojawia się na ekranie….

hx-get

feed2.html

Rzeczywiście, żądanie HTTP GET zostanie wysłane w celu pobrania zawartości “feed2.html”.

hx-select

Pobierz elementów w odpowiedzi, stosując strategię wyboru, która jest ukierunkowana na te konkretne elementy HTML.

hx-swap

afterend

… i dodaj je po tym elemencie.

W miarę schodzenia po spisie warto zauważyć, że strona będzie płynnie przeładowywać dodatkowe dane. Można to zweryfikować badając pasek przewijania i sprawdzając narzędzia deweloperskie przeglądarki w celu dalszej inspekcji.

Rzeczywiście, warto zauważyć, że w tej podstawowej konfiguracji strony internetowej plik “feed2.html” zawiera element końcowy zawierający atrybut “hx-get” skierowany do “feed3.html” i podobnie, kolejne iteracje skutkują odpowiednimi linkami wskazującymi na kolejne strony. Dodatkowo warto wspomnieć, że HTMX w przemyślany sposób zaimplementował listener dla zdarzenia scroll, aby zwiększyć komfort użytkowania.

Inne potencjalne zastosowania htmx

W przypadku różnych standardowych interakcji, takich jak te zwykle spotykane w życiu codziennym, HTMX ma zastosowanie i jest wszechstronny.

Proces aktualizacji treści za pomocą paginacji obejmuje ładowanie i zastępowanie elementów strony po interakcji użytkownika z linkami paginacji, zapewniając płynną nawigację między różnymi stronami przy jednoczesnym zachowaniu spójnej prezentacji wizualnej i funkcjonalności we wszystkich instancjach witryny.

Po przesłaniu formularza zaleca się wyświetlenie komunikatu potwierdzającego lub wyświetlenie skróconej wersji oryginalnego formularza. Proces ten nazywany jest “walidacją formularza”.

Okresowe aktualizacje wartości paska postępu można uzyskać, wykorzystując odpowiedzi ping jako podstawę do określenia jego stanu postępu.

Proces edycji inline polega na zastąpieniu określonego elementu HTML na stronie internetowej polem wejściowym textarea, które zawiera zawartość lub wartość zastąpionego elementu. Pozwala to użytkownikom edytować i modyfikować zawartość bezpośrednio w kontekście strony internetowej bez konieczności opuszczania jej.

Wykorzystując standardowy JavaScript, możliwe jest skonstruowanie wszystkich tych instancji. Jednak htmx znacznie upraszcza ten proces.

Zalety i wady htmx

Zalety

HTMX może znacznie usprawnić powtarzające się zadania w różnych aplikacjach i witrynach internetowych, zapewniając uproszczony sposób dodawania funkcjonalności bez konieczności posiadania rozległej wiedzy na temat JavaScript. Ta funkcja jest szczególnie korzystna dla osób zaangażowanych w tworzenie lub zarządzanie stronami internetowymi typu front-end, ponieważ eliminuje potrzebę biegłej znajomości tego języka programowania.

Poprzez proces generalizacji, HTMX ułatwia ujednolicenie różnych przedsięwzięć, a także między nimi. Działanie nieskończonego przewijania pozostaje spójne na wszystkich stronach, niezależnie od tego, który programista je wprowadził.

Głównym celem funkcjonalności HTMX jest promowanie podejścia deklaratywnego, w przeciwieństwie do imperatywnego, co w konsekwencji skutkuje większą łatwością zrozumienia i logicznego rozumowania.

Wady

Chociaż HTMX oferuje wygodny sposób na ominięcie użycia JavaScript w różnych scenariuszach, nie jest panaceum, które rozwiązuje wszystkie problemy. Ważne jest, aby zdawać sobie sprawę, że będą przypadki, w których wymagane będzie niestandardowe programowanie w celu rozwiązania określonych reguł biznesowych i funkcji niższego poziomu.

Wykorzystanie HTMX do różnych zadań oznacza, że obsługuje on większość aspektów funkcjonalności, co z kolei ogranicza zakres, w jakim użytkownicy mogą dostosować jego zachowanie do swoich specyficznych wymagań. Chociaż w wielu przypadkach może to być postrzegane jako korzystny kompromis, ważne jest, aby zdać sobie sprawę, że rezygnacja z kontroli nad niektórymi elementami jest nieodłącznym elementem przyjmowania takich usprawnionych rozwiązań.

HTML zapewnia możliwość korzystania z JavaScript bez wyraźnego pisania go, jednak ważne jest, aby zdawać sobie sprawę, że kod JavaScript działa potajemnie w tle. Można pokusić się o zastosowanie atrybutu “hx-get” na każdym hiperłączu, w przeciwieństwie do konwencjonalnego atrybutu “href”. Jednak takie podejście zakłada poleganie na JavaScript; jakikolwiek błąd w wykonywaniu skryptu spowoduje, że użytkownicy będą mieli niedziałający link. Aby uniknąć takich kłopotów, zaleca się stosowanie progresywnego ulepszania.