ReadGen — это специализированный блочный конструктор README-файлов, разработанный специально для разработчиков.
Контекст разработки: Этот проект был реализован в рамках интенсивного месячного спринта с жестким лимитом времени: 2–3 часа в день (включая выходные). Проект является демонстрацией навыков быстрого прототипирования, стратегической расстановки приоритетов и архитектурной зрелости в условиях ограниченных ресурсов.
Проект демонстрирует навыки низкоуровневых манипуляций с DOM, глубокое понимание жизненного цикла React и опыт построения сложных систем редактирования текста с нуля.
-
Собственный движок WYSIWYG: Разработан полностью с нуля без использования сторонних фреймворков (Tiptap, Slate и др.). Включает кастомное управление
contenteditable, ручной контроль рендеринга и программную инъекцию HTML для обхода стандартных ограничений текстовых движков. - MOM (Virtual Markdown Object Model): Собственное ядро на чистом TypeScript (парсер, валидатор, гарды, движок). Работает как чистая система «данные на входе — данные на выходе» без внешних зависимостей, обеспечивая полную предсказуемость структуры документа.
-
Оптимизация рендеринга: Изоляция обновлений на уровне узлов. Использование мемоизированных селекторов и стабильных фасадов действий (Action Facades) обеспечивает сложность рендеринга
$O(1)$ при манипуляциях с контентом, сохраняя высокую производительность вне зависимости от размера документа. -
Нормализованное состояние: Плоская структура данных в сторе обеспечивает доступ к узлам за
$O(1)$ и эффективное управление деревом README без рекурсивного обхода на уровне UI-слоя.
- Core: React 19 (низкоуровневые манипуляции с DOM), TypeScript.
- State Management: Redux Toolkit (Thunks для сложной бизнес-логики; раздельные слайсы для документа, выделения (Selection) и UI).
- Architecture: Гибридный подход FSD / Layered; модульная декомпозиция на основе слайсов с глубокой инкапсуляцией основной бизнес-логики и состояния.
Проект разрабатывался с подходом «Production-First», где приоритет отдавался стабильному MVP в рамках 30-дневного окна.
- Рендеринг: Отсутствие виртуализации (скорость разработки была приоритетнее поддержки документов на 10k+ блоков). Производительность оптимизирована под стандартные размеры README.
- Импорт данных: Базовый импорт сырого Markdown; упрощен для обеспечения стабильности ядра в рамках месячного спринта.
- Управление DOM: Деструктивная синхронизация DOM (полная очистка перед манипуляцией с
innerHTML). Используется как надежный «fail-safe» метод для обеспечения консистентности UI без внедрения сложной логики частичного сопоставления (reconciliation). - Ограничения структуры: Ядро нативно не поддерживает таблицы и инлайн-код; их поддержка реализована через Raw Nodes (сторонний парсинг MD/HTML), чтобы сохранить легкость и расширяемость основного движка.
- Иерархия: Плоская структура блоков. Группировка и вложенность были опущены в пользу финализации логики управления документом и системы экспорта.