Карсон Гросс, создатель HTMX

Карсон Гросс (Carson Gross) — профессор информатики из Монтаны, который неожиданно стал одним из самых ярких персонажей в индустрии веб-программирования последних лет. Он автор языка HyperScript и популярной библиотеки для фронтенда HTMX, позволяющей создавать сложные интерактивные сайты средствами HTML. Красивая альтернатива клиентскому рендерингу на JavaScript решает сразу несколько проблем современного веба, связанных с избыточной сложностью разработки и поддержки, производительностью и ожирением сайтов.

Создавать сайты очень просто, тот же Хабр написал один программист, а не команда из сотен разработчиков и девопсов, как сейчас принято нанимать в интернет-компании.

Многие веб-разработчики нашего времени выросли со знанием только одностраничных приложений SPA и фреймворков для них. Они начали свои карьеры с приложений на React.js, которые общаются с сервером Node через JSON API. Это настоящая трагедия, считает Гросс. Интерактивные приложения можно делать совершенно иначе.

Кроме прочих заслуг, Гросс известен как автор публиковавшегося на Хабре рассказа «Разработчик с мозгом груга», который передаёт мысли программиста с максимально простым и эффективным мышлением. Более того, в рассказе есть ответы практически на все основные вопросы, с которыми сталкивается программист в своей работе. Груг даёт хорошие советы. Сам автор говорит, что литературное произведение рассчитано скорее на молодое поколение разработчиков. Это и понятно, ведь он преподаватель по основной работе.

▍ Преподаватель информатики

Карсон Гросс закончил бакалавриат Калифорнийского университета в Беркли в области промышленной инженерии (1994−1999) и магистратуру Стэнфорда по компьютерным наукам (2004−2005). Начинал карьеру как разработчик в Guidewire Software (2006−2012), затем выступил сооснователем и техническим директором успешного стартапа LeadDyno (2012−2020), после чего ушёл в преподавательскую деятельность.

Он действующий профессор Университета штата Монтана, сейчас ведёт там два курса: по компиляторам и компьютерным системам. Раньше читал ещё курс по СУБД. На странице преподавателя отмечено, что три последних года он получал награду «Профессор года» по результатам голосования студентов. Ему нравится учить студентов, несмотря на низкую оплату труда и бюрократию вузов.

Также Гросс является консультантом организации Big Sky Software и соавтором книги «Гипермедийные системы» (Hypermedia Systems), которую можно бесплатно читать в онлайне. Эта книга во многом объясняет, как автор вообще пришёл к концепции HTMX.

▍ Гипермедийные системы

Автор определяет гипермедийную систему как «систему, которая придерживается сетевой архитектуры RESTful в первоначальном понимании этого термина Филдингом».

Рой Филдинг (Roy Thomas Fielding) — американский инженер, один из основных авторов спецификации HTTP и родоначальник архитектурного стиля Representational State Transfer (REST). В своей докторской диссертации он описал REST как сетевую архитектуру и противопоставил её более ранним подходам к созданию распределённого программного обеспечения. На тот момент Всемирная паутина представляла собой просто веб-браузеры, обменивающиеся гипермедиа. Эта система — с её простыми ссылками и формами — и была тем, что Филдинг называл RESTful:

К сожалению, сегодня термин REST больше ассоциируется с JSON API, поскольку именно в этом значении он обычно используется в разработке. «Это неправильное использование термина REST, — считает Карсон Гросс, — потому что JSON не является естественным гипермедиа из-за отсутствия элементов управления гипермедиа. Обмен гипермедиа — явное требование для того, чтобы система считалась RESTful».

Таким образом, если под REST подразумевать JSON, то это просто некорректное использование термина REST.

В своей книге Гросс рассматривает гипермедиа как системную архитектуру, а затем несколько практических современных подходов к созданию веб-приложений на её основе. Приложения, построенные в этом стиле, он называет Hypermedia-Driven Applications, или HDA, в противоположность популярному сегодня стилю Single Page Application (SPA).

Hypermedia-Driven Application — это приложение, построенное на основе гипермедийной системы, которое уважает и использует гипермедийную функциональность этой базовой системы. В каком-то смысле, это возвращение веба к истокам, только на новом технологическом стеке. В книге «Гипермедийные системы» не только описывается теория, но предлагаются инструменты и язык, чтобы воплотить эту замечательную идею в реальных веб-приложениях.

И здесь мы подходим к принципам HTMX, ведь эта библиотека — основной и самый известный инструмент в арсенале разработчика гипермедийных систем.

▍ Hyperscript и HTMX

