В современном мире веб-разработка постоянно эволюционирует, подталкиваемая требованиями к скорости, удобству и функциональности. Разработчики сталкиваются с выбором между двумя кардинально разными подходами – созданиями тяжелых одностраничных приложений (SPA), которые обеспечивают богатую интерактивность, но при этом зачастую страдают от громоздких JavaScript-бандлов и высокой сложности, и традиционных многостраничных приложений (MPA), обладающих высокой скоростью загрузки и надежностью, но ограниченных в плане динамических возможностей. Однако существует третий, более продуманный путь, который объединяет достоинства обоих миров. Этот путь основывается на интеграции трех специфических технологий: Eta, HTMX и Lit, каждая из которых решает определенный набор задач и вместе формирует уникальную Fullstack-архитектуру, способную обеспечить высокопроизводительное, простое и интерактивное приложение. Первый важнейший компонент нашей архитектуры — Eta, минималистичный серверный шаблонизатор, написанный на JavaScript.
Он предназначен для генерации HTML на сервере, что гарантирует быструю первичную загрузку страниц и минимизирует объем кода, который приходится обрабатывать стороне клиента. Eta выгодно отличается от громоздких фреймворков своей простотой и скоростью, позволяя создавать читаемые и элегантные шаблоны, которые легко интегрируются в бэкенд на NestJS. Сервер-сайд рендеринг с Eta обеспечивает пользователю мгновенное отображение полноценного HTML-контента, снижая тем самым время до первого отображения содержимого и уменьшая необходимый для загрузки JavaScript. Второй ключевой элемент — HTMX, инструмент для динамичного поведения страниц, который позволяет оставаться близко к традиционной модели сервера, но добавляя возможности интерактивности без написания громоздкого клиентского JavaScript. С помощью HTMX можно просто и декларативно усилить HTML посредством атрибутов, таких как hx-post, hx-target или hx-swap, которые при взаимодействии пользователя инициируют отправку запросов на сервер, получение и подмену части контента.
В итоге это даёт эффект динамичности без полного обновления страницы, позволяя выполнять задачи, связанные с фильтрацией списков, отправкой форм и обновлением содержимого, оставаясь при этом в рамках более легковесного и прозрачного кода. Этот подход кардинально снижает объем передач JavaScript на клиентскую сторону и повышает устойчивость приложения. Третья технология — Lit — решает задачи сложной, локальной интерактивности, которую не так просто реализовать только средствами HTMX. Lit — это современный фреймворк для создания веб-компонентов, легковесных, модульных элементов с собственным внутренним состоянием и логикой. Наш пример — компонент пагинации, встроенный в Eta-шаблон, который отображает текущую страницу, общее количество элементов и элементы управления навигацией.
Lit позволяет легко обновлять внутреннее состояние компонента, управлять событиями и перекомпоновывать его UI без отправки лишних запросов. Важным аспектом является гармоничная интеграция Lit и HTMX: кнопки страниц пагинации оснащены HTMX-атрибутами, которые отправляют запросы к серверу, получают и подменяют новые данные в основной части страницы. Этот «островок» интерактивности на клиенте, построенный на Lit, взаимодействует с серверной логикой через HTMX, обеспечивая баланс между клиентской и серверной загрузкой. Помимо основных технологий, архитектура использует современный API View Transitions, который позволяет создавать плавные анимации при смене содержимого, улучшая визуальное восприятие и «ощущение» скорости приложения. HTMX поддерживает этот API родным образом, автоматически оборачивая обновления DOM в транзакции с анимацией.
При необходимости можно отключать анимации для мелких или частых обновлений, чтобы избежать излишней нагрузки на восприятие пользователя. Такой баланс делает приложение не только быстрым, но и по-настоящему комфортным для пользователя. Объединение Eta, HTMX и Lit позволяет создать архитектуру, максимально ориентированную на производительность и удобство разработки. Eta обеспечивает основу — быстрый и простой рендеринг HTML на сервере. HTMX творит большую часть работы с динамичным обновлением контента, минимизируя необходимость в тяжелом клиентском коде.
Lit дополняет их там, где необходима сложная интерактивность, создавая «островки» современного фронтенда, которые легко масштабируются и поддерживаются. Такой подход снижает количество загружаемого JavaScript до минимально возможного, что положительно отражается на скорости загрузки и стабильности работы, особенно заметно на мобильных устройствах и в медленных сетях. Кроме того, архитектура упрощает поддержку и развитие проекта, позволяя сконцентрироваться на бизнес-логике сервера и минимально вмешиваться в клиентскую часть, оставляя большую часть интерактивности делегированной проверенным средствам. Этот стиль разработки отличается от классических SPA не только техническими преимуществами, но и философией — переходом от монолитного фронтенд-кода к изящному гибриду, где каждая технология выполняет именно ту задачу, для которой она оптимизирована. Также стоит отметить, что подобный стек идеально подходит для современных требований SEO, так как полное серверное рендеринг и быстрая отдача контента делают сайт полностью доступным и легко индексируемым поисковыми роботами.
В итоге совмещение Eta, HTMX и Lit — это не просто набор инструментов, а целостный подход к созданию веб-приложений нового поколения, которые не вынуждают выбирать между производительностью и богатым пользовательским опытом, но предоставляют возможность иметь оба эти качества одновременно. Такой подход уже доказал свою эффективность в реальных проектах, где снижен общий размер клиентского кода в несколько раз по сравнению с React-ориентированными решениями, что напрямую ведет к улучшению UX, снижению расхода трафика и более высокой устойчивости к ошибкам. В современном темпе развития технологий и растущих ожиданиях пользователей подобная архитектура имеет все шансы стать стандартом разработки веб-приложений, предлагая удобство простого MPA вместе с интерактивностью SPA, подкрепленное мощью легковесных и гибких технологий, адаптированных под реальные сценарии использования и возможности современных браузеров.
