Aprendizaje interactivo con Yjs

• Introducción

  • Learn Yjs es una serie de tutoriales interactivos para aprender a crear aplicaciones colaborativas en tiempo real usando la biblioteca CRDT Yjs.
  • Esta misma página es un ejemplo de una aplicación colaborativa en tiempo real, donde el cursor de otros usuarios se muestra en tiempo real.
  • Si haces clic en las plantas, los cambios también se reflejan para otros usuarios.

• Fundamentos de Yjs

  • Comienza con los conceptos básicos de Yjs y aborda técnicas para manejar el estado en aplicaciones distribuidas.
  • Explica qué es un CRDT y por qué se utiliza.
  • Presenta los problemas que pueden surgir en aplicaciones colaborativas y cómo evitarlos.
  • Puedes experimentar cómo funciona Yjs mediante demos explorables y ejercicios de código.

• Ejemplo de demo

  • Cada cuadro representa una computadora independiente (cliente) que ejecuta una aplicación que usa Yjs.
  • Cuando interactúas en un cliente, se sincroniza automáticamente con los demás clientes.
  • Puedes ajustar la latencia de red con el control deslizante de la esquina superior izquierda para observar la interacción entre clientes.

• Presentación del sitio

  • Learn Yjs es un proyecto de Jamsocket, una plataforma para crear apps en tiempo real.
  • Los cursores en tiempo real y el jardín multijugador de esta página funcionan con Y-Sweet, un servidor Yjs de código abierto.
  • El sitio web fue construido con Astro, y los demos interactivos y ejercicios fueron creados con React y Yjs.

[GN⁺]

Comentarios en Hacker News

• Un desarrollador de Jamsocket creó un tutorial interactivo para ayudar a construir apps colaborativas y local-first con Yjs. Yjs es una librería de CRDT y tiene una curva de aprendizaje para quienes no están familiarizados con trabajar con estado distribuido. El tutorial es intuitivo y está diseñado para construir entendimiento desde lo básico mediante demos explorables y ejercicios de programación

• La funcionalidad generalizada de Yjs puede volverse compleja, especialmente cuando varios objetos están relacionados entre sí. El modelo simple de poner todos los elementos en un solo documento provoca el problema de tener que transferir toda la base de datos. Por eso se necesita una forma de dividir los elementos en objetos individuales y persistirlos directamente

  • Se puede resolver el problema usando Subdocuments, pero algunos Providers no lo soportan. El protocolo central de Yjs no está documentado y el código relacionado está disperso

• Yjs tiene la ventaja de permitir obtener resultados P2P con facilidad. Sin embargo, la persistencia en el backend, la resolución de conflictos y rebobinar el historial son desafíos de ingeniería difíciles. Se buscaba una buena experiencia con editores por bloques como Platejs, y soluciones como Liveblocks intentan simplificar la experiencia de desarrollo

• Se está desarrollando una app con Yjs que debe funcionar también sin conexión. No es una app de colaboración en tiempo real, pero si se considera al servidor como un colaborador, se pueden imaginar varios casos de uso

• Se usó Yjs en un proyecto pequeño, y del lado del cliente fue fácil de aprender y de usar. Del lado del servidor casi no había ejemplos en lenguajes distintos de Node, y se usó la persistencia basada en LevelDB con una ligera modificación de y-websocket de Node

• Una técnica llamada indexación fraccional consiste en usar fracciones en lugar de enteros como índices. Existe la duda de cuántas veces puede usarse

• El control deslizante de latencia en la demo interactiva parece funcionar como un búfer de debounce más que como latencia de red. Es difícil entender por qué

• La demo interactiva es hermosa. Hay curiosidad por saber si existe una librería usada para construirla

• Se obtuvo un trébol de cuatro hojas, pero alguien lo arruinó. Elogios para el creador. Es algo divertido

• El juego de la imagen del banner es infantil, pero divertido