В этой статье рассматривается новый подход к созданию одностраничного приложения (SPA) - HTML через WebSockets.
Что это такое?
Традиционный способ создания одностраничного приложения (SPA) заключается в разделении обязанностей между back- и front-end:
- back-end предоставляет информацию через JSON RESTful API
- front-end получает данные с back-end асинхронно через вызовы API.
К сожалению, такая схема является дорогостоящей, требует двух специализированных профилей разработчиков и замедляет циклы релизов, поскольку необходимо разрабатывать и поддерживать два разных приложения (часто на двух разных языках). Это также затрудняет быстрое создание прототипов и SEO. Эта модель доминирует с начала 2010-х годов. Это цена, которую нам пришлось заплатить за то, чтобы веб-приложения выглядели и ощущались как настольные. Однако ситуация начинает меняться, поскольку многие команды признают, что преимущества не перевешивают затраты, и экспериментируют с новыми паттернами для создания SPA. Одна из моделей, которая начинает набирать обороты, - это передача HTML вместо JSON через WebSocket.
Как это работает?
Крис Маккорд, создатель Phoenix (самого популярного фреймворка в экосистеме Elixir), представил на ElixirConf 2019 технологию под названием LiveView, которая передает HTML через WebSockets. Вскоре после этого он продемонстрировал, как создать клон Twitter в реальном времени всего за 15 минут с помощью LiveView без использования клиентского JavaScript-фреймворка, такого как React, Angular или Vue. Он показал, что можно создать элегантный пользовательский интерфейс в реальном времени, не имея внутреннего фреймворка. Это вдохновило других разработчиков на создание собственных реализаций с использованием других языков и веб-фреймворков.
Решение МакКорда заключается в том, чтобы передавать HTML на front-end вместо JSON через WebSockets. Такой подход не только упрощает разработку, но и дает хороший прирост производительности, поскольку логика рендеринга обрабатывается бэкендом, а фронтенду не нужно делать новые HTTP-запросы для получения новых данных.
Традиционный подход
При таком подходе браузер начинает работу с HTTP-запроса от внешнего интерфейса для получения JSON-ответа с необработанная, предварительно подготовленная информация. Затем внешний модуль отвечает за обработку информации и создание соответствующего HTML.
Подход HTML через WebSockets
При таком подходе браузер или сервер может начать работу, поскольку WebSockets обеспечивает двунаправленную связь.
Пример
Давайте рассмотрим быстрый пример отображения статьи из блога.
- Соединение: Мы начинаем с соединения. WebSockets обеспечивает двунаправленную связь между клиентом и сервером, которую достаточно установить один раз.
- Запрос компонента: Клиент запрашивает содержимое определенной статьи, связанной с маршрутом /article/2.
- Внутренняя логика: Сервер генерирует соответствующие HTML, CSS и JavaScript для шаблона, используя систему шаблонов (например, Jinja), и возвращает фрагмент шаблона через канал WebSocket.
- Обновление DOM: Наконец, внешний модуль обновляет DOM с помощью фрагмента шаблона для отображения статьи блога.
Преимущества и недостатки
Преимущества:
- Рендеринг/обработка HTML происходит исключительно на внутреннем сервере
- В режиме реального времени
- Протокол WebSockets быстрее, чем HTTP
- Работает с медленными соединениями
- Создайте SPA, почти не используя JavaScript
- Простое SEO
Недостатки:
- Серверу требуется больше ресурсов, так как вы должны оставлять открытым WebSocket для каждого клиента
- Зарождающаяся экосистема - мало фреймворков, учебников и документации.
Ресурсы
Вы можете начать со следующих ресурсов:
- Будущее веб-программного обеспечения - HTML-over-WebSockets
- Phoenix LiveView
- Hotwire - создание современных веб-приложений путем передачи HTML по проводам
- Reactor - библиотека LiveView для Django
- Sockpuppet - создание реактивных приложений с помощью инструментария Django, который вы уже знаете и любите.
- Action Cable - бесшовная интеграция WebSockets с остальной частью вашего приложения на Ruby и Rails
- AnyCable - создание молниеносных, надежных приложений реального времени с помощью Ruby и Rails.
Заключение
Хотя этот подход еще очень новый, он заслуживает внимания. Его популярность растет, и каждый месяц появляется все больше инструментов и примеров. От себя добавлю, что меня удивляет, насколько малоизвестным кажется этот подход. Думаю, это связано с тем, насколько мощной является экосистема JavaScript.
