Онлайн-доска на весь учебный год: почему мы отказались от одной бесконечной сцены
Самая неприятная проблема долгоживущей онлайн-доски начинается не тогда, когда на ней рисуют. Она начинается через несколько месяцев, когда нужно быстро найти старую тему, открыть её на другом устройстве и не загрузить вместе с ней весь учебный год.
Я делаю UrokDesk — рабочее пространство для репетитора и ученика. Поэтому дальше будет не независимый обзор сервиса, а разбор нашего архитектурного решения: почему постоянная доска у нас состоит из отдельных страниц-сцен и что мы считаем нормальным поведением такой системы.
Почему «один ученик — один бесконечный холст» звучит лучше, чем работает
Для отдельного урока всё просто: открыть редактор, нарисовать схему, добавить фотографию задачи, закрыть вкладку. Но регулярные занятия требуют другого масштаба времени. Доска должна пережить не один звонок, а тему, четверть, иногда весь учебный год.
Можно было бы хранить всё на одной сцене Excalidraw. Пользователю даже не пришлось бы выбирать страницу: двигайся вправо или вниз, пока не найдёшь нужный фрагмент. Именно здесь удобная метафора начинает конфликтовать с устройством данных.
Тысячи объектов и крупные изображения на одной сцене требуют ресурсов устройства. Чтобы показать фрагмент за сентябрь, редактору всё равно приходится иметь дело с объектами, которые понадобятся только весной. А поиск превращается в навигацию по координатам: «кажется, формула была где-то левее фотографии тетради».
Мы не стали обещать бесконечную производительность бесконечного холста. Вместо этого зафиксировали более скромную и проверяемую цель: одна рабочая доска может долго сохранять контекст предмета, но внутри она должна иметь структуру.
Доска принадлежит предмету, а не встрече в календаре
Первое решение было продуктовым, не техническим. Постоянная доска в UrokDesk связана с учеником и предметом, а не с конкретным часовым слотом. У одной пары «репетитор — ученик» может быть несколько досок: например, отдельные пространства для алгебры и геометрии.
Это снимает другую крайность — новую ссылку на каждый урок. После занятия рабочее пространство не исчезает. На следующей встрече можно вернуться к той же теме, а не собирать контекст из календаря, чата и набора адресов.
Внутри каждой доски темы разделены на страницы. У страницы есть название и миниатюра; по большой доске работает поиск. Страницы можно менять местами и дублировать, а часто используемые заготовки — сохранять как шаблоны. Импорт `.excalidraw` оставляет возможность начать не с пустого листа.
На уровне интерфейса это выглядит как обычная боковая навигация. На уровне хранения это принципиальная граница.
Одна страница — одна сцена
Каждая страница хранится отдельной сценой. Сначала клиент получает лёгкие сводки и миниатюры, а полный набор объектов — только для выбранной страницы. Изображения загружаются порциями около видимой области.
Это не попытка незаметно ограничить доску. Это способ не заставлять устройство открывать весь архив только потому, что пользователю нужна одна сегодняшняя тема.
Разделение даёт понятную единицу работы:
- список страниц отвечает за поиск и навигацию;
- выбранная сцена отвечает за текущее рисование;
- миниатюра помогает узнать тему до загрузки полного содержимого;
- локальный черновик защищает незавершённую работу при проблемах со связью;
- индикатор соединения помогает отличить совместную работу от момента, когда связь потеряна.
Сам редактор основан на Excalidraw. В нём есть свободное рисование, линии, стрелки, фигуры, текст, ластик, масштаб и выделение. Для предметных занятий сверху добавляются сетка, формулы, графики, геометрические и языковые инструменты. Но архитектурно для нас важнее не количество кнопок, а то, какой объём данных нужен для открытия конкретной темы.
Страницы — не бесплатная абстракция
У решения есть цена. Появляется навигация, которую нужно сделать понятной. Нужно создавать миниатюры, хранить порядок страниц, поддерживать поиск, дублирование и шаблоны. Пользователь должен придумать названия, по которым спустя месяц узнает тему.
Но эта сложность находится в явном интерфейсе. Альтернатива — скрытая сложность одного гигантского файла, которая проявляется позже: долгой загрузкой и хаотичным поиском по поверхности.
Мы выбрали явную структуру. Она совпадает с тем, как устроен учебный материал: одна доска сохраняет контекст предмета, а отдельные страницы соответствуют темам и этапам работы.
Автосохранение должно быть видно, а не просто существовать
Долгоживущая доска бесполезна, если человек не понимает, сохранилась ли последняя схема. Локальный черновик помогает пережить обрыв связи, но интерфейс всё равно должен сообщать, когда соединение потеряно. А автосохранение нужно проверять отдельно: закрытая вкладка или обновление страницы не должны стирать предыдущую работу.
На телефоне эта обратная связь особенно важна: места меньше, соединение может меняться, а рабочие действия нельзя прятать за обрезанными кнопками. В release-чеклисте UrokDesk доска проверяется вместе с остальными основными сценариями на экранах 390×844 и 430×932. Критерий здесь не «десктоп ужался», а возможность продолжить работу.
Долгоживущая доска при этом не должна превращаться в архив переписки. Условие домашнего задания, решение ученика и комментарий преподавателя остаются в карточке ДЗ, а нужный файл можно открыть на доске для совместного разбора. Так учебный контекст связан, но у каждого объекта сохраняется своя роль.
Как проверять доску, а не красивый одиночный редактор
Совместность нельзя доказать скриншотом. Минимальная приёмка должна включать неудобные сценарии:
- Открыть одну страницу в двух браузерах и сделать серию изменений с обеих сторон.
- На одном устройстве временно отключить сеть, продолжить работу и проверить восстановление без дубликатов.
- Добавить несколько изображений и PDF, затем перезагрузить страницу.
- Найти старую тему по названию и миниатюре, как будто к ней вернулись через месяц.
- Попробовать открыть прямую ссылку из чужого аккаунта.
Последний пункт относится не к производительности, а к границам продукта. В нашем release-чеклисте ожидаемое поведение для чужих прямых URL — ответ 403/404 без краткого показа чужих данных. Постоянная ссылка удобна только тогда, когда постоянство не отменяет проверку доступа.
Такой прогон полезнее демонстрации, в которой один человек рисует пару фигур в одной вкладке. Он одновременно проверяет синхронизацию, восстановление, сохранение вложений, навигацию и права.
Что из этого можно забрать в другой продукт
У этой истории есть несколько выводов, которые не зависят от репетиторов и Excalidraw.
Долгоживущий объект лучше связывать с рабочим контекстом, а не с отдельным событием. В нашем случае доска относится к ученику и предмету, а урок лишь открывает продолжение работы.
«Бесконечный» интерфейс не обязан означать один бесконечный файл. Пользователь может воспринимать доску как единое пространство, пока данные разделены на понятные страницы.
Граница загрузки должна совпадать с единицей внимания. Если сейчас открыта одна тема, нет причины загружать полные сцены всех остальных тем.
Состояние сохранения — часть продукта. Локальный черновик, соединение и автосохранение отвечают на разные вопросы и должны проверяться отдельно.
Проверять нужно отказные сценарии. Второй браузер, обрыв сети, тяжёлые вложения и чужая прямая ссылка расскажут об архитектуре больше, чем идеальный одиночный сеанс.
Поэтому от одной бесконечной сцены мы отказались не ради красивой панели со страницами. Нам нужна была доска, к которой можно возвращаться неделями и месяцами, не превращая каждый вход в загрузку всего учебного года. Страницы дали этой идее техническую границу — и одновременно сделали старый материал заметным для человека.
Примечание: структуру и редактуру текста мне помог проверить ИИ. Архитектурные решения, выводы и проверка интерфейса — мои; интерфейсные скриншоты сделаны из текущей версии UrokDesk на демонстрационных данных.
Обложка — отдельная авторская редакционная иллюстрация и не изображает интерфейс продукта.
Ниже — три реальных состояния текущего интерфейса UrokDesk на демонстрационных данных: библиотека постоянных досок, рабочая сцена и переход от проверки ДЗ к совместному разбору.