Aprendizado interativo com Yjs

• O learn.yjs.dev está atualmente com a implantação temporariamente pausada, então não é possível acessar o conteúdo de aprendizado
• Além do status This deployment is temporarily paused, a página não informa o motivo da pausa
• Também não foi divulgada a data ou previsão para a retomada da implantação
• No momento, não é possível verificar na página a estrutura, os recursos e os exemplos do conteúdo de aprendizado de Yjs
• O único ponto que pode ser confirmado agora é que o learn.yjs.dev está em estado de pausa temporária

[GN⁺]

Comentários do Hacker News

• Olá, HN! Sou um desenvolvedor da Jamsocket que criou isto. Se você não está familiarizado com Yjs, pense nele como uma biblioteca CRDT para criar apps colaborativos e local-first
  Se você nunca trabalhou com estado distribuído, há uma boa curva de aprendizado, e até mesmo algo como incrementar um contador de “hello world” em demos de frameworks JavaScript fica complicado quando vários clientes entram em cena
  Muitos tutoriais seguem a linha de “instale a integração desta biblioteca com um editor de texto e seu app está pronto”, então não oferecem um modelo mental do que realmente está acontecendo
  Por isso criei o Learn Yjs, um tutorial interativo de Yjs, e incluí muitos demos exploráveis e exercícios de código para que até quem está tendo o primeiro contato com desenvolvimento local-first consiga entender de forma intuitiva

  • Eu tinha interesse em CRDTs e recursos de colaboração, mas sempre que tentava começar a maior barreira era justamente esse tipo de tutorial de “é só instalar a biblioteca e pronto”
    Também parece um pouco mais difícil encontrar hospedagem gratuita para WebSocket, e os tutoriais de CRDT que já existiam não ajudaram muito
  • Queria saber se existe algum exemplo de como criar um app local-first
    Estou trabalhando com HTML/JS puro e Alpine, e também queria saber se dá para usar Yjs em apps assim
  • Queria saber se isso também funciona com Yrs [0] ou se é um projeto separado
    E também se o Y-Sweet funciona com outras bibliotecas CRDT, como Automerge ou Loro, ou se é exclusivo do Yjs
    Todas parecem trocar arquivos binários com estruturas parecidas, então fiquei curioso sobre o nível de compatibilidade do Y-Sweet com implementações de CRDT semelhantes
    [0] https://github.com/y-crdt/y-crdt
  • Ficou muito bem feito. Estou curioso para ver se finalmente vou conseguir entender CRDTs com isto, e pretendo ver tudo no fim de semana

• Yjs é bom e facilita obter resultados P2P
  Mas o backend do Yjs, persistência, resolução final de conflitos em casos em que um editor ficou offline por tempo demais e rebobinar histórico parecem desafios de engenharia difíceis de resolver
  Sempre quis uma boa experiência em editores em blocos como Platejs https://platejs.org/
  Soluções como Liveblocks https://liveblocks.io/text-editor são boas tentativas de simplificar a experiência de desenvolvimento, mas na maioria dos casos você acaba abrindo mão de parte do controle sobre os dados
  Sempre que se busca por CRDT no HN aparecem bons resultados e interesse no tema, mas do lado de backend open source não parecia haver muitas boas opções. Já conferi várias vezes no passado, então se deixei passar algo seria bom saber
  https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=tru...
  A maioria espera que funcione pelo menos como Google Docs ou Notion, e do ponto de vista do desenvolvedor quer que tudo seja armazenado de forma privada em algo parecido com um Postgres JSONB, sem precisar se aprofundar demais nos detalhes de implementação

  • Em teoria, bastaria distribuir patches serializados, mas em um backend real talvez também seja preciso conhecer o estado atual do documento, a identidade do usuário e até certo nível de controle de acesso
    Já quis usar Y.js várias vezes em um backend Go, mas foi difícil encontrar uma implementação de referência simples, e por limitações de tempo eu acabava desistindo sempre
    Mesmo voltando a checar isso ao longo de vários anos, fora do ecossistema Node.js ainda parece difícil

• Já usei Yjs em um pequeno projeto paralelo no passado. Do lado do cliente, foi bem fácil de aprender e usar
  No lado do servidor, eu queria fazer deploy como um único binário, mas quase não havia exemplos em linguagens que não fossem Node, como exemplos com Yrs, o port em Rust
  No fim, modifiquei um pouco o https://github.com/yjs/y-websocket e adicionei persistência com LevelDB, mas para mim isso não era o ideal
  Queria saber se existem bons materiais sobre como implementar o lado do servidor com persistência em uma linguagem como Rust
  Pelo que lembro, o material existente para clientes era muito voltado à integração com editores de texto, então este tutorial é realmente útil. Como eu não usei integração com editor de texto, tive que ir descobrindo as coisas por conta própria

  • Y-Sweet[1] talvez seja exatamente isso. É o servidor Rust open source que roda o banner do Learn Yjs
    Usa S3 ou sistema de arquivos local como armazenamento e é compilado como um binário de alguns MB com linkagem musl
    https://github.com/jamsocket/y-sweet

