Aprendizado interativo com Yjs

• Introdução

  • Learn Yjs é uma série de tutoriais interativos para aprender a criar aplicações colaborativas em tempo real usando a biblioteca CRDT Yjs.
  • Esta própria página é um exemplo de aplicação colaborativa em tempo real, mostrando em tempo real o cursor de outros usuários.
  • Ao clicar na planta, as alterações também são refletidas para os outros usuários.

• Fundamentos do Yjs

  • Começa com os conceitos básicos do Yjs e aborda técnicas para lidar com estado em aplicações distribuídas.
  • Explica o que é um CRDT e por que usá-lo.
  • Apresenta problemas que podem ocorrer em aplicações colaborativas e como evitá-los.
  • É possível experimentar como o Yjs funciona por meio de demos navegáveis e exercícios de código.

• Exemplos de demo

  • Cada caixa representa um computador separado (cliente) executando uma aplicação que usa Yjs.
  • Ao interagir em um cliente, a sincronização acontece automaticamente nos outros clientes.
  • É possível ajustar a latência da rede com o controle deslizante no canto superior esquerdo para observar a interação entre os clientes.

• Sobre o site

  • Learn Yjs é um projeto da Jamsocket, uma plataforma para criar apps em tempo real.
  • O cursor em tempo real e o jardim multiplayer desta página são executados com Y-Sweet, um servidor Yjs de código aberto.
  • O site foi construído com Astro, e as demos e exercícios interativos foram feitos com React e Yjs.

[GN⁺]

Comentários do Hacker News

• Um desenvolvedor da Jamsocket criou um tutorial interativo para ajudar a construir apps colaborativos e local-first usando Yjs. Yjs é uma biblioteca CRDT e tem uma curva de aprendizado para quem não está familiarizado com trabalho com estado distribuído. O tutorial é intuitivo e foi projetado para construir entendimento desde o básico, com demos exploráveis e exercícios de programação

• Os recursos generalizados do Yjs podem ficar complexos, especialmente quando vários objetos se relacionam entre si. O modelo simples de colocar tudo em um único documento causa o problema de precisar transmitir o banco de dados inteiro. Por isso, é necessário dividir os itens em objetos individuais e persisti-los diretamente

  • É possível resolver isso usando Subdocuments, mas alguns Providers não oferecem suporte. O protocolo principal do Yjs não está documentado, e o código relacionado está espalhado

• O Yjs tem a vantagem de facilitar a obtenção de resultados P2P. Porém, persistência no backend, resolução de conflitos e rebobinar o histórico são desafios de engenharia difíceis. Havia interesse em uma boa experiência com editores em bloco como Platejs, e soluções como Liveblocks tentam simplificar a experiência de desenvolvimento

• Há um app em desenvolvimento com Yjs que precisa funcionar offline. Não é um app de colaboração em tempo real, mas, se o servidor for tratado como um colaborador, dá para imaginar vários casos de uso

• Yjs foi usado em um projeto pequeno, e o lado do cliente foi fácil de aprender e usar. No lado do servidor, quase não havia exemplos em linguagens além de Node, então foi usada persistência baseada em LevelDB com uma pequena modificação no y-websocket do Node

• A técnica chamada indexação fracionária usa índices como frações em vez de inteiros. Há dúvida sobre quantas vezes isso pode ser usado

• O controle deslizante de latência na demo interativa parece funcionar como um buffer de debounce, e não como latência de rede. É difícil entender por quê

• A demo interativa é linda. Fica a curiosidade se existe alguma biblioteca usada para construí-la

• Consegui um trevo de quatro folhas, mas alguém estragou tudo. Méritos ao criador. Foi divertido

• O jogo da imagem do banner é infantil, mas divertido