-
紹介
- Learn Yjsは、Yjs CRDTライブラリを使ってリアルタイム共同作業アプリケーションを構築する方法を学ぶインタラクティブなチュートリアルシリーズです。
- このページ自体がリアルタイム共同作業アプリケーションの例であり、他のユーザーのカーソルがリアルタイムで表示されます。
- 植物をクリックすると、変更内容が他のユーザーにも反映されます。
-
Yjsの基本
- Yjsの基本概念から始めて、分散アプリケーションで状態を扱う技術を取り上げます。
- CRDTとは何か、そしてそれを使う理由について説明します。
- 共同作業アプリケーションで発生しうる問題点と、それを避ける方法を提示します。
- 操作可能なデモとコード演習を通じて、Yjsの動作を体験できます。
-
デモ例
- 各ボックスは、Yjsを使用するアプリケーションを実行している別々のコンピューター（クライアント）を表します。
- あるクライアントで操作すると、他のクライアントにも自動的に同期されます。
- 左上のスライダーでネットワーク遅延時間を調整し、クライアント間の相互作用を確認できます。
-
サイト紹介
- Learn Yjsは、リアルタイムアプリを構築するプラットフォームであるJamsocketのプロジェクトです。
- このページのリアルタイムカーソルとマルチプレイヤー庭園は、オープンソースのYjsサーバーであるY-Sweetによって動作しています。
- WebサイトはAstroで構築されており、インタラクティブなデモと演習はReactとYjsで作られています。
1件のコメント
Hacker Newsの意見
Jamsocketの開発者は、Yjsを使ってコラボレーションおよびローカルファーストなアプリを構築するのに役立つインタラクティブなチュートリアルを作成した。YjsはCRDTライブラリであり、分散状態の扱いに慣れていない人にとっては学習コストがある。このチュートリアルは直感的で、探索可能なデモとコーディング演習を通じて基礎から理解を積み上げられるよう設計されている
Yjsの汎用的な機能は複雑になりがちで、特に複数のオブジェクトが相互に関連している場合に問題が生じる。すべての項目を1つのドキュメントに入れる単純なモデルでは、データベース全体を転送しなければならない問題が発生する。そのため、項目を個別のオブジェクトに分けて直接永続化する方法が必要になる
YjsにはP2Pの結果を容易に得られる利点がある。しかし、バックエンドでの永続化、競合解決、履歴の巻き戻しなどは難しいエンジニアリング課題である。Platejsのようなブロックエディタとの良い体験を求めており、Liveblocksのようなソリューションが開発体験を単純化しようとしている
Yjsを使って、オフラインでも動作しなければならないアプリを開発中である。リアルタイム共同編集アプリではないが、サーバーを1人の共同作業者と見なせば、さまざまなユースケースを想像できる
Yjsを小規模プロジェクトで使ったことがあり、クライアント側は学びやすく使いやすかった。サーバー側ではNode以外の言語による例がほとんどなく、LevelDBベースの永続化を使うためにNodeのy-websocketを少し修正して使用した
Fractional indexingという技術は、インデックスとして整数ではなく分数を使うものである。どれくらいの回数使えるのかという疑問がある
インタラクティブデモの遅延スライダーは、ネットワーク遅延ではなくデバウンスバッファとして動作しているように見える。なぜそうなっているのか理解しにくい
インタラクティブデモは美しい。これを構築するのに使われたライブラリがあるのか気になる
四つ葉のクローバーを手に入れたが、誰かに台無しにされた。制作者に賛辞を送りたい。面白いものだ
バナー画像のゲームは子どもっぽいが面白い