Could anyone help me to visualize how Yjs works?

1

I am new to Yjs and I am mesmerized by its amazing concepts and performance.
Now I am trying to make my cloned Notion projects but I am having hard time even to understand how it works.

Here it is my drawing and I want to make it sure I understood it correctly.

ydoc_flow.drawio
ydoc_flow.drawio641Ă—657 13.8 KB

  1. Clients open the web, web internally connects client to the network layer (in my case, it is WebSocket) and it loads data from the persistence layer (IndexedDB here).
  2. Now clients are ready to fire events, and when he edits, edits are fired and propagates via network layer.

If above is correct what I am wondering is where and when and how do I store the data in centralized server. I think I misunderstood something on it, but I don’t even recognize what I don’t know. Enlighten me please.

2

Initially yjs can appear straighforward yet quite confusing until you start playing around with the library with very simple examples. Unless you’ve done this, my suggestion would be to start by building simple programs without actually using actual networking or databases, and learn how shared data types work, how documents are created, modified, synced etc. This understanding will help you tackle more complex interactions.

1 Like
3

@choikangjae More like this:

yjs network diagram
yjs network diagram960Ă—540 48.4 KB

  • Data is only persisted to a storage medium (red) via providers (blue).
  • Providers replicate data across different Y.Docs. Providers are necessary for all persistence and network transport.

It should be clear from the above diagram that a provider running on the server can store data in a centralized database. Just wire it up as described in the docs and it will happily replicate any updates while it is connected.

const mdb = new MongodbPersistence(createConnectionString("yjstest"), {
	collectionName: "transactions",
	flushSize: 100,
	multipleCollections: true,
});

yUtils.setPersistence({
  ...
})
9 Likes
4

Wow after I saw your drawing, everything got so clear. It helped me a lot. Thanks a bunch!

1 Like
5

@raine Do we need dbProvider and IndexedDB if we have wsProvider and MongoDB as the persistence layer?

Is it a backup in case we have a problem with the websocket connection, then all data will still be saved? And we can synchronize data again on reconnect

6

Each YJS provider syncs a Doc somewhere. An IndexedDB provider syncs a Doc with IndexedDB, A MongoDB provider syncs a Doc with MongoDB, a websocket provider syncs a Doc over a websocket, etc. You can pick and choose which providers you want, based on which places you want to sync the document.

If a Doc gets synced to somewhere persistent, like a database, then it will persist. If it gets synced somewhere ephemeral, like over a network, then it will not persist. Again, you pick exactly where you want your Y.Doc to be synced.

The benefit of the provider model is that you can plug as many providers as you want into the same Doc. Then you do essentially have a “backup”, and all clients will re-sync once they reconnect to any provider with the full Doc intact.

3 Likes