0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>22 сен 2023</li>
2
<ul><li>22 сен 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Современный фронтенд - это боль. Но есть и лекарство.</p>
4
</ul><p>Современный фронтенд - это боль. Но есть и лекарство.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Востоковед, интересующийся IT. В прошлом редактор раздела "Системный блок" журнала "Fакел", автор журналов Computer Gaming World RE, Upgrade Special, руководитель веб-ресурсов компании 1С-Softclub.</p>
6
<p>Востоковед, интересующийся IT. В прошлом редактор раздела "Системный блок" журнала "Fакел", автор журналов Computer Gaming World RE, Upgrade Special, руководитель веб-ресурсов компании 1С-Softclub.</p>
7
<p>В 2020 году программист Карсон Гросс представил JavaScript-библиотеку HTMX, которая позволяет создавать современные веб-интерфейсы с помощью обычного HTML. Некоторым идея настолько понравилась, что<a>стали поговаривать</a>, будто фреймворкам вроде React или Angular скоро придёт конец. В этой статье попробуем разобраться, что вообще такое HTMX, какие проблемы она решает и правда ли теперь можно не учить React.</p>
7
<p>В 2020 году программист Карсон Гросс представил JavaScript-библиотеку HTMX, которая позволяет создавать современные веб-интерфейсы с помощью обычного HTML. Некоторым идея настолько понравилась, что<a>стали поговаривать</a>, будто фреймворкам вроде React или Angular скоро придёт конец. В этой статье попробуем разобраться, что вообще такое HTMX, какие проблемы она решает и правда ли теперь можно не учить React.</p>
8
<p>Читайте дальше, чтобы узнать:</p>
8
<p>Читайте дальше, чтобы узнать:</p>
9
<ul><li>в чём главная<a>проблема современного фронтенда</a>;</li>
9
<ul><li>в чём главная<a>проблема современного фронтенда</a>;</li>
10
<li>какое<a>решение</a>предлагает HTMX;</li>
10
<li>какое<a>решение</a>предлагает HTMX;</li>
11
<li>как<a>работает</a>эта библиотека;</li>
11
<li>как<a>работает</a>эта библиотека;</li>
12
<li>в чём её <a>плюсы</a>и <a>минусы</a>;</li>
12
<li>в чём её <a>плюсы</a>и <a>минусы</a>;</li>
13
<li>когда следует<a>выбирать HTMX</a>;</li>
13
<li>когда следует<a>выбирать HTMX</a>;</li>
14
<li>стоит ли<a>учить HTMX вместо React</a>.</li>
14
<li>стоит ли<a>учить HTMX вместо React</a>.</li>
15
</ul><p>Причины появления HTMX нужно рассматривать в контексте развития веб-разработки в последние годы. Существующие веб-приложения можно условно поделить на две большие группы.</p>
15
</ul><p>Причины появления HTMX нужно рассматривать в контексте развития веб-разработки в последние годы. Существующие веб-приложения можно условно поделить на две большие группы.</p>
16
<p><strong>Многостраничные приложения (MPA)</strong>, которые обновляют всю страницу при каждом взаимодействии пользователя с ней. При этом подходе состояние страницы обычно контролируется сервером. Однако перезагрузка страницы при каждом изменении может замедлять работу приложения.</p>
16
<p><strong>Многостраничные приложения (MPA)</strong>, которые обновляют всю страницу при каждом взаимодействии пользователя с ней. При этом подходе состояние страницы обычно контролируется сервером. Однако перезагрузка страницы при каждом изменении может замедлять работу приложения.</p>
17
<p><strong>Одностраничные приложения (SPA)</strong>, в которых управление состоянием осуществляется с помощью JavaScript, выполняющегося в браузере. SPA взаимодействуют с сервером посредством вызовов<a>API</a>, которые возвращают данные, обычно в формате<a>JSON</a>. Затем приложение обновляет интерфейс, не перезагружая страницу целиком.</p>
17
<p><strong>Одностраничные приложения (SPA)</strong>, в которых управление состоянием осуществляется с помощью JavaScript, выполняющегося в браузере. SPA взаимодействуют с сервером посредством вызовов<a>API</a>, которые возвращают данные, обычно в формате<a>JSON</a>. Затем приложение обновляет интерфейс, не перезагружая страницу целиком.</p>
18
<p>Несмотря на очевидные плюсы SPA, у этой модели есть недостаток, с которым не все готовы мириться, - высокая сложность. Чтобы SPA работало как надо, браузер должен загрузить и выполнить целую кучу файлов JavaScript. Из-за этого SPA могут подтормаживать и подъедать оперативку, особенно если эти файлы плохо оптимизированы и каждую секунду забрасывают сервер десятками запросов.</p>
18
<p>Несмотря на очевидные плюсы SPA, у этой модели есть недостаток, с которым не все готовы мириться, - высокая сложность. Чтобы SPA работало как надо, браузер должен загрузить и выполнить целую кучу файлов JavaScript. Из-за этого SPA могут подтормаживать и подъедать оперативку, особенно если эти файлы плохо оптимизированы и каждую секунду забрасывают сервер десятками запросов.</p>
19
<p>Но главная проблема, конечно, не в скорости. Чтобы написать полноценную клиентскую логику на JavaScript, нужно подключить массу сопутствующей инфраструктуры: фреймворков, библиотек, NPM-модулей, сборщиков. Начинается вакханалия проблем с зависимостями: как состыковать два компонента, как поменять одну часть приложения, чтобы не сломалась другая, как безболезненно перенести проект с одного фреймворка на другой.</p>
19
<p>Но главная проблема, конечно, не в скорости. Чтобы написать полноценную клиентскую логику на JavaScript, нужно подключить массу сопутствующей инфраструктуры: фреймворков, библиотек, NPM-модулей, сборщиков. Начинается вакханалия проблем с зависимостями: как состыковать два компонента, как поменять одну часть приложения, чтобы не сломалась другая, как безболезненно перенести проект с одного фреймворка на другой.</p>
20
<p>Из-за раздутого арсенала инструментов фронтендерам приходится постоянно переучиваться. Всю жизнь работал с React? Не беда, освоишь Vue. На прошлой работе использовал Redux? Придётся повозиться с MobX. Как это ты не знаешь, чем различаются Nuxt, Next и Nest? И всё в этом духе.</p>
20
<p>Из-за раздутого арсенала инструментов фронтендерам приходится постоянно переучиваться. Всю жизнь работал с React? Не беда, освоишь Vue. На прошлой работе использовал Redux? Придётся повозиться с MobX. Как это ты не знаешь, чем различаются Nuxt, Next и Nest? И всё в этом духе.</p>
21
<p>Возникает закономерный вопрос: а не проще ли тогда вообще отказаться от всей этой романтики с фреймворками, JavaScript и клиентским рендером?</p>
21
<p>Возникает закономерный вопрос: а не проще ли тогда вообще отказаться от всей этой романтики с фреймворками, JavaScript и клиентским рендером?</p>
22
<p>"Если лучшие в мире фронтенд-инженеры не могут заставить текст и изображения работать без пяти мегабайт JavaScript, то, возможно, нам стоит просто отказаться от веб-платформы".</p>
22
<p>"Если лучшие в мире фронтенд-инженеры не могут заставить текст и изображения работать без пяти мегабайт JavaScript, то, возможно, нам стоит просто отказаться от веб-платформы".</p>
23
<p><strong>Рич Харрис</strong>, один из разработчиков Svelte.js,<a>Have Single-Page Apps Ruined the Web?</a></p>
23
<p><strong>Рич Харрис</strong>, один из разработчиков Svelte.js,<a>Have Single-Page Apps Ruined the Web?</a></p>
24
Мем с официального сайта HTMX, иллюстрирующий сложность современного фронтенда<em>Скриншот: <a>HTMX</a>/ Skillbox Media</em><p>Библиотека HTMX - это попытка уйти от перечисленных выше проблем, сохранив при этом современную функциональность приложений. Она позволяет достичь тех же целей, что и популярные фреймворки, но более простым путём.</p>
24
Мем с официального сайта HTMX, иллюстрирующий сложность современного фронтенда<em>Скриншот: <a>HTMX</a>/ Skillbox Media</em><p>Библиотека HTMX - это попытка уйти от перечисленных выше проблем, сохранив при этом современную функциональность приложений. Она позволяет достичь тех же целей, что и популярные фреймворки, но более простым путём.</p>
25
<p><strong>HTMX</strong> - библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода.</p>
25
<p><strong>HTMX</strong> - библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода.</p>
26
<p>HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA. В этой модели рендеринг страницы происходит на сервере, а клиенту передаётся уже готовый HTML-код, который затем встраивается в нужное место DOM-дерева сайта. Браузеру не нужно ничего интерпретировать и визуализировать - все эти вычисления берёт на себя сервер. Такой подход упрощает процесс разработки за счёт минимизации сложности клиентской стороны.</p>
26
<p>HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA. В этой модели рендеринг страницы происходит на сервере, а клиенту передаётся уже готовый HTML-код, который затем встраивается в нужное место DOM-дерева сайта. Браузеру не нужно ничего интерпретировать и визуализировать - все эти вычисления берёт на себя сервер. Такой подход упрощает процесс разработки за счёт минимизации сложности клиентской стороны.</p>
27
<p>Для примера давайте сравним, как выглядит код простого счётчика, написанный на JavaScript с помощью React и на HTMX. Начнём с React:</p>
27
<p>Для примера давайте сравним, как выглядит код простого счётчика, написанный на JavaScript с помощью React и на HTMX. Начнём с React:</p>
28
import React from 'react'; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={() => this.incrementCount()}>Increment</button> </div> ); } }<p><strong>Что здесь происходит.</strong>В примере выше мы создаём компонент Counter, который хранит значение счётчика (по умолчанию - 0). Когда пользователь нажимает на кнопку, компонент вызывает метод incrementCount, который увеличивает значение счётчика на 1. Это заставляет React перерисовать компонент с новым значением счётчика в параграфе.</p>
28
import React from 'react'; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={() => this.incrementCount()}>Increment</button> </div> ); } }<p><strong>Что здесь происходит.</strong>В примере выше мы создаём компонент Counter, который хранит значение счётчика (по умолчанию - 0). Когда пользователь нажимает на кнопку, компонент вызывает метод incrementCount, который увеличивает значение счётчика на 1. Это заставляет React перерисовать компонент с новым значением счётчика в параграфе.</p>
29
<p>Теперь посмотрим, как та же функциональность реализована в HTMX:</p>
29
<p>Теперь посмотрим, как та же функциональность реализована в HTMX:</p>
30
<div> <p hx-get="/count">Count: 0</p> <button hx-post="/increment" hx-swap="outerHTML">Increment</button> </div><p><strong>Что здесь происходит:</strong></p>
30
<div> <p hx-get="/count">Count: 0</p> <button hx-post="/increment" hx-swap="outerHTML">Increment</button> </div><p><strong>Что здесь происходит:</strong></p>
31
<ul><li>Создаём обычный HTML-класс <div>, в котором прописываем параграф <p> и кнопку под названием Increment.</li>
31
<ul><li>Создаём обычный HTML-класс <div>, в котором прописываем параграф <p> и кнопку под названием Increment.</li>
32
<li>Когда страница загрузится, HTMX запросит у сервера значение счётчика с помощью атрибута hx-get, а потом подставит его в параграф.</li>
32
<li>Когда страница загрузится, HTMX запросит у сервера значение счётчика с помощью атрибута hx-get, а потом подставит его в параграф.</li>
33
<li>Когда пользователь нажмёт на кнопку, HTMX отправит сигнал об этом серверу с помощью hx-post.</li>
33
<li>Когда пользователь нажмёт на кнопку, HTMX отправит сигнал об этом серверу с помощью hx-post.</li>
34
<li>Сервер увидит сигнал и вернёт клиенту обновлённый HTML всего элемента, который подставится в общую разметку с помощью hx-swap.</li>
34
<li>Сервер увидит сигнал и вернёт клиенту обновлённый HTML всего элемента, который подставится в общую разметку с помощью hx-swap.</li>
35
</ul><p><strong>Разница - есть.</strong>Первое, что бросается в глаза, - количество кода. А ведь в примере с React мы даже не реализовали взаимодействие с сервером - только клиентскую логику. Но главное - в HTMX счётчик обновляется без полной перезагрузки страницы. Основная работа происходит на сервере, а на клиенте остаётся HTML-разметка и элементы HTMX.</p>
35
</ul><p><strong>Разница - есть.</strong>Первое, что бросается в глаза, - количество кода. А ведь в примере с React мы даже не реализовали взаимодействие с сервером - только клиентскую логику. Но главное - в HTMX счётчик обновляется без полной перезагрузки страницы. Основная работа происходит на сервере, а на клиенте остаётся HTML-разметка и элементы HTMX.</p>
36
<p>Ясность и простота HTMX в сравнении с React и другими JS-фреймворками подтверждается не только синтетическими кейсами, но и практикой. В 2022 году на конференции DjangoCon разработчик Давид Гило<a>рассказал</a>, как разработчики компании<a>Contexte</a>перенесли проект, написанный на React с бэкендом на Django, на библиотеку HTMX.</p>
36
<p>Ясность и простота HTMX в сравнении с React и другими JS-фреймворками подтверждается не только синтетическими кейсами, но и практикой. В 2022 году на конференции DjangoCon разработчик Давид Гило<a>рассказал</a>, как разработчики компании<a>Contexte</a>перенесли проект, написанный на React с бэкендом на Django, на библиотеку HTMX.</p>
37
<p>И вот какие результаты это дало:</p>
37
<p>И вот какие результаты это дало:</p>
38
<ul><li>Размер кодовой базы уменьшился на 67%.</li>
38
<ul><li>Размер кодовой базы уменьшился на 67%.</li>
39
<li>Количество JS-зависимостей уменьшилось на 96% - c 255 до 9.</li>
39
<li>Количество JS-зависимостей уменьшилось на 96% - c 255 до 9.</li>
40
<li>Время сборки сайта сократилось на 88% - с 40 секунд до 5.</li>
40
<li>Время сборки сайта сократилось на 88% - с 40 секунд до 5.</li>
41
<li>Скорость первой загрузки страницы выросла на 50-60% - с 2-6 секунд до 1-2.</li>
41
<li>Скорость первой загрузки страницы выросла на 50-60% - с 2-6 секунд до 1-2.</li>
42
<li>Приложение стало обрабатывать гораздо большие объёмы данных, с которыми React просто не справлялся.</li>
42
<li>Приложение стало обрабатывать гораздо большие объёмы данных, с которыми React просто не справлялся.</li>
43
<li>Загруженность памяти снизилась на 46% - с 75 до 40 МБ.</li>
43
<li>Загруженность памяти снизилась на 46% - с 75 до 40 МБ.</li>
44
<li>Качество пользовательского взаимодействия (UX) при этом не пострадало.</li>
44
<li>Качество пользовательского взаимодействия (UX) при этом не пострадало.</li>
45
</ul><p>За HTMX радеют разработчики, которые устали ежедневно ковыряться в сотнях компонентов, оптимизировать запросы и следить за зависимостями и просто хотят наслаждаться аутентичной лёгкостью и надёжностью HTML. В основном это, как ни странно, бэкендеры :)</p>
45
</ul><p>За HTMX радеют разработчики, которые устали ежедневно ковыряться в сотнях компонентов, оптимизировать запросы и следить за зависимостями и просто хотят наслаждаться аутентичной лёгкостью и надёжностью HTML. В основном это, как ни странно, бэкендеры :)</p>
46
<p>"HTMX - это не очередная JS-поделка, снискавшая популярность. HTMX и его аналоги - это протест. Отказ от того, что предлагает индустрия для разработки приложений в браузере. Протест - по определению более сильная вещь, чем хайп, потому что в его основе [лежит] идея".</p>
46
<p>"HTMX - это не очередная JS-поделка, снискавшая популярность. HTMX и его аналоги - это протест. Отказ от того, что предлагает индустрия для разработки приложений в браузере. Протест - по определению более сильная вещь, чем хайп, потому что в его основе [лежит] идея".</p>
47
<p><strong>Иван Гришаев,</strong><strong></strong>IT-инженер,<a>статья в авторском блоге</a></p>
47
<p><strong>Иван Гришаев,</strong><strong></strong>IT-инженер,<a>статья в авторском блоге</a></p>
48
<p>С определениями разобрались - теперь давайте разберём парочку примеров работы HTMX. Как мы помним, смысл этой библиотеки в том, что мы можем использовать возможности современных браузеров напрямую из HTML, минуя JavaScript.</p>
48
<p>С определениями разобрались - теперь давайте разберём парочку примеров работы HTMX. Как мы помним, смысл этой библиотеки в том, что мы можем использовать возможности современных браузеров напрямую из HTML, минуя JavaScript.</p>
49
<p>Например, следующая запись говорит браузеру: когда пользователь кликнет по этой ссылке, сделай HTTP-GET-запрос к /blog и загрузи содержимое ответа в окно браузера.</p>
49
<p>Например, следующая запись говорит браузеру: когда пользователь кликнет по этой ссылке, сделай HTTP-GET-запрос к /blog и загрузи содержимое ответа в окно браузера.</p>
50
<a href="/blog" hx-get="/blog">Blog</a><p>А следующий код говорит браузеру: когда пользователь нажмёт на кнопку, выполни HTTP-POST-запрос по адресу /clicked и используй содержимое ответа для замены элемента с id parent-div в DOM. Это пример того, как HTMX выполняет AJAX-запрос к серверу.</p>
50
<a href="/blog" hx-get="/blog">Blog</a><p>А следующий код говорит браузеру: когда пользователь нажмёт на кнопку, выполни HTTP-POST-запрос по адресу /clicked и используй содержимое ответа для замены элемента с id parent-div в DOM. Это пример того, как HTMX выполняет AJAX-запрос к серверу.</p>
51
<button hx-post="/clicked" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML" > Click Me! </button><p>HTMX существенно расширяет возможности HTML, добавляя новые атрибуты к стандартным HTML-тегам, которые позволяют им выполнять AJAX-запросы и обновлять части страницы без перезагрузки. Она помогает нам добавить на страницу динамику и интерактив без использования скриптов.</p>
51
<button hx-post="/clicked" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML" > Click Me! </button><p>HTMX существенно расширяет возможности HTML, добавляя новые атрибуты к стандартным HTML-тегам, которые позволяют им выполнять AJAX-запросы и обновлять части страницы без перезагрузки. Она помогает нам добавить на страницу динамику и интерактив без использования скриптов.</p>
52
<p><strong>Вот ещё несколько бенефитов.</strong></p>
52
<p><strong>Вот ещё несколько бенефитов.</strong></p>
53
<p>Теперь отправить HTTP-запрос может любой элемент разметки - а не только якоря и формы.</p>
53
<p>Теперь отправить HTTP-запрос может любой элемент разметки - а не только якоря и формы.</p>
54
<p>Теперь вызвать запрос может любое событие - а не только щелчок мышью или отправка формы.</p>
54
<p>Теперь вызвать запрос может любое событие - а не только щелчок мышью или отправка формы.</p>
55
<p>Теперь объектом обновления в запросе может быть любой элемент страницы - а не только всё окно целиком.</p>
55
<p>Теперь объектом обновления в запросе может быть любой элемент страницы - а не только всё окно целиком.</p>
56
<p>При этом сервер отдаёт сразу HTML, а не JSON, как это происходит при работе с JavaScript и основанными на нём фреймворками.</p>
56
<p>При этом сервер отдаёт сразу HTML, а не JSON, как это происходит при работе с JavaScript и основанными на нём фреймворками.</p>
57
<p>Также HTMX легко взаимодействует с CSS. Например, разработчики могут использовать атрибут hx-indicator для отображения лоадера, используя CSS-анимацию.</p>
57
<p>Также HTMX легко взаимодействует с CSS. Например, разработчики могут использовать атрибут hx-indicator для отображения лоадера, используя CSS-анимацию.</p>
58
<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner"> Click to Load </div> <div id="spinner" class="hidden"> Loading... </div><p>Подобный подход фактически опровергает распространённое мнение о том, что для создания динамических веб-приложений необходимо использовать JavaScript, и показывает, что есть и более простой способ создания веб-приложений.</p>
58
<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner"> Click to Load </div> <div id="spinner" class="hidden"> Loading... </div><p>Подобный подход фактически опровергает распространённое мнение о том, что для создания динамических веб-приложений необходимо использовать JavaScript, и показывает, что есть и более простой способ создания веб-приложений.</p>
59
<p>В числе плюсов HTMX можно назвать следующее.</p>
59
<p>В числе плюсов HTMX можно назвать следующее.</p>
60
<p><strong>✅ Независимость от фреймворков или языков.</strong>Благодаря этому библиотеку можно использовать с самыми разными серверными платформами: Node, Django, Phoenix, Laravel и другими.</p>
60
<p><strong>✅ Независимость от фреймворков или языков.</strong>Благодаря этому библиотеку можно использовать с самыми разными серверными платформами: Node, Django, Phoenix, Laravel и другими.</p>
61
<p><strong>✅ Небольшой размер кодовой базы</strong>в сравнении с другими библиотеками и фреймворками, такими как React или Angular.</p>
61
<p><strong>✅ Небольшой размер кодовой базы</strong>в сравнении с другими библиотеками и фреймворками, такими как React или Angular.</p>
62
<p><strong>✅ Простота использования.</strong>Нет необходимости в дополнительных этапах сборки и сложных инструментах вроде Webpack.</p>
62
<p><strong>✅ Простота использования.</strong>Нет необходимости в дополнительных этапах сборки и сложных инструментах вроде Webpack.</p>
63
<p><strong>✅ Экономия ресурсов.</strong>С помощью HTMX вы можете обойтись меньшим количеством разработчиков и инструментов, что снижает затраты на разработку и поддержку.</p>
63
<p><strong>✅ Экономия ресурсов.</strong>С помощью HTMX вы можете обойтись меньшим количеством разработчиков и инструментов, что снижает затраты на разработку и поддержку.</p>
64
<p><strong>✅ Не нужно устанавливать тысячи NPM-пакетов</strong>- инструментов, библиотек и приложений, необходимых для проекта.</p>
64
<p><strong>✅ Не нужно устанавливать тысячи NPM-пакетов</strong>- инструментов, библиотек и приложений, необходимых для проекта.</p>
65
<p><strong>✅ Единая кодовая база.</strong>Так как рендеринг происходит на стороне сервера, больше не нужна отдельная кодовая база для клиента, как в случае с SPA. Мы можем использовать один и тот же код для генерации HTML на сервере и для отображения его на стороне клиента, что значительно упрощает его поддержку.</p>
65
<p><strong>✅ Единая кодовая база.</strong>Так как рендеринг происходит на стороне сервера, больше не нужна отдельная кодовая база для клиента, как в случае с SPA. Мы можем использовать один и тот же код для генерации HTML на сервере и для отображения его на стороне клиента, что значительно упрощает его поддержку.</p>
66
<p><strong>✅ Лёгкая интеграция.</strong>HTMX изначально предназначен для взаимодействия с разными серверными технологиями, поэтому во многих случаях будет работать "из коробки". Тогда как фреймворки и библиотеки вроде React нередко требуют дополнительной настройки, особенно если проект построен не только в экосистеме JavaScript.</p>
66
<p><strong>✅ Лёгкая интеграция.</strong>HTMX изначально предназначен для взаимодействия с разными серверными технологиями, поэтому во многих случаях будет работать "из коробки". Тогда как фреймворки и библиотеки вроде React нередко требуют дополнительной настройки, особенно если проект построен не только в экосистеме JavaScript.</p>
67
<p>"Самое большое преимущество, которое я вижу в HTMX, - это минимальный объём JavaScript, который мы пишем или посылаем браузеру. Фактически можно создавать насыщенные интерактивные веб-приложения, используя только HTMX, без написания кода для стороны клиента".</p>
67
<p>"Самое большое преимущество, которое я вижу в HTMX, - это минимальный объём JavaScript, который мы пишем или посылаем браузеру. Фактически можно создавать насыщенные интерактивные веб-приложения, используя только HTMX, без написания кода для стороны клиента".</p>
68
<p><strong>Раджасегар Чандран</strong>, фронтенд-архитектор в Freshworks,<a>HTMX and HTML Driven Development</a></p>
68
<p><strong>Раджасегар Чандран</strong>, фронтенд-архитектор в Freshworks,<a>HTMX and HTML Driven Development</a></p>
69
<p>Парадокс: хотя HTMX изначально разрабатывалась для упрощения разработки, её применение связано с целым ворохом сложностей.</p>
69
<p>Парадокс: хотя HTMX изначально разрабатывалась для упрощения разработки, её применение связано с целым ворохом сложностей.</p>
70
<p><strong>❌ Сложная серверная логика.</strong>Теперь все сценарии взаимодействия с пользователем придётся прописывать прямо в бэкенде. Например, если раньше в ответ на нажатие кнопки репоста мы просто отдавали в браузер JSON с какими-то данными, то теперь придётся подробно прописывать, какие анимации при этом сработают, какие опции появятся у клиента и так далее.</p>
70
<p><strong>❌ Сложная серверная логика.</strong>Теперь все сценарии взаимодействия с пользователем придётся прописывать прямо в бэкенде. Например, если раньше в ответ на нажатие кнопки репоста мы просто отдавали в браузер JSON с какими-то данными, то теперь придётся подробно прописывать, какие анимации при этом сработают, какие опции появятся у клиента и так далее.</p>
71
<p><strong>❌ Сложности с динамическими страницами.</strong>HTMX не подойдёт для динамиеских приложений вроде онлайн-игр или карт, где состояние постоянно меняется. В этом случае фреймворки подойдут лучше, поскольку они позволяют не так часто обмениваться данными с сервером.</p>
71
<p><strong>❌ Сложности с динамическими страницами.</strong>HTMX не подойдёт для динамиеских приложений вроде онлайн-игр или карт, где состояние постоянно меняется. В этом случае фреймворки подойдут лучше, поскольку они позволяют не так часто обмениваться данными с сервером.</p>
72
<p><strong>❌ Сложности в изучении.</strong>Новая технология - новые знания. Хотя HTMX и упрощает процесс разработки, для её эффективного применения нужно детально изучить соответствующие атрибуты, методы и подходы. Плюс ко всему, как мы выяснили, HTMX требует хорошего понимания работы бэкенда.</p>
72
<p><strong>❌ Сложности в изучении.</strong>Новая технология - новые знания. Хотя HTMX и упрощает процесс разработки, для её эффективного применения нужно детально изучить соответствующие атрибуты, методы и подходы. Плюс ко всему, как мы выяснили, HTMX требует хорошего понимания работы бэкенда.</p>
73
<p>Давайте коротко расскажем про основные случаи, в которых использовать HTMX будет уместно уже сегодня:</p>
73
<p>Давайте коротко расскажем про основные случаи, в которых использовать HTMX будет уместно уже сегодня:</p>
74
<p><strong>Маленькие проекты.</strong>HTMX - это легковесная библиотека, которая может быть отличным выбором для небольших проектов, требующих динамической интерактивности без расходов на полноценный фронтенд-фреймворк. Если же у вас масштабное приложение с частыми обновлениями, то лучше подойдёт тот же React с виртуальным DOM.</p>
74
<p><strong>Маленькие проекты.</strong>HTMX - это легковесная библиотека, которая может быть отличным выбором для небольших проектов, требующих динамической интерактивности без расходов на полноценный фронтенд-фреймворк. Если же у вас масштабное приложение с частыми обновлениями, то лучше подойдёт тот же React с виртуальным DOM.</p>
75
<p><strong>Простое взаимодействие с сервером.</strong>Если вам нужна простая отправка форм и AJAX-запросы, без необходимости в сложном управлении состоянием, обновлений в реальном времени и оптимизации рендеринга, то HTMX - хороший вариант.</p>
75
<p><strong>Простое взаимодействие с сервером.</strong>Если вам нужна простая отправка форм и AJAX-запросы, без необходимости в сложном управлении состоянием, обновлений в реальном времени и оптимизации рендеринга, то HTMX - хороший вариант.</p>
76
<p><strong>Отключённый JavaScript.</strong>Если вы хотите убедиться, что сайт будет доступен и не потеряет часть функциональности даже для пользователей с отключённым JavaScript.</p>
76
<p><strong>Отключённый JavaScript.</strong>Если вы хотите убедиться, что сайт будет доступен и не потеряет часть функциональности даже для пользователей с отключённым JavaScript.</p>
77
<p><strong>Минимум JavaScript</strong>,<strong>или "мечта бэкендера".</strong>HTMX прекрасно подойдёт для бэкендеров, которые хотят добавить интерактивности в свой проект, не прибегая к JavaScript и не погружаясь в пучины фреймворков.</p>
77
<p><strong>Минимум JavaScript</strong>,<strong>или "мечта бэкендера".</strong>HTMX прекрасно подойдёт для бэкендеров, которые хотят добавить интерактивности в свой проект, не прибегая к JavaScript и не погружаясь в пучины фреймворков.</p>
78
<p>Если же вам нужно масштабное комплексное решение с поддержкой сообщества, со сложными пользовательскими интерфейсами и обновлениями в реальном времени, то React, Vue или Angular подойдут лучше.</p>
78
<p>Если же вам нужно масштабное комплексное решение с поддержкой сообщества, со сложными пользовательскими интерфейсами и обновлениями в реальном времени, то React, Vue или Angular подойдут лучше.</p>
79
<p>Популярность HTMX постепенно растёт, но в основном среди профессиональных разработчиков. Если же вы джун, изучающий технологии фронтенда и желающий побыстрее найти работу, то вот совет от автора HTMX.</p>
79
<p>Популярность HTMX постепенно растёт, но в основном среди профессиональных разработчиков. Если же вы джун, изучающий технологии фронтенда и желающий побыстрее найти работу, то вот совет от автора HTMX.</p>
80
<p>"Реальность такова, что сегодня React является стандартом. Как бы мне ни нравился HTMX, если бы кто-то пришёл ко мне и сказал: "Эй, я ничего не знаю о программировании, и мне нужна работа на фронтенде. Что мне изучать?“, я бы сказал ему: "Учи React“. Потому что если вы зайдёте на сайт indeed.com и зададите в поиске "React“, то в вашем регионе будет 30 тысяч вакансий. Если вы введёте в поиск "HTMX“, то их будет ноль. Я думаю, что ставить на React гораздо более безопасно, чем на что-то вроде HTMX".</p>
80
<p>"Реальность такова, что сегодня React является стандартом. Как бы мне ни нравился HTMX, если бы кто-то пришёл ко мне и сказал: "Эй, я ничего не знаю о программировании, и мне нужна работа на фронтенде. Что мне изучать?“, я бы сказал ему: "Учи React“. Потому что если вы зайдёте на сайт indeed.com и зададите в поиске "React“, то в вашем регионе будет 30 тысяч вакансий. Если вы введёте в поиск "HTMX“, то их будет ноль. Я думаю, что ставить на React гораздо более безопасно, чем на что-то вроде HTMX".</p>
81
<p><strong>Карсон Гросс</strong>, создатель HTMX,<a>Go Time - Episode #266</a></p>
81
<p><strong>Карсон Гросс</strong>, создатель HTMX,<a>Go Time - Episode #266</a></p>
82
<p>Если вы всё же решитесь, то на <a>официальном сайте</a>есть всё, что нужно для старта.</p>
82
<p>Если вы всё же решитесь, то на <a>официальном сайте</a>есть всё, что нужно для старта.</p>
83
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
83
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>