Швидкі посилання
Ключові висновки
- htmx — це бібліотека JavaScript, яка спрощує обробку запитів HTTP, роблячи загальні функції доступними через атрибути HTML.
- Ви можете легко додати його до своєї веб-програми за допомогою посилання на сценарій htmx на CDN.
- Ви можете використовувати htmx для таких взаємодій, як розбиття на сторінки, перевірка форми та вбудоване редагування без написання JavaScript.
Спільнота веб-розробників нещодавно була охоплена розмовами про htmx, але що це за нова захоплююча технологія? Виявляється, це набагато простіше, ніж ви могли б очікувати, але корисність htmx може виправдати ажіотаж.
Що таке htmx?
htmx — це невелика бібліотека JavaScript вузького профілю. Він робить загальні функції JavaScript доступними через атрибути HTML. Ось простий приклад:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">About</a>
Цей код показує спеціальний атрибут HTML, hx-get. Якщо ви натиснете це посилання, бібліотека htmx надішле запит AJAX і завантажить цільову сторінку без повного оновлення браузера.
htmx має додаткові функції, які дозволяють надсилати запити:
- З елементів, відмінних від a і form.
- На інших подіях, окрім клацніть і надішліть.
- Використання методів HTTP, відмінних від GET і POST.
- Вони замінюють будь-які частини сторінки, а не всю сторінку.
Хоча htmx підтримує такі технології, як анімація CSS і WebSockets, його основною метою є спрощення обробки запитів HTTP.
Як ви можете використовувати htmx у простій веб-програмі
htmx стосується певних функцій веб-програм або веб-сайтів, а не поведінки всієї програми.
Одна велика перевага бібліотеки полягає в тому, що нею легко почати користуватися. Ви можете завантажити та встановити копію, якщо хочете, але оскільки вона не має залежностей, все, що вам потрібно зробити, щоб почати, це додати посилання на сценарій на CDN:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Для локальної розробки та тестування вам потрібно буде налаштувати веб-сервер, наприклад Apache, якщо він у вас ще не запущений. Це обов’язкова вимога, навіть якщо ви просто експериментуєте зі статичними файлами, оскільки протокол file: не дозволяє запити AJAX.
Простий приклад використання Infinite Scroll
Нескінченне прокручування – це поширена техніка, яку використовують для своїх каналів такі сайти, як Twitter. Коли ви досягаєте кінця списку, нескінченне прокручування завантажує інші елементи, які ви можете продовжити читати.
Для цієї функції потрібен JavaScript для перевірки положення прокрутки сторінки та завантаження нових елементів без оновлення сторінки. Але htmx може зробити все це за вас.
Візьміть наступну розмітку, яка представляє список публікацій, використовуючи зображення для кожної:
<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>
Уявіть, що у вас є ці елементи у файлі, feed1.html, з іншими елементами у feed2.html тощо. Потім на кожній сторінці відображатиметься один невеликий набір елементів, які можна прокручувати:
Тепер ви можете використовувати посилання «наступна сторінка» для переходу від однієї сторінки до іншої, але ви також можете легко застосувати нескінченне прокручування. Просто змініть останній елемент на:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Додавання цих чотирьох атрибутів до кінцевого елемента списку реалізує нескінченне прокручування. Ось значення кожного атрибута:
|
Атрибут |
Значення |
Значення |
|---|---|---|
|
hx-тригер |
виявлено |
Коли цей елемент вперше з’являється на екрані… |
|
hx-отримати |
feed2.html |
… надішліть запит GET на feed2.html, … |
|
hx-вибір |
li |
… виберіть елементи li з відповіді, … |
|
hx-своп |
afterend |
… і додайте їх після цього елемента. |
Прокручуючи список униз, зверніть увагу, як сторінка автоматично завантажує новий вміст. Ви можете переконатися в цьому, спостерігаючи за смугою прокрутки та перевіряючи інструменти розробника вашого браузера:
Зауважте, що за допомогою цього простого налаштування статичної сторінки сторінка feed2.html містить останній елемент із атрибутом hx-get, встановленим як feed3.html тощо. Також зверніть увагу, як htmx додав слухач для події прокручування.
Інші можливі варіанти використання htmx
Ви можете використовувати htmx для багатьох інших поширених взаємодій, зокрема:
- Пагінація: завантажувати та замінювати елементи, коли відвідувач натискає посилання на сторінки.
- Перевірка форми: після надсилання замініть форму повідомленням підтвердження або підмножиною форми.
- Індикатори виконання: періодично оновлюйте значення індикатора виконання на основі відповіді ping.
- Вбудоване редагування: замінити елемент на текстове поле, що містить значення цього елемента.
Можна побудувати кожен із цих прикладів за допомогою стандартного JavaScript, але htmx значно полегшує процес.
Переваги та недоліки htmx
Переваги
htmx може значно спростити звичайну взаємодію, що може принести користь багатьом веб-додаткам і навіть багатьом веб-сайтам. Це дозволяє дизайнерам та іншим, хто працює з зовнішніми веб-сторінками, додавати функціональність без необхідності вивчати JavaScript.
Абстрагуючи спільну поведінку, htmx забезпечує узгодженість між вашими проектами та між ними. Нескінченна прокрутка буде поводитися однаково від сторінки до сторінки, незалежно від того, хто її реалізував.
Оскільки він наголошує на декларативному (що) підході, а не на імперативному (як), функціонал htmx зазвичай легше зрозуміти та обґрунтувати.
Недоліки
Хоча htmx може дозволити вам забути про JavaScript у багатьох контекстах, він не може вирішити всі проблеми за вас! Вам все одно потрібно буде написати код для обробки конкретної бізнес-логіки та більш низьких функцій.
Оскільки htmx виконує багато роботи за вас, у вас менше можливостей для налаштування поведінки. Це часто буде позитивним компромісом, але ви повинні бути готові передати контроль.
html може дозволити вам уникнути написання JavaScript, але ви все одно повинні знати, що код JavaScript працює у фоновому режимі. У вас може виникнути спокуса використовувати атрибут hx-get для кожного посилання замість атрибута href. Але це вводить залежність від JavaScript; якщо код не запускається з будь-якої причини, ваші користувачі залишаться з посиланням, яке нічого не робить. Ви завжди повинні практикувати прогресивне покращення, щоб запобігти цьому.