Wyjaśnienie HTMX in 100 seconds
Fireship to kanał, który w niesamowicie przystępny sposób przedstawia nowości w technologii webowej. W swoim najnowszym filmie autor zwraca uwagę na HTMX, bibliotekę UI, która może zastąpić tradycyjne frameworki JavaScript prostotą HTML. Autor podkreśla, że czysty HTML ma znacznie więcej możliwości, niż mogłoby się wydawać. Każda interakcja, jak kliknięcie w link lub wysłanie formularza, automatycznie wysyła żądanie HTTP do serwera i renderuje odpowiedź w interfejsie użytkownika. Ale to jeszcze nie wszystko! HTMX wprowadza architektoniczny warunek znany jako hipermedia, co pozwala na zarządzanie złożonymi wymaganiami nowoczesnych interfejsów.
Dzięki HTMX można wysyłać żądania do serwera z dowolnego elementu, używając odpowiednich atrybutów z metodą HTTP i adresem URL serwera. Odpowiedź z serwera może asynchronicznie zastąpić dany element lub wskazać cel dla zamiany innego elementu na stronie. Dodatkowo, użytkownicy mogą dostosować zdarzenia, które wyzwolą żądania, a także wykorzystać modyfikatory, jak opóźnienie i ograniczenie, aby kontrolować sposób wysyłania żądań. HTMX umożliwia śledzenie stanu ładowania, co pozwala na wyświetlenie wskaźnika ładowania oraz zastosowanie animacji CSS dla płynniejszego przejścia wizualnego.
Fireship przybliża także klienta o nazwie Boost, który działa jak router frontendowy, sprawiając, że tradycyjne aplikacje webowe zyskują na płynności. Co więcej, HTMX oferuje rozszerzenia do bardziej zaawansowanych funkcji, takich jak WebSockets oraz integracje z innymi frameworkami HTML, na przykład Alpine. Aby zainstalować HTMX, wystarczy zaimportować go w tagu skryptu w nagłówku dokumentu HTML. Gdy już to zrobisz, możesz korzystać z atrybutu hx-get, aby wysyłać zapytania do swojego endpointu, oraz hx-swap, aby zamieniać lub zmieniać określone elementy w interfejsie zależnie od odpowiedzi serwera.
HTMX udostępnia także atrybut hx-target, który pozwala na przenoszenie UI do zupełnie innego elementu na stronie oraz zawiera zaawansowaną składnię do łatwego poszukiwania odpowiednich elementów. Użytkownicy mogą również wykorzystać wskaźnik HTMX do pokazywania spinnera ładowania oraz tworzyć animacje CSS dla nowych elementów. Co więcej, HTMX zawiera rozbudowany system zdarzeń, którym można zarządzać za pomocą JavaScriptu oraz atrybutu hx-on, który pozwala na łączenie funkcji JavaScript z elementami.
Podsumowując, Fireship na pewno zaprezentował niezbyt skomplikowaną, ale bardzo funkcjonalną bibliotekę, która może zrewolucjonizować sposób, w jaki budujemy aplikacje webowe. Statystyki filmu pokazują, że ma on już 1,285,459 odsłon oraz 52,695 polubień, na moment pisania tego artykułu. Czy HTMX wzbudza w Tobie entuzjazm, czy wręcz przeciwnie? Daj znać w komentarzach, dziękując za obejrzenie i zapraszając do kolejnych materiałów.
Toggle timeline summary
-
Wprowadzenie do HTMX, biblioteki UI do web.
-
HTMX zarządza żądaniami HTTP za pomocą zwykłego HTML.
-
Koncepcja hipermediów jako silnika stanu aplikacji.
-
Atrybuty ułatwiające żądania serwerowe z elementów HTML.
-
Asynchroniczna wymiana elementów z odpowiedziami serwera.
-
Wprowadzenie Boost, routera po stronie klienta.
-
Zaawansowane funkcje, takie jak WebSockets i integracja z frameworkami HTML.
-
Instrukcje dotyczące instalacji HTMX.
-
Używanie atrybutów hx-get i hx-swap do żądań.
-
Atrybut hx-target do wyboru i manipulacji elementami.
-
Rozbudowany system zdarzeń do obsługi niestandardowych zdarzeń.
-
Więzanie funkcji JavaScript z elementami HTML za pomocą hx-on.
-
Podsumowanie budowy aplikacji HTML full-stack.
-
Wnioski i zachęta do zaangażowania widza.
Transcription
HTMX, a UI library for the web that can replace your JavaScript framework with the simplicity of HTML. Plain HTML is more capable than you think. Every time you click on a link or submit a form, it automatically sends an HTTP request to the server and renders the response in the UI. It's so easy, but why stop there? HTMX embraces an architectural constraint known as Hypermedia as the engine of application state by adding new attributes to HTML that can handle the complex requirements of modern UIs. It gives you the ability to make a request to the server from any element by providing an attribute with an HTTP verb and the URL endpoint on the server. It'll take the response from the server and replace this element asynchronously, or it can specify a target to replace a different element on the page. It can also customize the event on which it's triggered, along with modifiers like delay and throttle, to control the way the request is sent. It keeps track of the loading state so you can show a spinner, applies CSS transitions for animation, and builds on the HTML validation API to validate forms. It even has a client-side router called Boost that can make any traditional web application feel like a faster single-page application. And it also includes extensions for more advanced features like WebSockets and integrations with other HTML frameworks like Alpine. To install it, simply import HTMX in a script tag from the head of an HTML document. You just put the hyper back into hypertext. Now all you need is a server in your favorite programming language that returns HTML text as a response. Now we can use the hx-get attribute to make a request to this endpoint, along with hx-swap to replace this element with the HTML in the response. When swapping though, we don't only have the option to replace the outer HTML, but we could also append or prepend the response to the existing UI. Or the hx-target attribute allows us to move the UI to a completely different element. It finds that element with a CSS selector, but has additional syntax like next and closest, allowing you to easily find the proper element without a bunch of custom IDs. We might also use HTMX indicator to show a loading spinner, and write a CSS transition animation for the incoming element. Behind the scenes, HTMX has an extensive event system that you can tap into by listening to custom events with JavaScript. And if you want to run your own client-side JavaScript, the hx-on attribute allows you to bind a JavaScript function to any element. And that's all it takes to build a highly polished full-stack HTML application on the information superhighway. This has been HTMX in 100 seconds. Do you love it or do you hate it? Let me know in the comments. Thanks for watching and I will see you in the next one.