HTMX проты спадзячага значэння SPA: калі гіпермедыя перамага фрэймворк JavaScript
Як атрыбуты htmx заменяюць рэндарынг на стороне кліента, што на самай працо значыць размеры пакетаў, і аблікованыя рэкамендаціі пра тое, дзе праграмы на базе гіпермедыі маюць перавагу, а дзе яшчэ пануе React.
Большынства команд выбірае React для кожнага новага проекта, уключаючы панелі адміністрацыі та інструменты CRUD, якія здэйсніць складаюцца з форм і таблыц. htmx стверджуе, што значны частак такіх прыемоў ніколі не патрабаваў фреймворку з боку кліента: сервер можа адправіць HTML, а кальколька атрыбутаў можа дапамогчы любому элементу запрашваць і зміняць часткі яго. У гэтым кансалтаты раз’яснюецца, як працуе htmx, практычная ефекtywnасць яго паўставляецца з эфекtywnасцю React, а таксама паказаны як справжнія прынтэры, так і абмежэння, якія староннікі часта ігноруюць, ўжо бы вы моглі свядома выбраць архітэктуру, а не проста з прыzwычкі.
У яму предполагаецца, што вы вже стварылі веб-прыемы і большую частку свога часу прабывалі ў React або падобным фреймворку.
Як SPA стала стандартам для всага
Сапраўдзе, прыбліжна у 2013 годзе індустрыя зменіла свой основны модэль. Узамест таго, каб серверы вярталі HTML-сторанкі, яны пачалі вяртаць JSON, а JavaScript у браузеры ператвараў гэты JSON у інтэрфейс.
Для дзеяных продуктаваў аплікацыі з адной сторанкай стала справжнім крокам уперад. Gmail, Figma і Google Maps зберагаюць вельмі большую колькасць дадзенаў у браузеры, і ўсе іх вялікання павінны выглядаць мгновеннымі.
Проблема заключаецца ў тым, што гэты модэль распростраўіўся на ўсё. Внутранняя панель керування, якая паказвае рядкі і дозволяе ўсё яны зменяць, у канечнай працэзе апынулася з той самым архітектурным падходам, як і інструменты дизайна. Маркетынгавы сайт з адной формой кантактуў атрымаў інструменты для збірання дадзенаў, маршрутызаторы, бібліятэкі дадзенаў і процесы ўсунення непатрэбных элементаў.
Гэты стандарт мае конкрэтныя наследкі:
- Две базы коду, часта напісаныя на двох мовах
- Модэль дадзенаў, заданы ў обох частках
- Цэлы комплекс інструментаў для стварэння, падтрымкі і апдэйта
Галоўная ідея htmx заключаецца у тым, што багато прыкладнікаў платяць за гэтыя витраты, не атрымваючы нічога цэннае ў зворат.
Што такое htmx
htmx — это невялікая бібліятэка на JavaScript, якая расшыроўвае HTML за дапамогою атрыбутаў. За ўжыццём іх будь-які элемент можа адправіць запит HTTP і размістыць рэспанс у якомнебудзь месцы на сторунцы. Гэта, по суты, весь змест бібліятэкі.
Прыкладам можа служыць полье для пошуку у рэальны час. У ім указваецца, який URL трэба вызваць, якая подія запускае цей вызов і куды трэба размістыць рэзультат:
<input type="text"
name="q"
hx-get="/search"
hx-trigger="keyup changed delay:300ms"
hx-target="#results">
<div id="results"></div>
Чытайце атрыбуты як выраз: калі клавіша адпускаецца і значэнне дзейсна зменілася, чакайце 300 мс, апрашоўце GET-запыт да /search і размістайце тое, што вернулася, ў #results. Модифікатор delay:300ms запобегае частым запытам, тады швайная адпіска не будзе апрашоўваць сервера за кожны натыканне клавішы.
Сервер не вяртае JSON. Ён вяртае готавы фрагмент HTML:
<ul>
<li>First result</li>
<li>Second result</li>
</ul>
htmx падмешвае гэты фрагмент у целевы элемент. Не выканана парсаванне JSON, няма шаблона на стороне кліента, і няма стану кліента, які мог бы адхіліцца ад стану на сервере.
Атрыбуты, якія вы будете вжываць частаўей
hx-get,hx-post,hx-put,hx-delete— выбіраюць метод HTTP і URL.
hx-trigger задае запускаючую падзіню, напрыклад click, keyup, load, every 2s або revealed (калі элемент з’являецца на экране пад час прасування).hx-target выбірае элемент, які будзе прымоць адпаведную адпаведнасць.hx-swap кантролюе спосаб уведзення адпаведнасці: innerHTML, outerHTML, beforeend або delete.hx-indicator паказуе элемент, які апісваецца пад час обработкі запиту.hx-confirm прасіць корыстніка падтвердзіць дзеянне першы чым адправіць запит.Эты элементы добрачна сумешваюцца. Наступны фрагмент коду выкарыстоўваецца для выдалення рэчкі таблы: кнапка адправляе запит DELETE, нацэльваецца на найбліжэйшы tr, заменяе цюю рэчку на (зазвычай порожнюю) адпаведную вясь, і спачатку запытае па падтверджэнні. Модифікатор swap:1s затрымляе процэс замены на адну секунду, што дае CSS-переходу час на паступова зникненне рэчкі і стварае вражання адразуайной рэакціі системы:
<tr>
<td>Widget</td>
<td>
<button hx-delete="/items/42"
hx-target="closest tr"
hx-swap="outerHTML swap:1s"
hx-confirm="Delete this item?">
Delete
</button>
</td>
</tr>
Зверніце ўвагу на тое, чаго няма: жаднага окремага файла JavaScript, жадных крокаў падчас складання коду і жаднага стану на баку кліента. Сервер застаецца адпаведальным за выдаленне элемента і за прыняцьце рашэння, каму павінна стаць тая рэчка.
Две архітектуры па боку ад боку
Разлік стае яшчэ болей зрозумелым, калі рассматраць процес выканання задачы, чым калі проста порэўнаваць інструменты.
- Модэль SPA: сервер адпраўляе JSON, код кліента яго атрыбутуе і керуе станам, паўтарычна атрыбутуе яго пасля дзейства пользователя, і адпраўляе JSON назад.
- Модэль гіпермедыя: сервер адпраўляе HTML, прыгледчык яго паказвае, паўтарычна атрыбутуе яго пасля дзейства пользователя, сервер адпраўляе новы HTML, і прыгледчык яго заменяе.
У модэлі гіпермедыя існуе толькі адна аснова правды — сервер. эта пазбегае цэлага класу бягоў, калі кліент верыць у ўсё іншае, чым кажа база дадзенаў, такіх як застарэлыя кешы або оптымістычныя адкладзеныя змены, якія так і не былі супрацаваны.
Карсан Гросс, які створылі htmx, праступае да гэтаго як да вярнення да таго, каму паслужыў REST. Падход REST Роя Філдінга уключае абавязак HATEOAS (Hypermedia As The Engine Of Application State): сервер выдае інформацыю, якая паказвае дзеінструменты, якія можна выкарыстоўваць далей. Тыповы JSON API гэтага не робіць; кліент должен заздалегідь ведаць, якія канчыкі існуюць. HTML робіць гэта натывна, таму што хутар ёсць пераходам стану, а форма — дзеінструментам. Тое, чы розумелаюце вы гэты падход як проніклівы чы ў акадэмічны сенс, яўляецца хорашым прамаравам для таго, як вы ставіцеся да htmx в цэлым.
Апылканне розмеру пакета і тое, чаго гэта не паведамляе
Указаныя розмеры разніцяюцца, таму корыстна іх апылкаваць. На момент напісання миніфікаўны варыянт htmx меў такі розмер:
htmx.min.js: 51,238 bytes raw
16,576 bytes gzipped (16.2 KB)
Варыянты продакшн-білдоў React 19.2.8, пакету React асабліва кліента DOM, мялі такі розмер:
react.production.js: 4,446 bytes gzipped
react-dom-client.production.js: 94,757 bytes gzipped
combined: 98,420 bytes gzipped (96 KB)
Это прыткі разлік у шасця разоў, і ён стосуецца толькі часу выканання React. Рэальныя дапрацоўкі на React адключаюць маршрутазатор, бібліятэку стану, шар для запошуку дадзеных і сабственныя компоненты, таму готавыя пакеты часта становяцца кілька сот кілабайтаў. У працоўку htmx, на адміну, уключаюцца всі залежнасці на стороне кліента. Точныя цыфры зменшаюцца з кожнай выданнем, таму трэба перыякшаць ўсё за дапамою версій, якія вы насправдзе будзеце адправляць.
Але будзьце астаткавы ў своіх выводах. Размер пакета вплывае на першы завантажэння, а не на швальнасць взаімадзеяння пасля таго. Пры хорашый з’ѐеднанні разлік у часе завантажэння є малым, а пад час паўтарных візітав оба файлы прыходзяць з кэшу. Болей пераканлівым аргументам па канцэпцыі выдатнасці є тое, што htmx не мае фазы гідратацыі — перыяду, калі стороннім серверам выкананая сторынка React здаецца гатовай, але ігнаруе клікі пакуль не будуць прыўязаныя ёе обробнікі змаганняў.
Дзе htmx дапамагае справжняя
- Адзін язык і адзіны кодавая база. Команда, яка працуе на Go, Python, Ruby або C#, можа стварыць цэлую прыкладнасць. Пераканаленне дадзеных выкарыстоўваецца ў аднам месцы, а модэль дадзеных задаецца толькі раз.
- Няма процесу складання. Дастатнека адной тагі
script. Няма налаштаванняў бандлера, няма файлаўnode_modulesдля фронтэнду, і няма патрэбы аптываць залежнасці фронтэнду. - Локальнасць працы. Функція элемента задаецца непасульком на самы элемент. Уместо таго, каб следаваць за клікам через калькі файлоў і базу дадзеных, проста чытаецца маркап. Гэта адна з супершых прычын такога падходу, і яна стосуецца зручнасці адтрымання, а не швальнасці.
- Стан дадзеных у аднам месцы. Няма кэша кліента, які трэба анулюваць, няма застарелых дадзеных, і няма патрэбы анулювацыя оптымістычных апдэйтаў.
Дзе htmx не падходзіць
Это тыя аспекты, якія часта не праменаваліся.
Розгледзеная, непаўяротная адсоўязанасць
Рэдагувальнікі на основе тэхналогій drag-and-drop, canvas, электранкі та інтэрактыўныя графікі з можласцю адбарвлення і зумування выклікаюць сталяе взаімадзейства, а не окремыя запиты. У htmx кожна взаімадзейнае дзеянне ўключае двухкратную перадачу данных на сервер. Для такога прыборку, як рэдагувальнік тексту, гэта не ўзаемна замена; гэта выключае htmx.
Затрымкі на слабых сетях
Падтрымчыкі гэтай тэхналогіі адзначаюць, што хостынг на краях сеті значна скорачыў час двухкратных перадач, і гэта правда. Аднак корыстнік з слабым мобайльным з’ўязкам у сельскай местнасці можа чакаць калькі сотых мілісекунды на тое, што React адобразыў бы локальна за калькі мілісекунд. Аплікацыі htmx працуюць чудова на хорашых сетях, але значна гіркая на слабых, што ўсуперак таму, як часта прыставляецца гэта пытанне.
Няма можлівасці для мобайльных прыборак чы работы без інтэрнету
htmx прыменяецца толькі на веб-сайтах. React Native дазваляе командам дзеліцься ідэямі та значным колькасцю коду з натыўнымі дапрыемамі, таму якщо натыўныя мобайльныя дапрыемы є частью плану развіцця, гэта можа пераважыць усе іншыя фактыры. Афлайн-варіант таксама немагчымы, адколі кожная взаімадзея трэбуе сервера.
Складны стан на боку кліента
Багатоэтапныя візарды з взаізалежнымі полямі, формы з рэальной пераверкай межаў полей або экраны, дзе калькі компонентаў должны рэагаваць на адну змяну, ствараюць труднасці. Команды зазвычай дадаюць Alpine.js або hyperscript, і тады яны складаюць фрэймворк з разных частак, а не вжываюць готавы фрэймворк.
Маленькая экасистема та меньшы пул кваліфікованых спецяў
У React є вырашэнныя компаненты для практычна будзь-каго віджэта. З htmx вы або ствараеце сабе выбірчык дат, або вбудовваеце стаўяны JavaScript-код і самі керуеце ўсім. Таксама важна ўпэўненасць у інструментах: на момент напісання апытакі паказваюць, што React выкарыстоўвае болей 40 процэнтаваў развіяльнікаў, тым час як htmx — адносна 7 процэнтаваў, пры чым колькасць завантажэнняў через npm становіць апошню 560 да 1. Гэта вплывае на тое, насколькі быстра новыя спецыялісты становяцца продуктывнымі, і на тое, насколькі лёгка можна знайсці рашэння, калі становіцца у скрутным становішчы.
Актыўнае стаўленне: калі чытаць цыфры
Рэальная картіна ўскладненая, і не падкрэпляецца тым, што прапанаваюць адні чы другія.
- Выкарыстоўванне React не падае. Ён залишаецца домінуючым у абсалютных показніках з вельмі большым перападам.
Узагальненне: React не заменяецца, але яго становішча як беззаперечнага стандарту слабее. Памятайце, што большая частка контэнту пра супернаслення htmx і React напісана для пошуковаго трафіку, а такі показнікі, як процэнт скорачэння коду чы разныя кэфіціенты швальнасці, павтараюцца без апавядання пра джэрела. Спрыяйце іх як кіравыя падказкі і пераканайцеся ў актуальных джэрелах пры ўжыванні.
Выбір межы імі
Выберайте htmx, калі:
- Програма ў основнай часты складаецца з форм і спісоў: панелі адказчыка, внутршнія інструменты, прыкладныя програмы типу CRUD, веб-сайты з контентам, панелі керування, якія выказваюць даны, а не маніпулююць імі.
- Сілы вашай команды закладзеныя у частцы сервера.
- Вы хачаце едыную базу коду, якую будзе могаць падтрымліваць кожны з членам команды чераз калькі гадоў.
Выберайте React, калі:
- Браузер фактычна зберагае значны стан, як у редакторах, інструментах дизайна, пры рэальны часе саўместнай працы або масовай маніпуляцыі даннымі.
- Вам патрэбны натыўныя мобільныя дапрыемкі або падтрымка без з’ўязку з Інтернетам.
- Вы павяржаецеся на развіты экосыстэму компонентав.
Існуе таксама трэці варыянт, які частаўка ігноруецца: выкорыстоўваць оба. htmx можа аддаюць экраны CRUD, тады як React задавае роботу двум чы трох відзёраў, якім гэта практычна неабходна. Нічто не змушвае вжываць адну лептарку для всего продукту, і сумешчанне htmx з часткай React ўсё простае, чым сумешчанне двух фрэймворкаў SPA. Якщо вы вялікі час вжываеце htmx, нарадчык па апгрэйду да htmx 4 раскладае, якія змены будуць у наступнай мажорной версіі.
React Server Components запозначаюцца часткай ідэі гіпермедыі, пераносячы процес аддачы на сервер. Аднак ім яшчэ неабходны цэлы рантайм React і сервер, які падтрымае Node, таму гэты варыянт не ўважаецца лёгкім; гэта React, які атрымоўвае частку тых сабе прынад, што ён і так мае.
Галоўныя выводы
- htmx дазваляе будзь-яму элементу адправіць запит і заменіць яго на HTML, выроблены серверам, што паляўнае сервер як едынага адпаведальнага джерага і усувае сінхронізацыю стану кліента.
- Яго час выконання становіць прыблізна шостую частку часу выконання React без дадагаўкі коду аплікацыі React, але практычны прыбутак заключаецца больш у ухіле ад процесу гідратацыі, чым у скорэйшым завантажэнні.
- Ён ідеальна падходзіць для аплікацый типу CRUD, внутрашняях інструментаў і сайтаў з контентам, але мае проблемы з постоянной взаімадзейнасцю, слабымі сетямі, викорыстаннем на мобільных прыстроях, роботай без падключэння да інтернету та складным станам кліента.
- Спалучэнне эўх двух тэхнолагій — граматычна правядзімая архітектура, а не компроміс.
Болейш адпрацоўны вопыт у рамках гэтай дыскусі — гэта як архітектура, створаная для Gmail, стала стандартам для формы з шасцю польмі. Ніхто цалкам не памыліўся; інструмент стаў стандартным, а стандарты перестаюць аналізавацца. Што б вы не выбрали, включаючы React, нехай это будзе рашэнне, пры яком вы правілі, а не такое, яке вы запанавалі.
Спадневае чытанне
- React's Scheduler and the Event Loop: Who Really Decides When Work Runs — Дакладнейша інфармацыя пра тое, як кооператывны Scheduler React работае ў межах JavaScript event loop, чаму можа выйсці перыяд пераходу і чаму жадны scheduler не можа вываліць заблокаваны потак.