Apprentissage interactif avec Yjs

• Introduction

  • Learn Yjs est une série de tutoriels interactifs pour apprendre à créer des applications de collaboration en temps réel avec la bibliothèque CRDT Yjs.
  • Cette page elle-même est un exemple d’application de collaboration en temps réel, où les curseurs des autres utilisateurs s’affichent en direct.
  • Si vous cliquez sur les plantes, les modifications sont également répercutées chez les autres utilisateurs.

• Les bases de Yjs

  • En partant des concepts fondamentaux de Yjs, le contenu aborde les techniques de gestion de l’état dans les applications distribuées.
  • Il explique ce qu’est un CRDT et pourquoi on l’utilise.
  • Il présente les problèmes pouvant survenir dans les applications collaboratives et les moyens de les éviter.
  • Des démos explorables et des exercices de code permettent de découvrir concrètement le fonctionnement de Yjs.

• Exemples de démo

  • Chaque boîte représente un ordinateur distinct (client) exécutant une application utilisant Yjs.
  • Une interaction sur un client est automatiquement synchronisée avec les autres clients.
  • Le curseur de réglage en haut à gauche permet d’ajuster la latence réseau afin d’observer les interactions entre les clients.

• Présentation du site

  • Learn Yjs est un projet de Jamsocket, une plateforme pour créer des applications en temps réel.
  • Les curseurs en temps réel et le jardin multijoueur de cette page sont propulsés par Y-Sweet, un serveur Yjs open source.
  • Le site web a été construit avec Astro, et les démos interactives ainsi que les exercices ont été réalisés avec React et Yjs.

[GN⁺]

Avis Hacker News

• Un développeur de Jamsocket a créé un tutoriel interactif pour aider à construire des applications collaboratives et local-first avec Yjs. Yjs est une bibliothèque CRDT, avec une certaine courbe d’apprentissage pour les personnes peu familières avec les états distribués. Ce tutoriel est intuitif et conçu pour faire comprendre les bases progressivement grâce à des démos explorables et des exercices de code

• Les capacités généralisées de Yjs peuvent devenir complexes, en particulier lorsque plusieurs objets sont liés entre eux. Le modèle simple consistant à tout placer dans un seul document pose le problème de devoir transmettre toute la base de données. Il faut donc une méthode pour séparer les éléments en objets individuels et les persister directement

  • Le problème peut être résolu avec les subdocuments, mais certains providers ne les prennent pas en charge. Le protocole central de Yjs n’est pas documenté et le code associé est dispersé

• Yjs a l’avantage de permettre d’obtenir facilement des résultats en P2P. En revanche, la persistance côté backend, la résolution des conflits, le rembobinage de l’historique, etc., restent des défis d’ingénierie difficiles. Il était souhaité d’avoir une bonne expérience avec des éditeurs par blocs comme Platejs, et des solutions comme Liveblocks cherchent à simplifier l’expérience de développement

• Une application qui doit aussi fonctionner hors ligne est en cours de développement avec Yjs. Ce n’est pas une application de collaboration en temps réel, mais si l’on considère le serveur comme un collaborateur, on peut imaginer divers cas d’usage

• Yjs a été utilisé sur un petit projet, et la partie client était facile à apprendre et à utiliser. Côté serveur, il n’y avait presque pas d’exemples dans d’autres langages que Node, et y-websocket de Node a été utilisé après une légère modification avec une persistance basée sur LevelDB

• La technique du fractional indexing consiste à utiliser comme index des fractions plutôt que des entiers. La question se pose de savoir combien de fois cela peut être utilisé

• Le curseur de latence de la démo interactive semble fonctionner comme un tampon de debounce plutôt que comme une latence réseau. Il est difficile de comprendre pourquoi

• La démo interactive est magnifique. On se demande s’il existe une bibliothèque utilisée pour la construire

• J’ai obtenu un trèfle à quatre feuilles, mais quelqu’un l’a gâché. Bravo au créateur. C’était amusant

• Le jeu de l’image de bannière est puéril, mais amusant