Отрисовка на сервере и на клиенте
Сервер отдаёт готовый HTML, который находят поисковые системы, а клиентский код оживляет разметку и дальше обновляет страницы без перезагрузки.
Продукт
pastish2
Свой веб-фреймворк: серверная отрисовка, живые интерфейсы и один файл на выходе
Внедрено
Задача
С чем пришли
Задача заказчика и то, что мешало решить её раньше.
Готовые фронтенд-фреймворки задают свою архитектуру: серверную отрисовку приходится пристраивать сбоку, мультитенантность собирать из обходных путей, а оформление расползается по разметке. Нужна была основа, которая решает это по умолчанию.
Механики
Что внутри
Механики, из которых собран продукт.
Мультитенантность из коробки
Один код и разные бренды: механизм оверлеев позволяет вести нескольких заказчиков в одном репозитории.
Оформление в одном месте
Стили описываются объектами с токенами темы, поэтому цвета и типографика живут в одном файле, а не расползаются по разметке.
Свой сервер на uWebSockets
Серверная часть работает на высокопроизводительном HTTP-сервере, а WebSocket встроен во фреймворк, а не приделан сбоку.
Один файл на выходе
Сборка даёт исполняемый файл: развёртывание сводится к копированию, а подготавливать окружение на сервере не требуется.
Конвейер
Путь одного запроса
От адреса в браузере до готовой страницы и её оживления на клиенте. Промежуточной сборки между шагами нет.
-
01
Маршрут
Дерево маршрутов объявлено в манифесте регулярными выражениями. Срабатывает первое совпадение: оно определяет страницу и её параметры.
-
02
Серверная функция
Функция страницы получает контекст, параметры маршрута и строку запроса, читает контент и возвращает данные для шаблона.
-
03
Общая рамка
Раньше страницы выполняется серверная функция layout: шапка, подвал, тема и язык. Страница получает уже готовое окружение.
-
04
Шаблон из блоков
Разметка описана в файлах .fr. Страница собирается из блоков, и у каждого блока своя папка: шаблон, логика и стили лежат рядом.
-
05
Стили
Стили: объекты с токенами темы. Сборщик выдаёт каждому классу свой хеш, склеивает всё в один файл и отбрасывает правила, которых нет в разметке.
-
06
Готовая страница
Сервер отдаёт полностью собранный HTML: его читают поисковые системы, и он открывается даже там, где не выполняется JavaScript.
-
07
Оживление на клиенте
Клиентский рантайм находит блоки по разметке и навешивает обработчики. Дальше переходы идут без перезагрузки, а данные приходят по HTTP или WebSocket.
Место в стеке
Место в стеке
pastish2: веб-слой между серверной платформой и продуктами.
Odin
Серверная платформа
Сервисы, события, хранилища, маршрутизация запросов. Отвечает за данные и вычисления.
pastish2
Веб-слой
Маршруты, страницы, блоки, шаблоны, стили и клиентский рантайм. Отвечает за то, что видит человек.
Продукты
Что работает на нём
Этот сайт, платформа онлайн-обучения Udeu, «Амбиции», бэк-офис колл-центра RC Club.
Результат
Что это даёт
Не свойства ради свойств, а следствия для продукта и команды.
Страница работает без JavaScript
Сервер отдаёт готовый HTML: его видят поисковые системы, он открывается на слабом устройстве и не пропадает, если скрипт не загрузился.
Нет зависимости от чужих релизов
Основа своя: нужную возможность добавляют в фреймворк, а не ждут обновления библиотеки и не обходят её ограничения.
Новая страница: небольшая правка
Блок: папка из трёх файлов, страница: функция на сервере и шаблон. Маршрут объявляется строкой в манифесте.
Оформление не расползается
Цвета и типографика описаны токенами темы. Смена оформления: это другой набор токенов, а не правка разметки.
Несколько брендов из одного репозитория
Механизм оверлеев собирает разные сайты из общей основы: так Udeu и «Амбиции» делят один код.
Обновление сводится к копированию
Сборка даёт один исполняемый файл. Развёртывание не требует подготавливать окружение на сервере.
Технологии
На чём построено
Платформа, стек и площадки, на которых работает продукт.
Технологии
- SSR и CSR
- uWebSockets
- Оверлеи сайтов
- Сборка в один файл
Платформы
- Node.js
- Bun
- Web
Ссылки
Где посмотреть
Сайт продукта и материалы о нём.
Живое демо
Демо-доступ предоставляется по запросу.
Нужен такой продукт под ваш бренд?
Развернём white-label, настроим процессы и подключим вашу команду.