Обзор моей работы
RedBoard — это демонстрация приложения для совместной доски, управляемого функциями реального времени Redis.
Я был очарован технологией многопользовательского редактирования Figma с 2019 года, когда они опубликовали статью о том, как она работает. Я хотел использовать этот хакатон как возможность попытаться реализовать минимальное воспроизведение этой технологии, используя все, что я мог почерпнуть из этой статьи и некоторых других материалов, которыми Figma поделилась публично. Я благодарен их команде инженеров за то, что они нашли время поделиться со всеми нами тем, что они создали и чему научились!
Высокоуровневый дизайн RedBoard в значительной степени основан на этой диаграмме архитектуры, представленной командой Figma для демонстрации использования FigJam для создания таких диаграмм, но, конечно, значительно упрощен и использует только Redis для хранения и обмена сообщениями. Журналирование реализовано с помощью потоков Redis, а контрольные точки складывают эти потоки в значения RedisJSON. На этой диаграмме не показано присутствие, или трансляция в реальном времени действий, выполняемых другими пользователями на том же форуме. Присутствие реализовано с помощью Pub/Sub.
Бэкэнд реализован с помощью Redis и Rust, а фронтэнд — с помощью React и Recoil, он же стек RRRR 🙂 . Они взаимодействуют между собой с помощью двухфазного протокола через WebSocket-соединение, а бэкенд-приложение представляет собой, по сути, очень простое хранилище документов в реальном времени с использованием многопользовательской стратегии координации изменений Figma.
Этот проект стал отличным учебным опытом, и, если не считать всего остального, он помог мне по-настоящему осознать, насколько сложно построить подобную систему с качеством производства и в больших масштабах. Кроме того, использование Redis для обработки всех необходимых данных вдохновило меня на некоторые новые способы использования Redis в моей профессиональной работе в StructionSite.
Категория заявки:
Причудливые дикие карты
Используемый язык
Rust
Ссылка на код
lukewestby / redboard
lukewestby / redboard Работа для хакатона Redis/DEV 2022 года
RedBoard
Доска для совместной работы, управляемая Redis и вдохновленная Figma. Пожалуйста, ознакомьтесь с моим сообщением о проекте для объяснения моих целей и вдохновения для этого проекта.
Как это работает
Бэкенд-приложение — это, по сути, очень простое, универсальное JSON-хранилище реального времени. Оно позволяет нескольким клиентам изменять групповой JSON по ID таким образом, что последняя запись, полученная сервером, всегда выигрывает, и все клиенты получают инкрементное уведомление о правильном состоянии объектов. Визуальная функциональность приложения для конечного пользователя строится поверх этого хранилища, но хранилище ничего не знает о значении объектов, которые оно хранит.
Некоторые важные термины:
- доска: коллекция объектов, доступных для просмотра, которые могут одновременно редактировать многие люди.
- Объект: отдельный визуальный элемент на доске
- Изменение: структурированное представление редактирования объекта.
{ type: "Insert", id: "<UUID>", "object": { "property1": "hello", ... } }- …
Дополнительные ресурсы / информация
- Заметка в блоге о многопользовательской технологии Figma: https://www.figma.com/blog/how-figmas-multiplayer-technology-works/
- Диаграмма многопользовательской архитектуры Figma: https://www.figma.com/community/file/989634471195357925
- Recoil: https://recoiljs.org/
- Ознакомьтесь с Redis OM, клиентскими библиотеками для работы с Redis как многомодельной базой данных.
- Используйте RedisInsight для визуализации данных в Redis.
- Зарегистрируйтесь для получения бесплатной базы данных Redis.