Yjsを活用したインタラクティブ学習

 (learn.yjs.dev)
1 ポイント 投稿者 GN⁺ 2025-01-18 | 1件のコメント | WhatsAppで共有
  • learn.yjs.dev は現在 デプロイが一時停止 されており、学習コンテンツを確認できない
  • ページには This deployment is temporarily paused という状態以外に 停止の原因 は記載されていない
  • デプロイ再開の時期やスケジュールも公開されていない
  • Yjs 学習コンテンツの構成、機能、例は現在のページでは確認できない
  • 現時点で判断できる範囲は、learn.yjs.dev が 一時停止状態 にあるという点のみ

関連記事

1件のコメント

 
GN⁺ 2025-01-18
Hacker Newsの意見

  • Hey HN! これを作ったJamsocketの開発者です。Yjsになじみがなければ、協調機能やローカルファーストなアプリを作るためのCRDTライブラリだと思ってください
    分散状態を扱ったことがないと学習曲線はかなりあり、JavaScriptフレームワークのデモでいう「hello world」のようなカウンター増加でさえ、複数クライアントが絡むと厄介になります
    多くのチュートリアルは「このライブラリとテキストエディタ統合をインストールすればアプリ完成」という感じで、実際に何が起きているのかについてのメンタルモデルを与えてくれません
    そこで対話型のYjsチュートリアルであるLearn Yjsを作り、ローカルファースト開発に初めて触れる人でも直感的に理解できるよう、探索可能なデモやコーディング演習をたくさん入れました

    • CRDTと協調機能に関心がありましたが、入門するたびに最大の壁だったのが、まさに「ライブラリをインストールすれば終わり」式のチュートリアルでした
      WebSocketも無料ホスティングを見つけるのが少し難しそうで、既存のCRDTチュートリアルも大いに役立ちました
    • ローカルファーストアプリを作る例があるのか気になります
      素のHTML/JSとAlpineで作業しているのですが、こういうアプリでもYjsを使えるのかも知りたいです
    • これがYrs [0]とも動作するのか、それとも別プロジェクトなのか気になります
      また、Y-SweetがAutomergeやLoroのような他のCRDTライブラリとも動作するのか、それともYjs専用なのかも知りたいです
      どれもバイナリファイルをやり取りする構造が似ているように見えるので、Y-Sweetが類似のCRDT実装とどの程度互換性があるのか気になりました
      [0] https://github.com/y-crdt/y-crdt
    • 本当によくできています。これでついにCRDTを理解できるか楽しみで、週末に最後まで見るつもりです

  • Yjsは良いし、P2Pの結果を得るのも簡単です
    ただしYjsのバックエンド、永続化、最終的な衝突解決（編集者の1人が長期間オフラインだった場合）、履歴の巻き戻しは、解くのが難しいエンジニアリング課題に見えます
    Platejs https://platejs.org/ のようなブロックエディタで、良い体験をずっと求めていました
    Liveblocks https://liveblocks.io/text-editor のようなソリューションが開発体験を単純化しようとしているのは良いのですが、多くの場合はデータのコントロール権を一部手放す必要があります
    HNでCRDTというキーワードを検索すると、いつも良い結果と関心が見えますが、オープンソースのバックエンド側には良い選択肢があまり見当たりませんでした。過去に何度も確認しましたが、見落としているものがあれば教えてほしいです
    https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=tru...
    多くの人は少なくともGoogle DocsやNotionのように動作することを期待していて、開発者としては細部の実装を深掘りしなくても、Postgres JSONBに似た形式で非公開に保存されることを望みます

    • 理論上はシリアライズされたパッチを配布するだけで済みますが、実際のバックエンドでは現在のドキュメント状態、ユーザーID、ある程度のアクセス制御まで一緒に把握する必要があるかもしれません
      GoバックエンドでY.jsを使いたいと思ったことが何度もありましたが、シンプルな参考実装を見つけるのが難しく、時間の制約で毎回諦めました
      数年にわたって確認し直しても、Node.jsの外では依然として難しく見えます

  • 以前、小さなサイドプロジェクトでYjsを使いました。クライアント側は学びやすく、使うのもかなり簡単でした
    サーバー側では単一バイナリとしてデプロイしたかったのですが、Nodeではない言語の例、たとえばRustポートであるYrsの例はほとんどない状態でした
    結局 https://github.com/yjs/y-websocket を少し修正し、LevelDBベースの永続化を付けましたが、自分の基準では最適ではありませんでした
    Rustのような言語で、永続化を含むサーバー側を実装する良い資料があるのか気になります
    記憶では、既存のクライアント資料はテキストエディタ統合にかなり偏っていたので、このチュートリアルは本当に有用です。テキストエディタ統合を使わなかったため、自分で手探りする必要がありました

    • Y-Sweet[1]が該当するかもしれません。Learn Yjsのバナーを動かしているオープンソースのRustサーバーです
      ストレージとしてS3またはローカルファイルシステムを使い、muslリンクされた数MBのバイナリにコンパイルされます
      https://github.com/jamsocket/y-sweet

  • 「インデックスを整数ではなく分数にする分数インデクシング手法」とのことですが、止まらずに何回使える必要があるのか気になります

    • 自分でテストしてみると1075回で、それほど大きな値ではないので、このライブラリの主要な問題になる可能性もありそうです
      テストコードは次のとおりです:
      let left = 0, right = 1
      let rightPrevious = 2
      let counter = 0;
      while (right > left && right < rightPrevious) {
      rightPrevious = right;
      right /= 2;
      counter++
      }
      console.log(counter)
      リポジトリをほんの少し見ただけですが、この問題が処理されている場所は見つけられず、深掘りする時間もありませんでした。実際のissueであれば、解決を手伝えるかもしれません

  • 今、オフライン動作が必要なアプリを作りながらYjsを使っています
    実際にはリアルタイム協調アプリではありませんが、サーバーを1人の共同作業者、アプリを別の共同作業者と考えると、活用例を簡単に思い浮かべられます

  • Yjsで最後まで越えられなかった点は、このチュートリアルのToDoアプリにおける項目移動の例を一般化すると、あまりにもすぐ複雑になってしまうこと
    相互に関係のある複数のオブジェクトがあると、同じDocumentに入れたくなるが、その関係を同期状態に保つには、チュートリアルの分数インデックスのような落とし穴が多い
    そうしてデータベース規模の項目がたまってくると、すべてを1つのドキュメントに入れるおもちゃモデルは、どの項目を読もうとする側にもDB全体とその履歴を送らなければならない、という意味になる
    結局、項目を別オブジェクトに分けて自前で永続化する必要があるが、ドキュメントはこのチュートリアル [0] 以外にはなく、ネタバレすると、何年も「Work in Progress - come back later」のままの空ページである
    そのためProviderを作って管理しようとしても、ドキュメントの状況は同じ [1]
    Subdocumentsを見つけて、このよくある問題の解決策があるのかと思って喜ぶが [2]、あるProviderはサブドキュメント間の関係を扱えず、別のProviderはサブドキュメント自体をサポートしていない。結局、自分でProviderを作る必要があり、ドキュメントがないという問題に戻る
    コードを読んでみると、結局Yjsの中核はプロトコルなのだと分かる。ところが、Yjsの本質であるそのプロトコルも完全にはドキュメント化されておらず、かなり独特なコードのあちこちに散らばっている。10年前のYjsの前身がどう動作していたかを扱った論文をドキュメントと見なさないのであれば、だが
    愚痴として書くつもりではなかったが、何年も動かそうとしてあまりに多くの時間を費やしてきたし、「魔法みたいに動きます！」的なおもちゃデモと、実際の何かとの間の隔たりが大きすぎる。その部分のドキュメントは10年間、「Work in Progress」以外は空だった
    この記事の筆者のように、Yjsで収益化を試みる企業がその隔たりを埋めてくれることを期待している
    [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] これを書きながら状況が変わっていることを願っていたが、すべてのドキュメントは5年前と同じく今も作業中で、サブドキュメント対応も同様のように見える

  • インタラクティブデモで、遅延時間スライダーがネットワーク遅延ではなくデバウンスバッファのように動作していて戸惑う。なぜこうしたのか理解できない

    • 複数の場所で状態が変更されるときに生じる問題を示すのに十分な、最も単純な遅延モデルを選んだ
      この方式の利点は、読者にどの状態も隠さず実装できることだ。円グラフは存在する唯一の内部状態をそのまま表示している
      正確なネットワークシミュレーションが目的ではなく、直感を作ることが目的である

  • インタラクティブデモが美しい。作るのにどのライブラリを使ったのか気になる

    • サイト全体はAstroで作り、デモはReactで作った「インタラクションの島」である
      デモでは実際に内部でYjsを動かしている。各「クライアント」が自分のドキュメントを持ち、ユーザーがクリックするとsetTimeoutで遅延をシミュレートした後、ドキュメント同士を手動でマージしている。中央のタイムライン用の3つ目のドキュメントもある
      そのほか、ToDoデモのドラッグ＆ドロップにはdnd kit [1]、アニメーションにはMotion [2]、テキストエディタにはCodeMirror [3]を使っている
      [1] https://dndkit.com
      [2] https://motion.dev
      [3] https://codemirror.net

  • バナー画像のゲームはばかばかしいけれど楽しい

  • ついに四つ葉のクローバーを作ったのに、2分ほどしたら誰かに台無しにされた
    追記: ちょっと待って、みんなどこに行った？ 私たちが壊したのか、私がブロックされたのかもしれない。それでも作った人には拍手を送りたい。すばらしいものだ

    • ブロックされたのは確実に違う。少し人が減ったようで、今はカーソルがかなりたくさん見えている
      ちなみに秘密の絵文字があと2つある