A small demo recreates why Figma-style collaborative editing looks seamless(qiita.com)
Writing language: KoreanRead in the original language
Plain summary
- When multiple people edit the same screen, your actions appear immediately without waiting for a server response. The screen is not redrawn when changes are confirmed, preventing visible jumps. The demo was built by Nishiura, a developer at Soyi Co., Ltd., by simplifying a 2019 design from Figma's official blog. It differs from Figma's actual internal implementation.
- When this handling is turned off in the demo, a node being dragged falls behind the mouse and moves jerkily. The median server round-trip time measured by the author was about 5ms locally and about 150ms for the demo on Render. The difference was more noticeable with greater latency.
- Because there is only one server, changes are processed in arrival order. If the same property is edited simultaneously, the value processed later remains. Only changes that create a circular structure in which parent and child point to each other are rejected, and that user's screen is rolled back.
- The author concluded that using arrival order alone without timestamps works only on the assumption that one server determines the order. If there are two or more servers, another mechanism is needed to determine the order.
Editorial opinion
O: Developers building collaborative interfaces may find it useful to compare drag responsiveness in the web demo with screen jump prevention turned on and off.
X: The demo does not distinguish duplicate ordering values when items are inserted concurrently between the same two elements, so a separate ordering mechanism is needed in a real implementation.
Writing language: Korean
Found on
Qiita ↗ / Published by source
Have you run into something like this? Tell us in a line or two what you did. You do not need to know the product.