Англійська для HTMX

HTMX протиставляється всім сучасним фреймворкам для інтерфейсів, отже, щоб обговорити його, потрібно розуміти філософію, яка лежить за атрибутами, а не лише те, що кожен з них робить механічно.

Ключовий словник

** Гіпермедійна програма ** — основна філософія HTMX: сервер повертає фрагменти HTML у відповідь на дії користувача, а переглядач обмінює їх на сторінку, замість того, щоб клієнт керував станом і відтворенням за допомогою JavaScript. “Це гіпермедійна програма, а не програма з однією сторінкою — коли користувач натискає цю кнопку, сервер відтворює оновлений HTML і відсилає його назад, клієнт взагалі не зберігає стан програми в JavaScript.”

** hx- get / hx- post ** — атрибути HTMX, які вмикають запит AJAX на адресу URL, коли з елементом взаємодіє користувач, замінюючи необхідність написання викликів отримання або обробників подій у JavaScript для звичайних взаємодій. “Для цього нам не потрібен обробник клацань і виклик завантаження — hx- post на кнопці надсилає запит безпосередньо, а HTML- відповідь автоматично замінюється на сторінку.”

** hx- swap ** — атрибут, що керує тим, як буде вставлено HTML- відповідь відносно елемента призначення, зі значеннями на зразок innerHTML, outerHTML, beforeend або afterbegin, які визначають точну поведінку вставлення.

• “Новий елемент не з’ явився у тому місці, де ми очікували, оскільки hx- swap було встановлено на innerHTML, замінюючи вміст контейнера, коли насправді ми хотіли перед завершенням додати новий елемент до існуючого списку.” *

** hx- target ** — атрибут, який вказує, який елемент сторінки має отримати обміняний HTML, якщо це не елемент, який викликав запит, що дозволяє одній взаємодії оновити іншу частину сторінки. “Під час надсилання форми потрібно оновити панель результатів, а не саму форму, тому ми встановили hx-target, щоб він вказував на ідентифікатор цієї панелі, а не дозволяв відповіді замінити форму.”

** Фрагмент, відтворений сервером ** — частина коду HTML, яку повертає сервер у відповідь на запит HTMX, зазвичай, це лише змінена частина сторінки, а не повне перезавантаження сторінки, що зберігає корисні дані малими і логічними на сервері. “Кінечна точка не повертає повної сторінки або JSON — вона повертає фрагмент, відтворений сервером, лише оновлений рядок таблиці, який HTMX обмінює безпосередньо на місце.”

Звичайні фрази

• «Чи це взаємодія, керована гіпермедійними засобами, або нам дійсно потрібен клієнтський стан тут?»
• Чи має це бути hx-get або hx-post, залежно від того, чи є воно ідемпотентним?
• «Яка стратегія hx-swap ми хочемо — замінити, додати, або щось інше?»
• Чи це потребує явної hx-цілі, чи це оновлення самого елемента тригера?»
• «Чи повертає сервер тут цілу сторінку, чи тільки той фрагмент, який нам потрібен?»

Приклади висловлювань

Пояснюючи компроміс з архітектурою: “Ми навмисно обрали програму, що керується гіпермедійними даними — цей інструмент адміністрування не потребує складного стану з боку клієнта, тому ми повністю уникнули JavaScript-фрейму і дозволили серверу повертати лише фрагменти HTML для кожної взаємодії.”

Зневадження проблеми з обміном: “Список не оновлюється належним чином, оскільки hx- swap було встановлено на outerHTML, який замінює весь елемент цілі, включаючи ідентифікатор, який HTMX потрібно знайти знову наступного разу — переключення на innerHTML виправило це.”

Обґрунтування рішення про прицілювання: “Це поле пошуку потребує hx-target, що вказує на div результатів, а не на себе, оскільки вхідний запит не є елементом, який має отримати новий HTML.”

Професійні поради

