Collaborative Drawing: Conflicts, Presence, and What to Sync

👉 Frontend System Design Essentials — Course: https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials — Book: https://leanpub.com/frontend-system-design-essentials/ User A drags a rectangle left. User B drags the same rectangle right. Which position should everyone see? WebSockets can broadcast updates. That is not the hard part. The hard part is keeping multiple people editing the same scene without losing changes, creating invalid state, or making the interaction feel slow. 00:00 Whose edit wins when two users move the same rectangle? 01:18 About the channel 01:35 What should we synchronize? 01:58 Send the change, not the whole scene 02:31 The size of an update changes the size of a conflict 04:01 Independent changes can both survive 04:18 Real conflicts need a policy 05:23 When one operation makes another invalid 06:14 Domain rules decide what counts as a conflict 07:36 Don't send every pointer move 08:10 Local smoothness vs network freshness 09:30 Presence is different from document state 10:57 Where CRDT and OT actually fit 12:27 Bringing the architecture together 13:19 Four ideas to remember This is Part 2. We look at what to synchronize, why the size of an update determines the size of a conflict, how concurrent edits are not all the same, why domain rules matter, how continuous interactions should send fewer updates than they render, and why presence is a different channel from document state. CRDT and OT show up as tools — after the operation model and product rules are clear. You'll learn: Why sending the whole scene on every change does not scale How update granularity sets conflict granularity Three kinds of concurrent change: independent, real conflict, and dependency Why conflict resolution is partly domain modelling, not only distributed systems How to keep local drag smooth while syncing less often — and why presence ≠ document state Final takeaway: Don't start with "we should use CRDT." Start with what the operations mean, what can merge, and what a valid document looks like. Then choose the mechanism. 📘 MY BOOKS & COURSES 👉 Frontend System Design Essentials (Course): https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials (Book): https://leanpub.com/frontend-system-design-essentials/ 👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971 👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react 📩 STAY CONNECTED 🧠 Newsletter (system design & clean code): https://juntao.substack.com 🌐 Website & Blog: https://icodeit.com.au 🐦 Twitter / X: http://twitter.com/JuntaoQiu 📺 YouTube (subscribe): https://www.youtube.com/@icodeit.juntao #frontend #systemdesign #collaboration #crdt #figma #javascript #webdevelopment