21–27 of 27 posts
Love this! Thanks for sharing, I have some amazing use cases for this type of work and I can't wait to dig into the code to learn more. The future for CRDT is indeed hot right now and everyone wants it into their app, Google paved the way and now other big names, like Figma, Invision etc are getting on this hard!
How does the y-websocket handles network failure ? Does it autoreconnet? On reconnection, does it sync back changes that happened on or since failure ? Can you notify the user when it's happening ?
Yjs author here. On network failure, the client will automatically reconnect and synchronize with the backend. And yes, you can get an event that notifies you about the current connection status. When syncing with the server, you will only exchange the differences that were created while offline.
Would you care to compare this with for example @localfirst/state, automerge and automerge-rs (latter two provide the CRDTs, i.e. similar to Yjs)? https://github.com/local-first-web/state https://github.com/automerge/automerge https://github.com/automerge/automerge-rs By the way despite that particular repo (@localfirst/state) last being touched 6 months ago, Herb Caudill definitely seems still active in this space (…
First of all, SyncedStore does not implement any CRDT algorithms. Credits for this go to Yjs [1] (and its author Kevin), which it uses as underlying CRDT.
Yjs and Automerge are (afaik) the two most commonly used CRDT implementations. Both have their pros and cons, but Yjs has focused a lot on performance [2].
Automerge has a bit friendlier "Immer style" [3] API. I'm not too familiar with @localfirst/state, but it seems to add a Redux style API on top of Automerge.
My approach with SyncedStore was really to provide an API on top of Yjs that's as simple as possible to use in React / Vue / Svelte or plain JS app. I.e.: only use a single React Hook to observe changes, and use regular Javascript assigments to update values. The API is inspired mostly by Reactive Programming libraries such as MobX [4] (from the same author as Immer).
Hope you're still following along :) Maybe it helps to compare the TODO-MVC applications, as both SyncedStore (https://github.com/YousefED/SyncedStore/tree/main/examples) and @localfirst/state (https://github.com/local-first-web/state/tree/main/examples/...) have implemented these as examples!
[1]: https://github.com/yjs/yjs [2]: https://github.com/dmonad/crdt-benchmarks [3]: https://github.com/immerjs/immer [4]: https://mobx.js.org/
Love this! Thanks for sharing, I have some amazing use cases for this type of work and I can't wait to dig into the code to learn more. The future for CRDT is indeed hot right now and everyone wants it into their app, Google paved the way and now other big names, like Figma, Invision etc are getting on this hard!
What Google work are you referring to?
Does it diff the JSON string, or the objects/array themselves? Does it serialize the data or leave as plain text?
I ask, because I have a similar setup, that needs to sync dynamic data structures, but also keep the data deltas as small as possible when sharing them as JSON strings to save bandwidth.
Pretty interesting project. I'm curious what the data structure looks like that is sent over the network for diffs. I found the part about state-vector, but not about the actual data. Does it diff the JSON string, or the objects/array themselves? Does it serialize the data or leave as plain text? I ask, because I have a similar setup, that needs to sync dynamic data structures, but also keep the data deltas as small…
It will not automatically diff these with the previous value (in a distributed system it's difficult to say what the "previous value" was, but it will sync only those properties that have been changed). For text heavy operations, you can use the Text structure which will sync fine-grained operations ([delete 4 characters at position 2] or [insert "world" at position 5]). This makes it suitable for collaborating on rich text documents (similar to Google Docs), see: https://syncedstore.org/docs/advanced/richtext.
This might also be an interesting resource to learn how the Yjs internals work (SyncedStore builds on top of this): https://github.com/yjs/yjs/blob/main/INTERNALS.md
Love this! Thanks for sharing, I have some amazing use cases for this type of work and I can't wait to dig into the code to learn more. The future for CRDT is indeed hot right now and everyone wants it into their app, Google paved the way and now other big names, like Figma, Invision etc are getting on this hard!
What Google work are you referring to?