Básicos de CRDT para Diseñadores de Producto

Descubra por qué los CRDT son la tecnología que permite aplicaciones como Figma o Notion, y cómo afectan su forma de diseñar interfaces colaborativas y offline-first.

info Definición Rápida
Los CRDT (Conflict-free Replicated Data Types) son estructuras de datos que permiten que múltiples usuarios realicen cambios simultáneos de forma independiente y que, al sincronizarse, todos lleguen al mismo estado final automáticamente sin necesidad de una autoridad central o resolución manual de conflictos. Es la tecnología que hace posible la colaboración en tiempo real moderna.

¿Por qué el Diseñador debe saber qué es un CRDT?

Tradicionalmente, en las aplicaciones web, el servidor era “la única fuente de verdad”. Si querías cambiar algo, le pedías permiso al servidor y esperabas su respuesta de “OK”.

Con los CRDT, cada dispositivo de cada usuario es una fuente de verdad. Esto cambia radicalmente cómo diseñamos la experiencia de usuario (UX):

  • Cero Latencia: El usuario ve su cambio al instante sin esperar al servidor.
  • Multijugador Real: Decenas de personas pueden editar el mismo objeto a la vez.
  • Offline Indulgente: Puedes trabajar sin internet y, al reconectar, tus cambios se mezclan mágicamente con los de tus compañeros.

El Concepto: “Merge Automático” e Inteligente

Imagina que dos usuarios están editando un mismo círculo en una pizarra digital:

  • El Usuario A cambia el color a Rojo mientras está en el metro con mala conexión.
  • El Usuario B mueve el círculo 50px a la derecha en su oficina con fibra óptica.

Cuando ambos vuelven a estar online, un sistema basado en CRDT no obliga a elegir una versión. Simplemente aplica ambas: el círculo termina siendo Rojo y estando 50px a la derecha. El conflicto se ha resuelto matemáticamente sin que el usuario tenga que ver un modal de error.

Implicaciones Críticas para el Diseño de Producto

Diseñar para un sistema basado en CRDT requiere una mentalidad diferente a la del diseño web clásico:

1. Actualizaciones Optimistas (Optimistic UI)

Ya no necesitas mostrar un spinner de carga cada vez que el usuario hace click. El CRDT asume que el cambio es válido y lo muestra al instante. Solo si hay un error catastrófico (muy raro con CRDT), se mostrará un estado de “Rollback” o deshacer.

2. Gestión de la Intención del Usuario

Como diseñador, debes pensar en la atómica de las acciones. Si dos usuarios editan el mismo campo de texto:

  • ¿Queremos que el sistema guarde la versión que gane?
  • ¿O queremos que el sistema intente mezclar las letras de ambos (como en Google Docs)? El CRDT permite ambas, pero tú debes elegir cuál es la mejor experiencia para ese contexto específico.

3. Estados de Sincronización

Incluso si la tecnología es mágica, el usuario necesita feedback. Diseña microinteracciones que indiquen:

  • “Trabajando en local (Offline)”.
  • “Sincronizando cambios…”.
  • “Todo guardado y sincronizado”.

El Caso de Éxito: Figma

Figma es el ejemplo de oro del uso de CRDT (específicamente una implementación propia para su motor de diseño). Gracias a esto, puedes mover capas, cambiar colores y ver los cursores de tus compañeros moviéndose fluidamente en tu pantalla, incluso con conexiones mediocres.

Consejos de Mentor

  • Diseña para la colaboración, no solo para el individuo: Pregúntate: “¿Qué pasa si alguien más toca esto mientras yo lo hago?”. La respuesta debe ser una solución visual, no un mensaje de error.
  • Aprovecha la libertad del Offline: No limites las funcionalidades de tu app si no hay internet. Deja que el usuario siga creando; el CRDT se encargará del resto cuando vuelva la conexión.
  • Colabora con Ingeniería: Los CRDT son complejos de implementar de forma nativa. Entiende si tu equipo está usando CRDT, Transformación Operacional (OT) o bases de datos clásicas, ya que esto cambiará lo que puedes o no prometer a nivel de UX.

Recursos y Herramientas

conflict-resolution presence-modeling command-pattern offline-first-flows optimistic-updates-rollback