Interaktives Lernen mit Yjs

• Einführung

  • Learn Yjs ist eine interaktive Tutorial-Reihe, die zeigt, wie man mit der Yjs-CRDT-Bibliothek Echtzeit-Kollaborationsanwendungen erstellt.
  • Diese Seite selbst ist ein Beispiel für eine Echtzeit-Kollaborationsanwendung, in der die Cursor anderer Nutzer in Echtzeit angezeigt werden.
  • Wenn man auf eine Pflanze klickt, werden die Änderungen auch bei anderen Nutzern übernommen.

• Grundlagen von Yjs

  • Ausgehend von den Grundkonzepten von Yjs behandelt die Reihe Techniken zur Zustandsverwaltung in verteilten Anwendungen.
  • Es wird erklärt, was ein CRDT ist und warum man es verwendet.
  • Es werden mögliche Probleme in Kollaborationsanwendungen vorgestellt und Wege gezeigt, sie zu vermeiden.
  • Durch erkundbare Demos und Code-Übungen kann man erleben, wie Yjs funktioniert.

• Demo-Beispiele

  • Jedes Kästchen stellt einen separaten Computer (Client) dar, auf dem eine Anwendung mit Yjs läuft.
  • Interaktionen auf einem Client werden automatisch mit den anderen Clients synchronisiert.
  • Mit dem Schieberegler oben links lässt sich die Netzwerklatenz anpassen, um die Interaktion zwischen den Clients zu beobachten.

• Vorstellung der Website

  • Learn Yjs ist ein Projekt von Jamsocket, einer Plattform zum Erstellen von Echtzeit-Apps.
  • Die Echtzeit-Cursor und der Mehrspieler-Garten auf dieser Seite werden von Y-Sweet betrieben, einem Open-Source-Yjs-Server.
  • Die Website wurde mit Astro erstellt, und die interaktiven Demos und Übungen wurden mit React und Yjs umgesetzt.

[GN⁺]

Hacker-News-Kommentare

• Ein Entwickler von Jamsocket hat ein interaktives Tutorial erstellt, das beim Aufbau kollaborativer und Local-first-Apps mit Yjs hilft. Yjs ist eine CRDT-Bibliothek und hat für Menschen, die nicht mit verteiltem State vertraut sind, eine gewisse Lernkurve. Das Tutorial ist intuitiv und darauf ausgelegt, mit erkundbaren Demos und Coding-Übungen von den Grundlagen aus Verständnis aufzubauen

• Die verallgemeinerten Fähigkeiten von Yjs können komplex werden, besonders wenn mehrere Objekte miteinander verknüpft sind. Das einfache Modell, alle Elemente in ein einziges Dokument zu packen, führt zu dem Problem, dass die gesamte Datenbank übertragen werden muss. Daher wird ein Ansatz benötigt, bei dem Elemente in einzelne Objekte aufgeteilt und direkt persistiert werden

  • Das Problem lässt sich mit Subdocuments lösen, aber einige Provider unterstützen sie nicht. Das Kernprotokoll von Yjs ist nicht dokumentiert, und der zugehörige Code ist verstreut

• Yjs hat den Vorteil, dass sich damit leicht P2P-Ergebnisse erzielen lassen. Allerdings sind Persistenz im Backend, Konfliktlösung, Zurückspulen der Historie und Ähnliches schwierige Engineering-Aufgaben. Gewünscht war eine gute Erfahrung mit Block-Editoren wie Platejs, und Lösungen wie Liveblocks sind ein Versuch, die Developer Experience zu vereinfachen

• Es wird eine App mit Yjs entwickelt, die auch offline funktionieren muss. Es ist keine Echtzeit-Kollaborations-App, aber wenn man den Server als einen Kollaborateur betrachtet, lassen sich verschiedene Anwendungsfälle vorstellen

• Yjs wurde in einem kleinen Projekt verwendet, und die Client-Seite war leicht zu erlernen und einfach zu nutzen. Auf der Server-Seite gab es fast keine Beispiele in anderen Sprachen als Node, daher wurde das Node-basierte y-websocket mit LevelDB-basierter Persistenz leicht angepasst und verwendet

• Fractional Indexing ist eine Technik, bei der Indizes als Brüche statt als Ganzzahlen verwendet werden. Es gibt die Frage, wie oft sich das einsetzen lässt

• Der Latenz-Slider in der interaktiven Demo scheint eher als Debounce-Puffer als als Netzwerklatenz zu funktionieren. Es ist schwer zu verstehen, warum das so ist

• Die interaktive Demo ist wunderschön. Es wird gefragt, ob es eine Bibliothek gibt, die für ihren Bau verwendet wurde

• Es wurde ein vierblättriges Kleeblatt bekommen, aber jemand hat es ruiniert. Lob an den Ersteller. Es macht Spaß

• Das Spiel im Bannerbild ist albern, aber unterhaltsam