Overview of My Submission
RedBoard is a demonstration of a collaborative whiteboard app driven by Redis's real-time features.
I've been fascinated by Figma's multiplayer editing technology since 2019 when they published this article about how it works. I wanted to use this hackathon as an opportunity to attempt to implement a minimal reproduction of that technology using as much as I could infer from that article and some other material that Figma has shared publicly. I am grateful to their engineering team for taking the time to share what they have built and learned with all of us!
The high-level design of RedBoard is based heavily on this architecture diagram shared by the Figma team to demonstrate using FigJam to make such diagrams, but is of course greatly simplified and uses only Redis for storage and messaging. Journaling is implemented using Redis Streams, and checkpointing folds those streams into RedisJSON values. Not depicted in that diagram is presence, or the real-time broadcasting of actions taken by other users on the same board. Presence is implemented using Pub/Sub.
The backend is implemented using Redis and Rust, and the frontend is implemented with React and Recoil, a.k.a. the RRRR stack 🙂. The two communicate using a two-phase protocol over a WebSocket connection, and the backend app essentially constitutes a very simple real-time document store using Figma's multiplayer change coordination strategy.
This project was a great learning experience and if nothing else it helped to me truly recognize just how difficult it is to build a system like this with production quality and at large scale. Furthermore, using Redis to handle all of the data needs provided inspiration for some new ways I plan to use Redis in my professional work at StructionSite.
Submission Category:
Wacky Wildcards
Language Used
Rust
Link to Code
lukewestby
/
redboard
Submission for the 2022 Redis/DEV hackathon
RedBoard
A collaborative whiteboard driven by Redis, inspired by Figma. Please see my submission post for an explanation of my goals and inspiration for this project.
How it works
The backend application is essentially a very simple, generic real-time JSON store. It allows multiple clients to modify a group JSON by ID such that the last write received by the server always wins, and all clients are incrementally notified of the correct state of the objects. The visual functionality of the end-user application is built on top of this store, but the store knows nothing about the meaning of the objects that it stores.
Some important terms:
- Board: a collection of viewable objects that many people can edit at once
- Object: an individual visual item in a board
- Change: a structured representation of an edit for an object
{ type: "Insert", id: "<UUID>", "object": { "property1": "hello", ... } }- …
Additional Resources / Info
- Blog post about Figma's multiplayer technology: https://www.figma.com/blog/how-figmas-multiplayer-technology-works/
- Figma multiplayer architecture diagram: https://www.figma.com/community/file/989634471195357925
- Recoil: https://recoiljs.org/
- Check out Redis OM, client libraries for working with Redis as a multi-model database.
- Use RedisInsight to visualize your data in Redis.
- Sign up for a free Redis database.
Top comments (0)