$mol — реактивный микромодульный фронтенд-фреймворк, который Дмитрий Карловский (nin-jin) и сообщество развивают с 2016 года. За эти годы накопилась сотня статей на Хабре и большая документация на mol.hyoo.ru, но разбросанные по годам и площадкам тексты сложно осваивать линейно.
Это навигатор. На каждый материал один абзац о сути и ссылка на оригинал. Сами тексты не переписаны: читайте в порядке, который вам подходит.
Содержание
1. Зачем $mol и для кого
Точка входа: что за фреймворк, как он позиционируется, кому подходит.
Русский фронтенд мирового уровня
Презентация $mol как самостоятельной школы фронтенда: какие задачи решаются иначе, чем в мейнстриме, и почему на это стоит обратить внимание. Первое знакомство, если о $mol слышите впервые.
Обзор особенностей фреймворка
Ключевые свойства списком: реактивность из коробки, виртуализация рендеринга, типизированные стили, модульная сборка. Чек-лист для решения, нужен ли вам такой набор.
Идеальный UI-фреймворк
Манифест 2016 года, написанный ещё до выпуска $mol. Автор формулирует свойства, которыми, по его мнению, должен обладать UI-фреймворк. Эти требования и стали техническим заданием. Хорошо читать, чтобы понимать исходные мотивы и сравнивать с тем, что получилось.
Мифы о веб-фреймворке $mol
Разбор устойчивых заблуждений: «непонятный синтаксис», «слишком экзотический», «нет сообщества». На каждое — конкретный контраргумент с примерами кода и ссылками. Подойдёт, если вы что-то уже слышали и сомневаетесь.
Хабр, 2026-04-03 · mol.hyoo.ru → Чем хорош?
2. Как выглядит код
До разговоров об устройстве удобно увидеть синтаксис и базовый пример.
Почему шаблоны в $mol такие странные?
Подробный разбор формата view.tree: почему отступы вместо скобок, почему <= и => вместо обычных операторов, какие проблемы это решает. Если первая реакция на код $mol была «что это вообще такое», начинайте отсюда.
Привет, Мир!
Минимальный пример того, как получить работающее $mol-приложение на экране. Первое практическое упражнение после знакомства с синтаксисом.
Термины
Словарь понятий, специфичных для $mol: компонент, свойство, канал, владение, фракция. Справочник, к которому удобно возвращаться при чтении статей.
3. История $mol
Десять лет проекта в пяти точках, от тизера до последнего обзора.
Первый тизер 2016 года
Самая ранняя публичная демонстрация: что задумано, как пишется код в view.tree, чем отличается от React и Angular того времени. Точка отсчёта, чтобы видеть, что изменилось за десятилетие.
Первый релиз 2016 года: $mol — reactive micromodular ui-framework
Анонс на Хабре, с которого всё началось. Здесь введены микромодульный подход и автоматическая реактивность как базовые свойства, а не отдельные библиотеки. Помогает увидеть исходную мотивацию автора без позднейших слоёв.
Состояние на 2019 год
Срез экосистемы через три года после релиза: какие модули появились, какие приложения собраны, чего ещё не хватает. Хорошо показывает, как из заявки 2016-го проект вырос в рабочий стек.
$mol: 4 года спустя
Авторская ретроспектива 2020 года: что подтвердилось, что переделано, что добавлено. Текст-переход от амбициозного манифеста к работающему фреймворку с продакшеном.
$mol: 10 лет спустя
Юбилейный обзор 2025 года: текущий стек, продакшен-приложения, стабилизировавшиеся подсистемы, движение к $hyoo как продолжению $mol на распределённые данные. Точка входа, если приходите в проект сейчас и хотите сразу актуальную картину.
4. Реактивность — фундамент
Реактивность — главный технический сюжет $mol. У Димы это целая школа со своими понятиями (атом, фракция, тонус), которая складывается с 2014 года, ещё до выхода самого $mol. Здесь собраны статьи трёх поколений: основания, новая теория 2026 года и реализация в $mol_wire.
4.1. Истоки (2014–2017)
Атом — минимальный кирпичик реактивного приложения
Самая ранняя статья vintage о реактивности, 2014 год. Вводится понятие «атом»: единица состояния, которая знает о своих зависимостях и автоматически перевычисляется. По времени и идеям эта работа предшествует MobX. Читать ради понимания фундамента.
Атом — реализация на TypeScript
Продолжение: тот же атом, но с кодом на TS и разбором, как отслеживаются зависимости. Подходит, если хотите написать свою реактивную систему или понять, что под капотом у $mol_wire.
$mol_atom: теория и практика реактивности
Зрелое описание атома 2016 года: жизненный цикл, инвалидация, ленивое вычисление, освобождение ресурсов. Это уже не идея, а спецификация работающей системы. Подходит как академическая база перед чтением свежих статей о $mol_wire.
Объектное Реактивное Программирование
Парадигма ORP: как объединяются объектная парадигма и автоматическая реактивность. Объясняет, почему $mol-классы выглядят как обычные TS-классы, а ведут себя как реактивные графы.
Quantum Mechanics of Calculations in JS
Разбор того, как длинные синхронные вычисления разбиваются на кванты, чтобы не блокировать поток. По-английски. Нужна для понимания производительной модели $mol на больших данных.
4.2. Теория: серия из доклада «Реактивные системы»
Это части большого авторского доклада «Реактивные системы», который полностью доступен на page.hyoo.ru — там же анализ практичности и дополнительные материалы. На Хабр Дима выкладывает отдельные части. Ниже — в порядке появления.
Что такое Реактивное Программирование
Открывает цикл. Определение реактивности через отношения значений и зависимостей, без привязки к конкретному фреймворку. Если нужен единое определение, к которому можно обращаться в спорах, начинайте отсюда.
Предотвращение лишних реактивных вычислений
Какими приёмами реактивная система отсекает вычисления, результат которых не нужен. Практическая статья: после неё понятно, почему @mem и подобные декораторы дают такой прирост.
Тонус в реактивных системах
Понятие «тонус»: степень готовности зависимостей считаться сразу или отложенно. Объясняет, почему в одних системах реакция на изменение моментальная, а в других запаздывает.
Детерминированность реактивных вычислений
О порядке выполнения реакций: когда он гарантирован, когда нет, какие гарантии даёт $mol_wire. Подходит тем, кто сталкивался с непредсказуемым порядком пересчёта в других системах.
Перестройка реактивных потоков данных
Завершает цикл: как реактивный граф перестраивается при изменении кода или зависимостей, и почему этот процесс может быть оптимальным. Закрывает рассказ об инвариантах и переходит к инженерным деталям.
Видео-доклад целиком и подборка разборов — на странице «Реактивные системы».
4.3. $mol_wire — реализация
Проектируем идеальную систему реактивности
Программная статья 2022 года: какие свойства должны быть у идеального реактивного движка, как $mol_wire им соответствует, какие компромиссы приняты. Хороша как ориентир, чтобы увидеть авторский вкус в проектировании.
$mol_wire для знакомых с React и MobX
Перевод концепций $mol на язык людей, привычных к React и MobX: что соответствует хукам, что — observable, что — autorun. Лучшая точка входа, если у вас уже есть бэкграунд в одном из этих стеков.
Кеширование и реактивная инвалидация
Конкретика: как $mol_wire кеширует значения, когда сбрасывает кеш, как устроена инвалидация по графу. Понадобится, когда вы уже пишете на $mol и хотите оптимизировать.
Трансплантация реактивности
Как пересадить $mol_wire в чужой проект (React, Vue) и получить пользу без переезда всего стека. Практическая статья для тех, кто хочет попробовать $mol-реактивность точечно.
Big State Managers Benchmark
Сравнительный бенчмарк менеджеров состояний: Redux, MobX, Zustand, Recoil, $mol_wire и другие. С методологией и воспроизводимым репозиторием. Подходит, если нужны цифры для технического решения.
5. Архитектура $mol
Как фреймворк устроен изнутри: сборка, шаблонизация, рендеринг, стили.
5.1. MAM — модульная сборка
MAM: сборка фронтенда без боли
Базовая статья о MAM (Mol Application Manager): как одна папка модуля содержит код, стили, тесты, а зависимости описываются автоматически по импортам. Если непривычно отсутствие package.json в каждом модуле, начинайте отсюда.
Подробно о MAM
Расширенная версия с разбором глубокой конфигурации и нестандартных случаев. Понадобится, когда нужно подключить нестандартную интеграцию или собрать собственный билдер.
Рабочее окружение
Как поднять локальную среду разработки $mol с нуля: установка, dev-server, отладка. Первый практический шаг после прочтения «Зачем».
Интеграция с NPM
Как тянуть npm-пакеты в $mol-проект и как $mol сам публикует модули в npm. Понадобится, если нужно встроить чужой код или, наоборот, отдать $mol-модуль внешним потребителям.
5.2. view.tree и древовидный формат
Tree — единый AST чтобы править всеми
Большая статья 2020 года о формате .tree как универсальном AST для любых данных и кода. Объясняет, почему один и тот же формат удобен и для шаблонов, и для конфигов, и для замены JSON.
Tree — убийца JSON, XML, YAML и иже с ними
Исторический исток формата 2015 года: чем .tree отличается от существующих, какие свойства даёт. Хорошо показывает эволюцию идеи от лаконичного формата сериализации до основы шаблонизатора.
Видео по теме: «Tree — единый AST чтобы править всеми» — на странице раздела «Технические спецификации» у автора.
Композиция компонентов
Как из мелких $mol-компонентов собираются крупные, как переопределяются свойства, как работает наследование. Базовое руководство для повседневной работы.
Декларативная композиция компонентов
Теоретический разбор того же принципа: почему декларативная композиция в $mol устроена так, какие свойства это даёт. Хорошо читается после практики «Композиции компонентов».
5.3. Виртуализация рендеринга
Автоматическая виртуализация рендеринга произвольной вёрстки
Главная архитектурная фишка $mol: рендерится только то, что попадает в видимую область. Разбирается, как это устроено и почему даёт стабильный FPS на тяжёлых интерфейсах. Важный текст для разговоров о производительности.
Видео по теме: «Автоматическая виртуализация рендеринга» — на странице mol.hyoo.ru → Архитектура.
5.4. CSS-in-TS и каскад
Продвинутый CSS-in-TS
Как $mol типизирует стили на уровне TypeScript: автодополнение, проверка ошибок при компиляции, поддержка тем. Подходит, если устали ловить опечатки в строковых классах и инлайн-стилях.
Видео по теме: «Продвинутый CSS-in-TS» — на странице mol.hyoo.ru → Архитектура.
Каскадные стили компонент
Как $mol работает с каскадом CSS: что наследуется, что переопределяется на компонентном уровне, как устроены темы. Практическое руководство для всех, кто пишет UI на $mol.
5.5. Mathematics Driven Design
Mathematics Driven Design: размеры и отступы
Математический подход к дизайн-системе: как из небольшого набора базовых констант получаются согласованные размеры, отступы и сетки. Полезна, если строите свою дизайн-систему и устали от магических чисел.
5.6. Каналы между компонентами
Каналы
Механизм каналов: способ передачи данных между компонентами без жёсткой связи через пропсы. Объясняет, как двусторонняя связь работает прозрачно для разработчика.
6. Руководство: как писать на $mol
Практическая часть для тех, кто уже понимает идею и хочет писать код.
6.1. База
Введение
Стартовая страница руководства: что делать дальше и в каком порядке читать. Точка отсчёта для всех практических глав.
Асинхронность: $mol_fetch и fiber
Текущая идиома $mol для работы с сетью — синхронный код через $mol_fetch (поверх $mol_wire_sync): пишешь как обычный return, fiber сам ретраит на промисах, view сам показывает error-плашку — без try/catch. Страница «Асинхронность» в официальном руководстве описывает более старый стиль с $mol_wire_async, поэтому надёжнее смотреть исходник модуля и его demo.
Исходник $mol_fetch · mol.hyoo.ru → Асинхронность (исторический контекст)
Локализация
Встроенный механизм i18n: где хранятся переводы, как добавлять, как переключать языки в рантайме. Понадобится, когда проект выйдет на международный рынок.
Индексирование поисковиками
Как сделать $mol-приложение видимым для поисковых ботов, не прибегая к классическому SSR. Подойдёт всем, кто думает о SEO, но не хочет тащить node-рендер.
6.2. Тестирование
Тестирование
Базовая страница: как устроены тесты в $mol-модулях, как их запускать, какие есть утилиты. Стартовая точка перед тематическими статьями.
Фрактальное тестирование
Подход, при котором тесты живут рядом с кодом на каждом уровне модульной иерархии. Объясняет, как это снижает стоимость поддержки и облегчает рефакторинг.
Видео по теме: «Фрактальное тестирование» — на странице раздела «Теория программирования» на page.hyoo.ru.
Концепции автоматического тестирования
Теория: какие бывают виды тестов, что они проверяют, какие свойства даёт каждый уровень. Общая основа, не привязанная к $mol.
Заблуждения об автоматическом тестировании
Разбор популярных мифов: «100% покрытие = надёжный код», «юнит-тесты ловят все баги» и подобных. Хорошо читается в паре с предыдущей.
6.3. Учебные примеры
Игра «Жизнь»
Полноценное приложение на $mol — клеточный автомат Конвея. Минимальный пример нетривиального UI с состоянием и рендером. Удобно разбирать построчно.
mol.hyoo.ru → Руководство · исходная статья на Хабре, 2017-11-09
BALLSORT на $mol
Реализация известной казуальной головоломки. Пример работы с состоянием, анимациями и пользовательским вводом.
Электронная таблица
Минимальный аналог Excel: формулы, ссылки между ячейками, перерасчёт по графу. Хорошая демонстрация реактивности на нетривиальной модели данных.
mol.hyoo.ru → Руководство · исходная статья на Хабре, 2017-09-27
Готовим веб-бенчмарки
Инструмент $mol_app_bench и подход к измерению производительности фронтенда. Подходит, если хотите проверять решения цифрами, а не на ощущениях.
mol.hyoo.ru → Руководство · исходная статья на Хабре, 2017-02-19
7. Утилиты экосистемы
Отдельные библиотеки и форматы $mol. Многие из них можно использовать без всего стека.
$mol_time — работа со временем
Типизированная работа с датами по ISO 8601: моменты, интервалы, длительности. Решает классическую путаницу с Date, часовыми поясами и арифметикой. Подключается в любой проект.
Хабр, 2015-07-20 · mol.hyoo.ru → Руководство
$mol_regexp — регулярки человеческим языком
Декларативный конструктор регулярных выражений с типизацией результата. Вы пишете на TypeScript то, что регулярка должна найти, и получаете обратно типизированную структуру совпадений.
Хабр, 2021-06-08 · mol.hyoo.ru → Руководство
MarkedText — маркдаун здорового человека
Альтернативный формат разметки текста, без двусмысленностей и неожиданных интерпретаций, которыми страдает классический Markdown. Подойдёт, если вы строите редактор контента или вики.
$mol_func_sandbox — JS-песочница
Безопасное исполнение пользовательского JavaScript-кода в браузере. Две статьи: «hack me if you might!» как пригласительный challenge, и «взломай меня, если сможешь!» как разбор архитектуры решения.
Хабр, 2021-05-06 · Хабр, 2020-06-22
$mol_strict — строгий TypeScript
Утилита, закрывающая дыры в стандартной системе типов TS: тонкие случаи с [object Object], неявные any, разбор того, что компилятор пропускает. Подходит, если проект страдает от рантайм-сюрпризов.
VaryPack — универсальный бинарный формат
Сериализация данных в компактный бинарный вид с типизированным восстановлением. Сравнивается с JSON, BSON, MsgPack, CBOR. Две связанные статьи: одна о решении, другая о процессе его проектирования.
Хабр, 2025-11-14 · Хабр, 2025-12-09
UCF — Unicode Compact Format
Предложение нового способа кодирования текста как альтернативы UTF-8: что не так с UTF-8 на длинной дистанции и какой формат решает эти проблемы. Дискуссионная, но техническая.
Humane API REST Protocol
Подход к дизайну REST-API, в котором учтены болевые места разработчика-потребителя: согласованность, предсказуемость, версионирование. Подойдёт бэкенд-командам.
Глубокое сравнение структур
Алгоритм глубокого сравнения объектов с оптимизациями: где это нужно в реактивных системах и как избежать тормозов на больших структурах.
8. TypeScript-приёмы и принципы кода
$mol написан на TypeScript. Эта глава — про приёмы языка, которые автор использует и формализует.
ТайпСкрип: ох уж эта весёлая система типов
Подборка нетривиальных приёмов и подводных камней TS. Помогает понять, как сделана типизация в $mol и почему некоторые конструкции выглядят неожиданно.
Инверсия контроля на голом TypeScript без боли
Как сделать DI без отдельной библиотеки, через сам язык. Описывается паттерн $mol_ambient-стиля, который используется во всей экосистеме.
Формат имён в коде
Авторская система именования переменных, функций, файлов. Объясняет, почему в $mol такие префиксы и почему модули называются именно так.
Фрактал имён элементов
Идея, что имена в коде должны масштабироваться как фрактал: от общего к частному без перескоков. Применяется в $mol для именования компонентов и их свойств.
Принципы написания кода
Базовый набор правил, которым следует автор: что считать читаемым, что поддерживаемым, как договариваться о стиле в команде.
Хабр, 2014-09-14 · mol.hyoo.ru → Сообщество
Декомпозиция программных компонент
Подход к разбиению крупного решения на части: какие принципы соблюдать, какие нарушать осознанно. Подойдёт для архитектурных решений в большом проекте.
Деконструкция OCP
Разбор Open/Closed Principle: что в формулировке корректно, что устарело, какая альтернативная формулировка ближе к реальности.
Деконструкция LSP
Тот же разбор для принципа подстановки Лисков. Подойдёт тем, кто пересматривает SOLID критически.
Деконструкция TDD
Анализ Test-Driven Development: где это работает, где приводит к лишней работе, какие альтернативы рассмотрены.
9. $hyoo и распределённые данные
Параллельный с $mol проект: попытка построить распределённый стек хранения и синхронизации данных (CRDT, криптография, локально-первая модель). Здесь собраны статьи о принципах. Текущая реализация — $giper_baza (новое поколение, заменившее ранний $hyoo_crus); отдельной публикации про неё на Хабре пока нет, актуальный код и примеры — в репозитории.
Гарантии видимости в распределённых хранилищах
Уровни изоляции и видимости транзакций применительно не к классическим БД, а к распределённым CRDT-системам. Объясняет, что вы можете обещать пользователю и чего нет.
Классификация подходов согласия параллельных агентов
Систематика того, как параллельные узлы могут договариваться о состоянии: от классических консенсус-протоколов до CRDT. Карта пространства решений.
page.hyoo.ru → Теория программирования
Видео по теме: «Реактивные системы» — на той же странице раздела.
Революция архитектуры Веба, часть 4
Четвёртая часть цикла о том, как может выглядеть веб следующего поколения: локально-первый, без обязательного сервера, с авторской криптографией поверх. Видение, к которому ведёт $hyoo.
Что если… (безумные идеи хранения данных)
Подборка экспериментальных идей: что произойдёт, если отказаться от привычных предположений о структуре хранилищ. Подходит, когда хочется свежих идей за пределами текущего стека.
Tinder ушёл… да здравствует $hyoo_match
Демонстрация: дейтинг-приложение, построенное на $hyoo как пример распределённого продакшена. Хороший практический кейс к теоретическим статьям выше.
10. Сообщество и применение
Как устроена работа сообщества вокруг $mol и где его уже применяют.
Общие принципы
Стартовая страница раздела о сообществе: ценности, способы взаимодействия, тон общения. Прочитать перед тем, как заходить в чаты и issue-трекеры.
Целевая аудитория
Кому $mol полезен в первую очередь и в каких задачах: размер команды, тип продукта, требования к производительности. Честный фильтр перед инвестицией времени.
Уровни компетенций
Шкала владения $mol: что должен знать новичок, какие задачи решает мидл, какой код пишет сеньор. Подойдёт командам, которые планируют внедрение.
Командная работа
Как организуется команда, использующая $mol: владение модулями, ревью, релиз-процесс. Практические рекомендации, отличающиеся от привычного React-флоу.
Истории успеха
Реальные продакшен-кейсы: какие приложения собраны на $mol, какие задачи решены. Подойдёт для разговоров с заказчиком или CTO.
Впечатления
Отзывы разработчиков, перешедших на $mol: что понравилось, что вызвало сопротивление, что стало неожиданным. Реалистичный взгляд изнутри.
Страхи новичков
Самые частые опасения тех, кто только смотрит на $mol, с разбором: какие из них обоснованы, какие — стереотипы. Прочитать до того, как браться за первый проект.
Хоп, Хлоп, и MVP готов
Практика быстрого прототипирования на $mol: как собрать рабочее приложение из готовых компонентов за день. Подойдёт для стартапов и хакатонов.
Принцип минимизации злобы
Универсальный принцип принятия решений: в выборе между «вызвать восхищение» и «не вызвать злости» — выбирать второе. Работает в любых ситуациях от продуктовой фичи до собственной реплики в обсуждении. Под капотом — минимакс из теории игр и модель Кано.
11. Аналитика и сравнения
Цифры, бенчмарки и сравнения с другими решениями.
Аналитика проекта
Аналитический раздел сайта документации: статистика по UX, архитектуре, исходному коду и интеграциям. Раскладка проекта в цифрах. Удобно для презентаций.
mol.hyoo.ru → Аналитика · Пользовательский опыт · Архитектура · Исходный код · Интеграции
Сравнение виджетов
Прямое сравнение компонентов $mol с аналогами из популярных UI-китов: размер бандла, API, производительность. Подойдёт при выборе стека для нового проекта.
Влияние на индустрию
Подборка случаев, когда идеи $mol явно или неявно повлияли на другие фреймворки и инструменты. Подходит для исторического контекста.
JavaScript нанобенчмарки и преждевременные тормоза
Подход к измерению производительности на уровне отдельных операций: где интуиция обманывает, где нет. Методическая статья для всех, кто принимает технические решения по цифрам.
12. Куда дальше
После того, как обзорная часть прочитана, есть смысл идти в систематические курсы и точки входа.
Курс Реактивного Программирования
Систематический курс автора по реактивности: от базовых понятий до проектирования собственного движка. Удобен как учебный план, если хотите глубоко разобраться, а не быстро применить.
page.hyoo.ru → Уникальные курсы
Курс Бесконфликтных Алгоритмов
Курс по CRDT и связанным алгоритмам. Поддерживающий материал для проекта $hyoo. Подходит разработчикам, которые планируют идти в локально-первые приложения.
page.hyoo.ru → Уникальные курсы
Классификация парадигм программирования
Карта парадигм и того, какое место в ней занимает $mol. Подойдёт для теоретического кругозора и осмысленного выбора инструментов.
Об авторе
Профиль Дмитрия Карловского: образование, карьера, контакты, текущие проекты. Подходит тем, кто хочет писать напрямую или искать партнёрство.
Точки входа в экосистему
Готовые приложения, демки, библиотека иконок. Удобно потрогать руками без локальной установки.
Если хочется попробовать руками прямо сейчас — есть песочница для view.tree.
Оригиналы: Хабр nin-jin и документация mol.hyoo.ru.