تخطَّ إلى المحتوى

Design tooling

نموذج مرجعي

Real-time collaborative editing on 10,000-node component trees

A collaborative design platform with operational transform for conflict-free concurrent editing, and a virtualised renderer that keeps enterprise-scale component trees interactive.

<50msp99 operation broadcast

لمحة سريعة

المدة
43 أسبوعاً
حجم الفريق
4 أشخاص
نوع التعاقد
بناء جديد
نوع المشروع
نظام تصميم
القطاع
B2B SaaS

الوضع

التحدي

A component tree is a deeply nested mutable structure, and concurrent edits to one corrupt it unless conflicts are resolved properly. Separately, enterprise design systems with 10,000+ components were freezing browsers for three to five seconds.

ما الذي فعلناه

Operational transform for correctness, virtualisation and a worker thread for the rendering cost.

القرارات التي صنعت الفارق

  • Operational transform with vector clocks

    Concurrent edits serialised and conflicts detected explicitly, with an immutable reducer on the client so rollback is trivial rather than a special case.

  • Diffing moved off the main thread

    A virtualised tree renderer over react-window, with diff computation in a Web Worker. The freeze was never the tree size, it was doing the work where the paint happens.

ما الذي تغيّر

p99 operation broadcast latency
<50msp99 operation broadcast latency
node trees without degradation
10K+node trees without degradation
data loss incidents
0data loss incidents
less time documenting components
60%less time documenting components
  • 0 — across 10 months in production

Sub-50ms operation broadcast at p99, 10,000-node trees staying interactive, and ten months in production without a data loss incident.

الخدمات المستخدمة

  • Operational transform engine with vector clocks
  • Virtualised tree renderer with off-thread diffing
  • Versioned component snapshots with CI integration

ما الذي كنا سنفعله بشكل مختلف

لكل مشروع واحدة من هذه. ونشرها هو المقصد — فدراسة حالة بلا ندم فيها تسويق لا دليل.

OT and CRDTs look elegant on paper and the edge cases are brutal in practice. Starting with a narrow operation set and widening it as confidence grew was the only reason this shipped on time.