HTMX — это JS-библиотека, которая позволяет добавлять к ссылкам и формам в стандартном HTML атрибуты, очень похожие по духу на атрибуты href и action. Используя эти атрибуты, можно вызывать AJAX-запросы, а затем заменять части DOM на HTML, которым отвечает сервер. Таким образом, HTMX расширяет инструментарий старого доброго HTML, добавляя в него интерактивность, чтобы охватить некоторые современные варианты использования, в частности AJAX. Теперь любому элементу на странице можно отправить HTTP-запрос в ответ на событие, а затем поместить этот ответ в любое место DOM.

Всё это звучит довольно просто, и так оно и есть. Но столь простая модернизация HTML открывает целый ряд новых вариантов интерактивного UX, который традиционно считался вотчиной JavaScript. Три года HTMX развивался без широкой огласки, но прошлым летом его приняли в Github Accelerator, что придало проекту известность.

Для понимания проще всего посмотреть на демо, где можно редактировать код и посмотреть результат. Здесь мы нажимаем на кнопку для редактирования полей на объекте пользователя. Данные передаются запросом PUT на конечную точку бэкенда. Обратите внимание на сетевое взаимодействие в нижнем фрейме после нажатия кнопки Show.

Обычно для такого редактирования требуется JavaScript, независимо от фреймворка. Но HTMX превращает взаимодействие в два куска разметки: один для отображения UI и один для редактирования UI, как показано в листинге:

<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
<!-- The edit: -->
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

Если посмотреть на листинг, то легко понять, что происходит: свойство hx-swap предоставляет HTML для div до его редактирования, а outerHTML сообщает фреймворку, как он связан с динамическим содержимым внутри. Редактируемая версия поступает в виде элемента формы, содержащего свойство x-put, которое определяет HTML-метод PUT и конечную точку, которую нужно использовать.

Для такой «подмены» HTMX производит рендеринг HTML на стороне сервера для редактирования разметки. За кулисами по-прежнему работает JavaScript. По сути, мы получаем более детализированный синтаксис HTML, который может загружать только сегменты, а не целые страницы, и может отправлять Ajax-запросы.

Гипермедийная архитектура даже в оригинальной форме веба 1.0 имеет ряд преимуществ перед подходом типа SPA + JSON + Data API. Три основных преимущества:

• Это чрезвычайно простой подход к созданию веб-приложений.
• Он чрезвычайно терпим к изменениям контента и API.
• Он использует проверенные и верные возможности веб-браузеров, такие как кэширование.

В частности, первые два преимущества решают основные проблемы современной веб-разработки:

• Инфраструктура одностраничных приложений стала чрезвычайно сложной, для управления зачастую требуется целая команда.
• Постоянные изменения, которые требуется вносить в JSON API в процессе поддержки приложений.

Сочетание этих, а также других проблем, таких как постоянная смена JS-библиотек, привело к появлению явления, известного как усталость от JavaScript. Это общее чувство усталости от всех препятствий, которые нужно преодолеть, чтобы добиться чего-либо в современных веб-приложениях.

Карсон Гросс уверен, что гипермедийная архитектура и HTMX помогут вылечить эту усталость для многих разработчиков и команд.

Язык программирования Hyperscript в определённом смысле «конкурирует» с JavaScript на фронтенде. Он основан на HyperTalk, скриптовом языке для визуальной среды программирования Apple HyperCard. Она была первой получившей широкую популярность гипертекстовой средой, получившей распространение ещё до того, как появилась Всемирная паутина.

Установка Hyperscript на сервере:

<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>

Пример кода для изменения цвета кнопки при длительном нажатии:

on pointerdown
  repeat until event pointerup
    set rand to Math.random() * 360
    transition
      *background-color
      to `hsl($rand 100% 90%)`
      over 250ms
  end

У Hyperscript есть некоторые особенности, которую упрощают жизнь автору скриптов. Например, Hyperscript в рантайме автоматически разрешает встречающиеся промисы, так что разработчикам не нужно с ними возиться. Что касается его реализации, то Hyperscript реализован на JavaScript в части лексера, парсера и рантайма на основе eval.

У Hyperscript естественный синтаксис, который некоторые любят, а многие ненавидят, говорит Карсон Гросс. Он очень увлечён этим проектом и намерен выпустить Hyperscript до версии 1.0 уже в 2024 году, после выхода HTMX 2.

Конечно, индустрия не откажется от JavaScript. Хотя это не самый лучший язык общего назначения, но у него есть главное — поддержка браузеров. И это делает JavaScript главным скриптовым языком для веба в обозримом будущем.

Если посмотреть на все проекты Карсона Гросса, то их объединяет одно: они направлены на решение главной проблемы современной разработки — избыточной сложности.

«Разработка ПО — жестокая индустрия, и если показать слабость в интеллектуальном плане, это может сильно повредить карьере. От всех нас ожидают демонстрацию высокого интеллекта. Поэтому людям трудно признать, что чужой код запутан или кажется слишком сложным. Во многих кругах „сложный“ считается похвалой, а „тупой“ — критикой», — Карсон Гросс о парадоксах современного программирования.