Комментарии 17
Htmx прикольный. Простой и понятный, хорошо подходит для бек-енд разрабов. А вот гиперскрипт как-то не зашёл.
Ещё можно alpine.js вместо с ajax прагином посмотреть — очень похожий функционал, плюс немного реактивности на клиенте. Эдакий упрощённый vue.
Пытаюсь делать хобби проект на htmx концепция классная но гемор ещё тот :(
У меня в демке до нажатия "Submit" ничего не меняется.
И не должно! Вы, кажется, не поняли смака htmx. Не нужны никакие js и прочие инструменты чтобы изменить код страницы. Вообще. Он просто редактируется и всё. Делается запрос, получаем ответ что нужно вставить в страницу. Ничего лишнего.
Теоретически. А практически вылезают всякие edge cases , и пошли пляски с бубном.
Простейший пример. Есть поле со списком элементов. Храним element-id а показываем element-name. Без бубна нормально реализовать не получиться. :(
А теперь вставьте в сценарий трансатлантический кабель - делается запрос и ответ придет не сразу. Простая страничка будет нещадно тормозить на каждый чих. И другое дело на js - обработал редактирование на клиенте, сделал один запрос на сохранение всех изменений. Один раз можно подождать.
Выглядит как сырой, кривой, паршиво продуманный велосипед, который имеет смысл применять в каких-то одному автору понятных случаях, с абсолютно непонятным профитом.
Для такой «подмены» HTMX производит рендеринг HTML на стороне сервера
для редактирования разметки. За кулисами по-прежнему работает
JavaScript.
То есть это своего рода SSR, всё с тем же JS, фреймворков для которого уже сотни. Но при этом ещё нужно будет городить какой-то шизовый огород из атрибутов и непонятного поведения на стороне клиента.
Если посмотреть на все проекты Карсона Гросса, то их объединяет одно:
они направлены на решение главной проблемы современной разработки —
избыточной сложности.
Из приведённых примеров закрадываются определённые сомнения в том, что реально сложный проект на этом велосипеде стал бы проще. Проблема разработки не сложности самой разработки, а в том, что программисты переусложняют процесс там где этого делать не надо.
Вот тут хорошие об это рассуждения https://vas3k.blog/notes/indie_vs_corpo/
Даже сама статья читается странно - спа плохо, на фронте слишком много jsа, фронт не соответствует задумкам тру программистов, тонна людей занимаются непонятно чем. Читаешь чуть дальше - ээээ, ну у нас ССР с оч странной разметкой в фронт части, js есть но вы его не увидите, полетит мамой клянусь. От очередной серебряной пули которой точно убьет все существующие фреймворки уже чуть чуть тошнит
Установка Hyperscript на сервере:
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
Что я только что сейчас прочитал? Как, блин, это работает?!
посмотрел примеры. дошел до простейших табов. ясненько.
а давайте еще добавим сюда ныне популярного тейлвинда, чтоб совсем весело было. Вот будет весело это поддерживать. В общем очередной велосипед.
<div id="tabs" hx-target="#tab-contents" role="tablist"
hx-on:htmx-after-on-load="let currentTab = document.querySelector('[aria-selected=true]');
currentTab.setAttribute('aria-selected', 'false')
currentTab.classList.remove('selected')
let newTab = event.target
newTab.setAttribute('aria-selected', 'true')
newTab.classList.add('selected')">
<button role="tab" aria-controls="tab-contents" aria-selected="true" hx-get="/tab1" class="selected">Tab 1</button>
<button role="tab" aria-controls="tab-contents" aria-selected="false" hx-get="/tab2">Tab 2</button>
<button role="tab" aria-controls="tab-contents" aria-selected="false" hx-get="/tab3">Tab 3</button>
</div>
<div id="tab-contents" role="tabpanel" hx-get="/tab1" hx-trigger="load"></div>
Карсон Гросс, создатель HTMX