5 ms·

Hey HN! I'm the developer at Jamsocket who made this. In case you're not familiar with Yjs, it's a CRDT library for building collaborative and local-first apps.

Hey HN! I'm the developer at Jamsocket who made this. In case you're not familiar with Yjs, it's a CRDT library for building collaborative and local-first apps. The thing is, if you're not used to working with distributed state there's definitely a learning curve. Even simple things like incrementing a counter — the "hello world" of JavaScript framework demos — get tricky when dealing with multiple clients. Worse, a lot of tutorials are just like "install this library and text editor integration and boom you have an app", which doesn't give you a good mental model for what's actually happening. So we made Learn Yjs! It's an interactive Yjs tutorial. I wanted it to be really intuitive for people just getting their feet wet with local-first development, so there are lots of explorable demos and coding exercises. The idea is to use interactive examples to build an understanding from the ground up. Hope you like it :)

nhatcher 2y ago
Woah! Beautifully done! I wonder if I will finally understand CRDT with this. Will go through it over the weekend. Congratulations!
santa_boy 2y ago
I am just looking at this but quick question. Is there an example for building a local-first app? Also, I working with plain vanilla HTML & JS and Alpine. Can this be used in my apps?
- deleted 2y ago
  [deleted]
- paulgb 2y ago
  Y-sweet (which this is built with) allows you to make a Yjs app local-first by passing “offlineSupport” to the provider when constructing. There’s a demo of this here: https://demos.y-sweet.dev/color-grid https://demos.y-sweet.dev/color-grid The source for that demo is here: https://github.com/jamsocket/y-sweet/blob/5fa6941cf5568f4a3fba9047da59a69c10d68167/examples/nextjs/src/app/(demos)/color-grid/page.tsx#L9 https://github.com/jamsocket/y-sweet/blob/5fa6941cf5568f4a3f... That demo uses react, but there is a vanilla js version of the same demo here: https://github.com/jamsocket/y-sweet/tree/main/examples/vanilla https://github.com/jamsocket/y-sweet/tree/main/examples/vani... (The vanilla js version is not local first, but it would just be a matter of passing the same offlineSupport flag to make it so.)
  - santa_boy 2y ago
    Thank you. This is the direction I needed. Will try out
  - steve_adams_86 2y ago
    I just noticed that if you install the example service after setting up an account, it installs a version of @y-sweet/react which doesn't offer the offlineSupport prop. The version specified is ^0.5.1. After switching to 0.7.1 as the repo you linked uses, all is well. Probably not a big deal for most newcomers, but it might be worth updating dependencies in the example service.
    - paulgb 2y ago
      Thanks Steve, good catch!
adeptima 2y ago
Thank you. Keep going. Very good topic to expand
KaiMagnus 2y ago
> "install this library and text editor integration and boom you have an app", which doesn't give you a good mental model for what's actually happening. I was interested in working with CRDTs and collaboration in general for a while now and this has been the biggest issue whenever I tried to get into it. Websockets also seem a bit harder to find (free) hosting for. Btw, your other tutorials on CRDTs were also a great help.
- Imustaskforhelp 2y ago
  Cloudflare workers can host soketi which is websocket.
- jakelazaroff 2y ago
  Thank you! As far as websocket hosting, there are a few services out there. We offer a pretty generous free tier for Y-Sweet [1] with 10GB of storage. There's also PartyKit and Liveblocks, though I'm not sure what their pricing is like. [1] https://jamsocket.com/y-sweet#y-sweet-pricing https://jamsocket.com/y-sweet#y-sweet-pricing
satvikpendem 2y ago
Does this work with Yrs [0] or is that a separate project? Also, does Y-Sweet work with any CRDT library like Automerge or Loro or only Yjs? I ask because they all seem somewhat similar in terms of being binary files being sent back and forth so I was just curious how compatible Y-Sweet is with other similar CRDT implementations. [0] https://github.com/y-crdt/y-crdt https://github.com/y-crdt/y-crdt

nhatcher 2y ago

Woah! Beautifully done! I wonder if I will finally understand CRDT with this. Will go through it over the weekend. Congratulations!

santa_boy 2y ago

I am just looking at this but quick question. Is there an example for building a local-first app? Also, I working with plain vanilla HTML & JS and Alpine. Can this be used in my apps?

deleted 2y ago
[deleted]
paulgb 2y ago
Y-sweet (which this is built with) allows you to make a Yjs app local-first by passing “offlineSupport” to the provider when constructing. There’s a demo of this here: https://demos.y-sweet.dev/color-grid https://demos.y-sweet.dev/color-grid The source for that demo is here: https://github.com/jamsocket/y-sweet/blob/5fa6941cf5568f4a3fba9047da59a69c10d68167/examples/nextjs/src/app/(demos)/color-grid/page.tsx#L9 https://github.com/jamsocket/y-sweet/blob/5fa6941cf5568f4a3f... That demo uses react, but there is a vanilla js version of the same demo here: https://github.com/jamsocket/y-sweet/tree/main/examples/vanilla https://github.com/jamsocket/y-sweet/tree/main/examples/vani... (The vanilla js version is not local first, but it would just be a matter of passing the same offlineSupport flag to make it so.)
- santa_boy 2y ago
  Thank you. This is the direction I needed. Will try out
- steve_adams_86 2y ago
  I just noticed that if you install the example service after setting up an account, it installs a version of @y-sweet/react which doesn't offer the offlineSupport prop. The version specified is ^0.5.1. After switching to 0.7.1 as the repo you linked uses, all is well. Probably not a big deal for most newcomers, but it might be worth updating dependencies in the example service.
  - paulgb 2y ago
    Thanks Steve, good catch!

adeptima 2y ago

Thank you. Keep going. Very good topic to expand

KaiMagnus 2y ago

> "install this library and text editor integration and boom you have an app", which doesn't give you a good mental model for what's actually happening. I was interested in working with CRDTs and collaboration in general for a while now and this has been the biggest issue whenever I tried to get into it. Websockets also seem a bit harder to find (free) hosting for. Btw, your other tutorials on CRDTs were also a great help.

Imustaskforhelp 2y ago
Cloudflare workers can host soketi which is websocket.
jakelazaroff 2y ago
Thank you! As far as websocket hosting, there are a few services out there. We offer a pretty generous free tier for Y-Sweet [1] with 10GB of storage. There's also PartyKit and Liveblocks, though I'm not sure what their pricing is like. [1] https://jamsocket.com/y-sweet#y-sweet-pricing https://jamsocket.com/y-sweet#y-sweet-pricing

satvikpendem 2y ago

Does this work with Yrs [0] or is that a separate project? Also, does Y-Sweet work with any CRDT library like Automerge or Loro or only Yjs? I ask because they all seem somewhat similar in terms of being binary files being sent back and forth so I was just curious how compatible Y-Sweet is with other similar CRDT implementations. [0] https://github.com/y-crdt/y-crdt https://github.com/y-crdt/y-crdt