Что такое $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
прямо в этом же терминале и процессе запустим гипер базу
+ 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
Комментарии (22)
dyadyaSerezha
07.06.2026 16:30Надо было начать с краткого описания, что такое $mol и что такое этот ваш оффлайн и зачем он нужен. Иначе всё остальное непонятно.
spamspamsmapspam
Чтобы что? Кому в здравом уме нужно это поделие?
cmyser Автор
это лучшее техническое решение на рынке
ermouth
Какой проблемы?
cmyser Автор
многих, очень
на многих eage кейсах, самые популярные фреймворки ломаются, со всем системой реактивновности, как например тут
в моле этой проблемы нет, решена на уровне архитектуры, как и многие другие
напишу статью новую, где раскрою подробнее, подписывайтесь
nektobit
В angular тоже нет этой проблемы
cmyser Автор
да, и это здорово
spamspamsmapspam
Звиздеть — не мешки ворочать.
cmyser Автор
я не обманываю, одна система реактивности дорогого стоит
Если есть желание, попробуйте опровергнуть данный тезис
Но именно про техническую часть, не про "найм", "красоту кода"
ermouth
Сами по себе системы реактивности вообще ничего не стоят, потому что их не продают. Аналогично про ваше утверждение «лучшая система на рынке». Если б она была лучшей, её бы использовали на рынке в значимых количествах. По факту не использует примерно никто.
Рынку недостаточно технологической отточенности или там волшебной скорости. И уж тем более недостаточно заявлений о лучшести, когда и показать то нечего.
По набору фич, неинтегрируемости и приколоченности подходов вы пытаетесь играть в платформу веб-приложений с прицелом чуть не на экосистему. Но для платформ технологическая отточенность и скорость по важности вообще на десятом месте характеристики.
Платформа приложений – это сначала приложения на ней, потом комьюнити вокруг разработчиков, потом обучалки+руководства, а уже потом – таблички с цифрами, показывающими что вы впереди планеты всей.
А вы начинаете с табличек, с невероятным упорством и высокомерием (хотя бы вот ваше тыканье в публикации чего стоит) продвигая чисто инженерное решение.
Оно, может, и хорошее – но утверждая, что оно лучшее, вы можете только отпугнуть.
musk
А меня больше забавляет подход «адептов» $mol.
Сначала часто почти голословные заявления уровня «это лучшее, что есть на рынке», а потом еще и опровержения ты им должен. Профдеформация прямо какая-то. Наблюдаю после Дмитрия у второго товарища уже такую манеру.
Я не противник $mol, считаю даже, что там мелькало немало здравых идей, но «упоротость» его идейных адептов как-то сходу отбивает всякое желание подходить ближе. Впрочем, жаль, что весьма наверняка хороший инструмент страдает от отсутствия вменяемых спикеров.
cmyser Автор
меня обвинили во лжи, бремя доказательства на том, кто обвиняет
все материалы обо всех решениях есть на mol.hyoo.ru и на хабре в статьях дмитрия, это очень большой обьем материала
я при этом согласен что голословные заявления - ужасная тактика, для этого в статье много ссылок например на бенч с виртуализацией https://nin-jin.github.io/js-framework-benchmark/webdriver-ts-results/table.html
продвигать что то новое крайне тяжело, и вот вырваться из этой трясины как то хочется, отсюда и громкие заявления ( причем правдивые заявления )
и вот как продвигать ? это правда очень тяжело
постоянная критика, пустая, не техническая
да и не упоротый я, тон тут специально менее рейджбайтовый, эх
musk
Я не увидел никаких обвинений во лжи в вышестоящих комментариях.
Здесь это проходит именно, как голословное заявление. Бремя доказательства на том, кто утверждает.
Читал-читал статью, и ну нигде не увидел ссылки https://nin-jin.github.io/js-framework-benchmark/webdriver-ts-results/table.html, кроме ссылки на другую статью про веб-компоненты с какими-то другими бенчами. Наверное, я плохо искал. По вашей ссылке меряется как всегда что-то с половиной пустых таблиц, что Дмитрию было интересно померять, а что и почему - одному ему известно. Впрочем, это в его духе.
Если это носит массовый характер, то это хороший признак одного из двух, как правило:
1. Вы зашли не в ту дверь (вряд ли, здесь все-таки технический ресурс)
2. С вами или с вашей манерой общения (не именно с лично вашей, а как спикера) что-то не так, так как не может быть такого, что все вокруг "не такие".
В целом, я могу понять вас. Тут про "упоротость" не конкретно про вас, а про образ последователей, активно созданный манерой общения Дмитрия. Сформировалась общественная предвзятость. А вообще ваш подход в статье мне больше по душе (манера Дмитрия обычно поливать всех кое-чем коричневым и пыжиться, люди не особо любят, когда их обесценивают, а Дима забывает или специально делает вид, что его $mol зачастую основан на переосмыслениях всех тех чужих достижений). "это лучшее техническое решение на рынке" - это просто триггер в его духе.
В общем, если выбирать инфлюенсера, то Дмитрия я бы на километр с этому не подпустил)
cmyser Автор
Спасибо большое
Ссылку да, я в новой статье указал, перепутал
Я правда считаю что $mol лучшее техническое решение, очень много всего из коробки, и продумано заранее, например локализация это не парсинг, а часть описания компонента
Ну про причины моего мнения как раз в моей новой статье https://habr.com/ru/articles/1044684/
Теперь есть на что ссылаться при голословном заявлении)
cmyser Автор
вот да, ты прав, парадокс возникает нельзя говорить правду, нельзя говорить что лучшее это лучшее, я знаю что это потому что люди - иррациональны, я знаю но хочу верить что смогу привлечь тех, кому важны технические решения
наверное я не в ту аудиторию целюсь
спасибо за фидбэк, попробуем зайти со стороны приложений
ermouth
Пожалуйста, давайте без тыкания. Что лучшее на рынке – нельзя даже по закону 5ФЗ «О рекламе» говорить. Это общепризнанный – аж законодательно зафиксированный – маркер манипуляции.
Уже привлекли. Дофига людей посмотрели, и если вы обратите внимание, самому смолу никто особо оценку не даёт, потому что сначала оценивают то, как вы этот смол продвигаете.
В ту. Но показываете вы не то, и апломб смоловских ребят решительно не соответствует масштабу.
Удачи.
cmyser Автор
а что показывать ?
spamspamsmapspam
А ничего, димочка карловский в одно рыло устроил самоубийственный пиар, нормальные люди это говно за километр обходят а в таких адептов как ты палочкой тыкают и смеются из энтомологического интереса. Брось каку, карловским станешь.
spamspamsmapspam
Да, и огромное комьюнити из автора и тебя, вот это я понимаю убийца реакта.
cmyser Автор
Активных участников человек десять, но есть и много тех кто просто следит
Да и дело же не в количестве человек, а в качестве технологий