О проекте
sitelo начинался не как фреймворк. Он начался с желания писать разметку так, чтобы это было естественно в JavaScript, — и разрастался, пока не покрыл весь путь от файла страницы до опубликованного сайта.
javascript-to-html
Сначала появился javascript-to-html (он же ht.js): простой и понятный способ генерировать HTML в JavaScript, без сложных шаблонизаторов и фреймворков.
При том, насколько повсеместными стали полноценные фреймворки вроде React, найти простое решение для шаблонов, не тянущее за собой всё подряд, оказалось на удивление сложно. Сосредоточившись только на превращении JavaScript в HTML — по сути, на функциях, возвращающих строки, — ht.js остаётся лёгким, удобным, гибким и расширяемым.
Такая небольшая поверхность позволяет применять его во многих местах: прямо во фронтенде (как в SPA), в сборке для создания статических сайтов (SSG) или даже для серверного рендеринга (SSR).
Как научить Vite отдавать HTML
Это решило вопрос написания. Следующей задачей была сборка: Vite считает .js / .ts скриптами, а не страницами. Требовалось соглашение, по которому определённые модули предназначены стать HTML.
Идея была прямолинейной: файлы с именами вида *.ht.js, *.html.js, *.ht.ts и им подобные должны превращаться в HTML, а не собираться как клиентский JavaScript. Это соглашение и стало vite-plugin-html-pages — файловая маршрутизация, загрузка данных, ресурсы и статическая генерация поверх Vite.
sitelo
sitelo объединяет Vite и этот плагин в одну установку и один CLI. Вы получаете цельный, отлично собранный опыт разработки: sitelo для живого сервера, sitelo build для продакшна, разумные значения по умолчанию и модель страниц из плагина — без необходимости собирать цепочку инструментов самостоятельно.
Одна и та же идея сверху донизу: страницы — это модули, возвращающие HTML. sitelo — тот слой, который делает эту идею завершённой.
Компоненты и серверные острова
Функции, возвращающие HTML, как оказалось, складываются до самого верха. sitelo-ui — библиотека компонентов, устроенная так же: кнопки, карточки, формы, таблицы, модальные окна и секции страниц, и каждый из них — функция, возвращающая строку. Ни компилятора, ни рантайма, ни гидратации: что вы собрали, то и попадает в dist/.
Но не каждая часть страницы может быть статической. Серверные острова оставляют страницу статической и рендерят на сервере, в момент просмотра, только те части, которым нужны свежие данные на каждый запрос, — комментарии под закэшированным постом, наличие товара на странице продукта. Остров — снова функция, возвращающая HTML: сборка отдаёт его запасную разметку, а крошечный загрузчик подменяет её отрендеренным фрагментом.
Ни то ни другое не меняет модель. Клиентского фреймворка по-прежнему нет — только HTML из функций, во время сборки или во время запроса.
Сравнение
Хороших инструментов для публикации статических сайтов и без того хватает. Ниша sitelo намеренно узкая: функции на JavaScript (или TypeScript), возвращающие HTML, с опытом разработки от Vite и с минимумом фреймворка.
| Инструмент | Модель | Берите, когда |
|---|---|---|
| sitelo | Функции JS/TS → HTML поверх Vite, плюс компоненты и серверные острова | вам нужен HTML из JavaScript с настоящим рабочим процессом Vite — с компонентами и частями, которые рендерятся на каждый запрос, но без клиентского фреймворка и гидратации |
| Astro | Компоненты фреймворков + клиентские и серверные острова, свой компилятор | вы хотите гидратировать в браузере компоненты React, Vue или Svelte и пользоваться экосистемой побольше |
| Next.js | Полноценное React-приложение (SSR / SSG / ISR) | вы строите приложение в экосистеме React |
| Hugo | Шаблоны Go, очень быстрые сборки | у вас огромный контентный сайт и вам комфортно в инструментарии Go |
| Eleventy | Шаблонизаторы → HTML | вам нужны гибкие шаблоны (Nunjucks, Liquid, …) без SPA-фреймворка |
Если вам нужны клиентские компоненты и гидратация — берите фреймворк. Если нужен HTML из функций JavaScript с опытом Vite — вместе с компонентами и частями, отрендеренными на сервере, — sitelo самый маленький инструмент, который делает всю работу целиком.