Переиспользуемый контентный слой: редактор блоков и рендер для студента в одном пакете
Роль
Frontend-разработчик: разработка и развитие библиотеки
Период
январь 2024 г. — по настоящее время
Команда
3 человека
Компания
LazurM
Детали и код закрыты соглашением: описываю задачи и решения без раскрытия внутренностей.
Внутренняя библиотека, из которой собираются лонгриды образовательной платформы. Даёт редактор блочного контента для авторов и точно такой же рендер для студентов, поэтому конструктор и плеер не расходятся в отображении.
Что сделано
Более 400 коммитов в библиотеку, ветвление dev / stable / main для безопасных обновлений потребителей
Блочный редактор на Plate: текст, медиа, вложенные структуры, кастомные блоки под сценарии платформы
Единый рендер для режима редактирования и режима просмотра
Собирается в режиме библиотеки и подключается как зависимость в конструктор и плеер
Управление состоянием редактора на Zustand, доступные примитивы интерфейса на Radix
Перетаскивание блоков и элементов внутри структуры контента
Контекст
Зачем библиотека
Лонгрид — основной формат учебного материала на платформе: текст, изображения, вставки, задания. Его создают в конструкторе и проходят в плеере, то есть один и тот же контент нужен двум разным приложениям.
Пока рендер дублировался в каждом приложении, любое изменение блока приходилось повторять дважды, и различия между «как автор видел» и «как студент увидел» появлялись сами.
Задача
Задача
Библиотека — публичный контракт: её обновление мгновенно отражается на нескольких продакшн-приложениях. Значит нужна дисциплина версий и такой API, который можно расширять без ломающих изменений.
Редактор блочного контента сам по себе непростая история: вложенность, выделение, вставка из внешних источников, поведение клавиатуры, сохранение структуры документа.
Решение
Решение
Редактирование и просмотр собраны на одном рендере, поэтому автор и студент видят одни и те же блоки. Библиотека подключается в конструктор и плеер отдельным пакетом.
Результат
Результат
Библиотека стала общим контентным слоем платформы: новый тип блока добавляется один раз и сразу доступен и авторам, и студентам.
Это моя личная гордость в проекте: работа над кодом, который используют другие разработчики, требует другого уровня аккуратности к API и обратной совместимости, и именно она дала мне понимание, чем библиотека отличается от приложения.
Крупный проектПродуктПод NDA