$mol Getting started

Что такое $mol

$mol это фронтенд-фреймворк на TypeScript с декларативной вёрсткой через view.tree и pull-реактивностью: ты описываешь зависимости значений, он сам их тречит и пересчитывает только нужное. Виртуализация списков, типизированный CSS-in-TS и тесты без DOM едут из коробки. Живёт в монорепо MAM, где в бандл попадает только то, что реально используется в коде ( отсюда и ~140 KB на всё приложение ).

По совокупности технических характеристик в мире фронта ничего лучше пока нет: компонент это JS-объект, а не DOM-нода ( в ~10 раз меньше памяти на тысячу элементов ), pull-реактивность вместо ручных подписок ( меньше кода, меньше багов ), реальное наследование вьюх и стилей вместо копипасты шаблонов, виртуализация и поиск по полным данным включены by default. Цифры, бенчи и сравнение с Lit/Symbiote разобраны в соседней статье про вебкомпоненты.

Оффлайн тут это PWA. Приложение ставится на телефон или десктоп как обычная иконка и продолжает работать без сети: Service Worker кладёт ассеты локально, состояние хранится на устройстве и синкается между устройствами через CRDT, без твоего бэка. Удобно в метро, в самолёте и в принципе не зависеть от чужого аптайма.

Приложения, которые работают офлайн, синхронизируются без бэкенда и весят ~140 KB brotli со всем включённым. Реактивность, хранилище и UI приезжают одним стеком: ты пишешь приложение, а не собираешь фреймворк из чужих библиотек.

К концу этого руководства у тебя будет настоящее приложение на $mol с офлайном, темами и локальным хранилищем, развёрнутое локально и собранное одной командой. Минут за десять, если терминал и редактор уже под рукой.

Что получится в итоге

Запущенное приложение, в котором уже есть то, что обычно прикручиваешь потом:

• установка как PWA и офлайн-режим,

• локальное хранилище с бесконфликтной синхронизацией (без серверного кода с твоей стороны),

• светлая и тёмная темы с переключателем,

• клиентский роутинг,

• GitHub Action для деплоя на Pages.

Всё это даёт скаффолдер. Дальше поменяешь одну строку и увидишь, как оно само пересчитывается.

Что понадобится

• Node.js 24+ и git.

Это весь список. В сборку попадают только те модули, на которые ссылается твой код. dependencies руками никто не ведёт.

Шаг 1. Поднять рабочее пространство и dev-сервер

git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
npm install && npm start

прямо в этом же терминале и процессе запустим гипер базу

image

+ giper/baza/app/run port=9090

mam работает как монорепо-воркспейс из независимых модулей. Твоё приложение живёт в нём как пара файлов в собственном неймспейсе, а в бандл попадут только модули, до которых дотянулся твой код. Dev-сервер на http://localhost:9080 собирает каждый бандл по запросу.

Шаг 2. Сгенерировать приложение (одна команда)

Из папки mam создай проект. Выбери свой неймспейс и имя приложения, например my/hello:

npm create view-tree-lsp@latest my/hello -- --no-docker --no-tauri

Команда создаёт готовое работающее приложение в ./my/hello/:

my/hello/
├── app/
│   ├── index.html        # веб-точка входа
│   ├── app.view.tree     # декларативное описание компонента
│   ├── app.view.ts       # поведение
│   ├── app.view.css.ts   # стили (типизированный CSS-in-TS)
│   ├── app.test.ts       # тест
│   ├── app.meta.tree     # офлайн установка 
│   └── app.locale=ru.json
├── store/
│   └── store.ts          # локальное хранилище
├── assets/logo.svg
└── .github/workflows/deploy.yml

Приложение готово к запуску.

Шаг 3. Открыть

Перейди на http://localhost:9080/my/hello/app/. Первая загрузка занимает несколько секунд: dev-сервер на лету собирает JS и CSS под этот модуль. Дальше всё инкрементально. Увидишь приложение с темами, несколькими экранами и работающей навигацией, готовое жить локально без сервера.

Скаффолдер также печатает URL тест-раннера (…/app/-/test.html), там можно посмотреть, как проходит встроенный тест.

Что ты получил (и почему это важно)

Скаффолдер кладёт минимальное настоящее приложение на $mol, и это сделано намеренно. Тут уже есть:

• Локальное хранилище из коробки. store/store.ts поверх CRDT: состояние сохраняется локально и чисто сливается между устройствами. Логику синхронизации руками писать не надо, бэкенда тоже нет.

• В app.meta.tree строкой include \/mol/offline/install подключён модуль PWA. Приложение ставится на телефон и продолжает работать без сети. Оффлайн просто ещё один модуль.

• Переключатель светлой/тёмной темы и навигация по URL ($mol_state_arg) уже стоят. Не нужны? Удали Theme_toggle из view.tree, и его не будет ни в DOM, ни в бандле.

• Стили типизированные: app.view.css.ts это CSS-in-TS, опечатка падает на компиляции.

Сделать реактивно

Открой app/app.view.tree, найди приветственный текст. Добавь поле ввода, привязанное к свойству, и строку, которая от него зависит:

home <= Home $mol_page
	title \Home
	body /
		<= Name $mol_string
			hint \Имя
			value? <=> name? \
		<= Greeting $mol_text
			text <= greeting \

Затем в app/app.view.ts опиши greeting как функцию от name:

greeting() {
	const name = this.name()
	return name ? `Привет, ${name}!` : ''
}

Попробуй печатать. Приветствие обновляется само. Ты не подписывался на поле и не планировал перерисовку: greeting читает this.name(), поэтому $mol запоминает зависимость и пересчитывает только это значение, когда меняется name. Та же реактивная модель пронизывает все слои, включая загрузку данных: значение, которое ещё не готово, “приостанавливается” и подставляется, когда придёт. Поэтому асинхронный код читается как обычный синхронный.

Настроить редактор (минута)

view.tree чувствителен к отступам, так что поддержка в редакторе сильно помогает:

• VS Code: поставь плагин языка view.tree; используй плагин .editorconfig, чтобы были TAB-ы для отступов и LF в концах строк.

• Zed: расширение view.tree добавляет подсветку, go-to-definition и автодополнение.

• Zed-расширение построено на view.tree LSP и tree-sitter-грамматике, их можно подключить и к другим редакторам.

Деплой

В скаффолде уже лежит GitHub Actions workflow: пушишь в main, он собирает и публикует на GitHub Pages. Ветки-фичи деплоятся на собственный preview-URL.

Попробуй

Сгенерируй приложение, преврати приветственный экран во что-то, чем правда пользуешься, и положи это в сгенерированное хранилище, чтобы пережило обновление страницы и перезапуск офлайн. Когда понадобится полный список кирпичиков (поля, списки, графики, пикеры), загляни в справочник модулей: там каждый, с примерами.

Если зависнешь, есть скил для нейронки, который умеет в view.tree и подскажет, как сделать конкретную штуку:

npx skills add b-on-g/mol_skill --all -g