• Розгляньте HTMX як будівництво гіпермедійної програми, коли пояснюєте підхід команді, яка звикла до SPA — це справді інша архітектура, а не легша версія React.
• Виберіть ** hx- get ** для безпечних запитів і ** hx- post ** для будь- чого, що змінює стан, згідно з тією ж семантикою, що і методи HTTP.
• Будьте обережними зі стратегією ** hx- swap ** — типове замінювання внутрішнього HTML часто є неправильним для списків або журналів, до яких ви бажаєте додати або додати перед ними.
• Використовувати ** hx- target **, коли елемент, який викликає запит, не є тим, який слід оновити — його пропущено, що є поширеним джерелом помилок типу « нічого не сталося ».
• Тримайте ** фрагмент, відтворений сервером ** мінімальним і зосередженим на тому, що саме змінилося — повернення більше, ніж потрібно, зменшує пропускну здатність і спрощує підхід.

Практичні вправи

1. Пояснити, що означає « гіпермедійний » і як він відрізняється від типової односторінкової програми.
2. Опишете ситуацію, у якій вам потрібна hx- target замість того, щоб дозволити відповіді замінити елемент спуску.
3. Напишіть речення, у якому пояснюється різниця між значеннями hx- swap innerHTML і beforeend.

На практиці: полірування Вашого спілкування з HTMX

Ядро привабливості HTMX полягає в його здатності створювати чутливі веб-досвіди без традиційної сильної залежності від JavaScript. Однак, ефективне спілкування щодо вашої реалізації HTMX — особливо під час співпраці з іншими — вимагає певного словника і підходу. Як людина, для якої англійська мова не є рідною, легко впасти в надто буквальні переклади або використовувати фрази, які здаються незграбними в контексті розробки програмного забезпечення. Давайте зосередимося на вдосконаленні того, як ви обговорюєте * концепції * за HTMX, а не тільки його механіку.

Однією з ключових областей є опис змін. Замість того, щоб просто сказати «оновлення HTML», розгляньте його як «оновлення, кероване гіпермережею», підкреслюючи навмисний обмін даними і розміткою. Подумайте про перегляд коду: коментар на кшталт: «Цей запит HTMX використовує src для динамічного завантаження вмісту - переконайтеся, що це відповідає нашим принципам проектування компонентів щодо розділення питань» є набагато більш професійним і дієвим, ніж нечітка критика. Аналогічно, коли ви пишете описи PR для ваших змін, зосередьтеся на тому, * чому * ви використовуєте HTMX. « Цей PR реалізує модальне вікно, кероване HTMX, для надсилання користувачем зворотнього зв’ язку. Атрибут hx-get полегшує асинхронне отримання даних з серверного API, зменшуючи кількість перезавантажень сторінок і покращуючи навички користувача.» Це демонструє розуміння призначення технології і обґрунтовує ваш підхід. Інша корисна фраза — «обмін вмістом», що стосується основної поведінки HTMX — заміни частин HTML-документа новим вмістом, отриманим через AJAX.

Крім того, точність в описі змін стану є життєво важливою. Розробники часто обговорюють такі речі, як « перегляд потребує оновлення » або « нам потрібно оновити інтерфейс користувача ». У контексті HTMX, точнішим буде сказати: « Запит HTMX викликав * обмін вмістом *, оновлюючи розділ, визначений hx-target з даними, отриманими з сервера. » Ця специфіка уникає неоднозначності і демонструє глибше розуміння того, як працює HTMX. Уникайте розмовних фраз, які не мають прямого відношення до технічної дискусії.

Нарешті, не бійтеся використовувати більш описову мову, коли пояснюєте складні взаємодії. Наприклад, замість того, щоб сказати « скрипт надсилає запит », спробуйте сказати « Компонент ініціює асинхронний запит HTTP GET до кінцевої точки /api/users за допомогою HTMX ». Такий рівень деталізації не лише сприяє ясності; він демонструє професіоналізм і створює довіру у вашій команді.

Ось простий приклад, який показує, як ви можете використовувати hx-get у командному рядку (за допомогою curl) для імітації запиту HTMX:

curl -X GET 'https://example.com/api/users?id=123' -H 'HX-Request': 'true'

Ця команда імітує поведінку атрибута HTMX hx-get, надсилаючи запит до вказаної кінцевої точки і включаючи необхідний заголовок, щоб HTMX розпізнав його як запит HTMX. Це стосується передачі * намерень * чітко - що ви ініціюєте обмін даними на основі взаємодії користувача.