• Dizem que é a técnica de indexação fracionária, “em que o índice é uma fração em vez de um inteiro”, mas fiquei curioso para saber quantas vezes isso pode ser usado antes de parar de funcionar

  • Testei eu mesmo e foram 1075 vezes, o que não é um número tão grande, então isso pode acabar sendo um problema importante para esta biblioteca
    O código de teste é o seguinte:
    let left = 0, right = 1
    let rightPrevious = 2
    let counter = 0;
    while (right > left && right < rightPrevious) {
    rightPrevious = right;
    right /= 2;
    counter++
    }
    console.log(counter)
    Dei só uma olhada bem rápida no repositório, mas não encontrei onde esse problema é tratado, e não tive tempo de investigar a fundo. Se isso for um problema real, eu poderia até ajudar a resolver

• No momento estou usando Yjs enquanto crio um app que precisa de funcionamento offline
  Na prática não é um app de colaboração em tempo real, mas se você pensar no servidor como um colaborador e no app como outro colaborador, fica fácil imaginar casos de uso

• O ponto que eu nunca consegui superar com Yjs é que, ao generalizar o exemplo de mover itens no app de tarefas deste tutorial, tudo fica complexo rápido demais
  Quando há vários objetos relacionados entre si, dá vontade de colocá-los no mesmo Document, e manter essas relações em estado sincronizado traz muitas armadilhas, como a indexação fracionária do tutorial
  Aí, quando os itens se acumulam em escala de banco de dados, esse modelo de brinquedo de colocar tudo em um único documento passa a significar que, para ler qualquer item, é preciso enviar o banco inteiro e todo o seu histórico para quem está lendo
  No fim, é preciso separar os itens em objetos distintos e persistir isso manualmente, mas fora este tutorial [0] não há documentação e, dando o spoiler, há anos é só uma página vazia dizendo “Work in Progress - come back later”
  Então, mesmo que você tente criar e gerenciar um Provider, a situação da documentação é a mesma [1]
  Aí você encontra os Subdocuments e se anima achando que talvez exista uma solução para esse problema comum [2], mas alguns Providers não conseguem lidar com relações entre subdocumentos, e outros nem sequer suportam subdocumentos. No fim, você precisa criar seu próprio Provider, voltando ao problema da falta de documentação
  Quando você tenta ler o código, acaba percebendo que o núcleo do Yjs é o protocolo. Só que esse protocolo, que é a essência do Yjs, também não está totalmente documentado e está espalhado por vários trechos de código bem peculiares. Isso se você não considerar como documentação um artigo sobre como funcionava o antecessor do Yjs há 10 anos
  Não era para ser uma reclamação, mas passei tempo demais ao longo de anos tentando fazer isso funcionar, e a distância entre demos de brinquedo no estilo “funciona como mágica!” e algo real é grande demais. E a documentação dessa parte ficou vazia por 10 anos, além do “Work in Progress”
  Espero que empresas como a do autor deste texto, que estão tentando monetizar Yjs, ajudem a preencher essa lacuna
  [0] https://docs.yjs.dev/tutorials/persisting-the-document-to-a-...
  [1] https://docs.yjs.dev/tutorials/creating-a-custom-provider
  [2] https://docs.yjs.dev/api/subdocuments
  [3] Eu esperava que a situação tivesse mudado enquanto escrevia isto, mas toda a documentação ainda parece estar em andamento como há 5 anos, e o suporte a subdocumentos parece igual também

• Fiquei confuso porque, na demo interativa, o controle deslizante de latência parece funcionar como um buffer de debounce, e não como latência de rede. Não entendo por que foi feito assim

  • Escolhi o modelo de latência mais simples que ainda fosse suficiente para mostrar os problemas que surgem quando o estado muda em vários lugares
    A vantagem desse método é que dá para implementá-lo sem esconder nenhum estado do leitor. O gráfico de pizza mostra exatamente o único estado interno que existe
    O objetivo não era simular a rede com precisão, mas criar intuição

• A demo interativa é linda. Fiquei curioso sobre quais bibliotecas foram usadas para criá-la

  • O site inteiro foi feito com Astro, e a demo é uma “ilha interativa” feita em React
    A demo realmente roda Yjs por dentro. Cada “cliente” tem seu próprio documento, e quando o usuário clica, os documentos são mesclados manualmente entre si depois de simular atraso com setTimeout. Há também um terceiro documento para a linha do tempo no centro
    Além disso, usei dnd kit [1] para o arrastar e soltar na demo de tarefas, Motion [2] para animações e CodeMirror [3] no editor de texto
    [1] https://dndkit.com
    [2] https://motion.dev
    [3] https://codemirror.net

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

  • Lembra uma brincadeira como o place do antigo Reddit
    Team purple ftw:
    https://imgur.com/a/Oxc6jUA

• Finalmente consegui fazer um trevo de quatro folhas, mas depois de uns 2 minutos alguém estragou tudo
  Edit: espera, para onde foi todo mundo? Acho que nós quebramos algo ou fui bloqueado. Ainda assim, aplausos para quem fez isso. É um negócio muito legal

  • Com certeza você não foi bloqueado. Parece que por um momento havia menos gente, e agora estou vendo bastante cursores de novo
    Aliás, existem mais dois emojis secretos