Спроектируй совместный редактор
Вопрос
Спроектируй фронтенд совместного редактора документов как Google Docs: несколько человек правят одновременно, видны курсоры, есть история и офлайн. Пройди этапы: требования, оценка нагрузки, API, данные, компоненты, узкие места.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Требования: одновременное редактирование, курсоры и выделения других, комментарии, история версий, офлайн, права доступа
Оценка: десятки одновременных редакторов, документы до сотен страниц, частые мелкие операции (каждое нажатие)
API: WebSocket для операций и присутствия (awareness), REST для загрузки снапшота и версий
Данные: CRDT (Yjs/Automerge) или OT, снапшоты + журнал операций, локальная копия в IndexedDB
Компоненты: редактор на ProseMirror/Lexical/Tiptap с привязкой к CRDT, слой курсоров, панель комментариев
Узкие места: слияние конфликтов, производительность больших документов (виртуализация страниц), батчинг операций, восстановление после офлайна, размер истории
Что могут спросить следом
- Чем CRDT отличается от OT?
- Как показать курсоры, не нагружая сеть?
- Как сделать undo только своих правок?
Разбор
Требования: несколько человек правят один документ, видят курсоры друг друга, могут работать офлайн, есть комментарии и история версий, права на чтение и редактирование. Нагрузка: каждое нажатие это операция, редакторов может быть десятки, документ большой, поэтому операции надо батчить и не пересылать документ целиком. API: WebSocket, по которому идут операции и отдельный канал присутствия с курсорами, REST для загрузки снапшота и списка версий. Модель данных главная часть: беру CRDT, например Yjs, потому что правки сходятся в любом порядке, это даёт офлайн без сервера-арбитра; OT тоже вариант, но требует центрального упорядочивания. Локально документ хранится в IndexedDB, при восстановлении сети синхронизируются только разницы. Компоненты: редактор на ProseMirror или Tiptap с привязкой к Yjs, слой удалённых курсоров, панель комментариев с якорями на позиции. Узкие места: большие документы рендерю постранично, курсоры отправляю с троттлингом, undo делаю только для своих операций, историю периодически сжимаю снапшотами.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.