Vanilla JS quickstart

[aboodman]

We have a todo template you can clone for Next.js, and we plan to have one for pure React, Solid and Svelte. But what if you want to use some other framework? We should have a vanilla JS quickstart too that covers the rest of the bases.

[hovissimo]

I'm very interested in seeing/using Replicache without all the noise from other frameworks.

[aboodman]

Hi @hovissimo - we have a new plain react (no Next.js) sample here: https://github.com/rocicorp/replicache-examples/tree/main/react and a web components one here: https://github.com/rocicorp/replicache-examples/tree/main/ts-web-component.

There is still a tiny bit of cleanup work on both of them before we put them in the main docs, but they're getting close. Do either meet your needs?

[hovissimo]

Thanks for the links!

These are definitely better, but there's still a lot of noise just from Typescript. I haven't needed Typescript yet, and it takes extra effort to see Replicache's own patterns hidden in these files.

I am interested in using Replicache without a bundler or transpiler, so having a completely vanilla JS example would ease my adoption. Also, and I think this is really important, for someone who's very interested in Replicache's value proposition but seriously doubts it can actually be that simple (like me) a demonstration that is complete but DEAD SIMPLE is really important.

[hovissimo]

it takes extra effort to see Replicache's own patterns hidden in these files

Expanding on this thought, I'm looking at https://github.com/rocicorp/replicache-examples/blob/main/react/src/app.tsx#L28-L29

  const handleUpdateTodo = (update: TodoUpdate) =>
    rep.mutate.updateTodo(update)

For someone who's familiar with Typescript AND the TodoUpdate type, this is excellent code. I'm NOT familiar with the TodoUpdate type, so this is actually really opaque. This piece of code is effectively the same as const handleUpdateTodo = rep.mutate.updateTodo which tells me almost nothing about what's going on, or what the developer's intent is other than the label handleUpdateTodo.

After inspecting shared/todo.ts I can infer that update basically IS a todo, but I had to stop and perform a context switch just to confirm that when my real goal is to understand Replicache. I understand that Typescript is very popular, but without some vanilla JS examples I'm afraid you're writing off a segment of JS developers who are interested in Replicache but aren't willing to put in this much effort to read between the lines.

[aboodman]

Yeah I get that. Thanks for the feedback. Our job is complicated by the fact that the JS ecosystem is such a diverse place with many people having many different contexts. For people who live and breath TypeScript all day not having the quickstarts be typescript is a red flag and raises questions like "will these mutators be typesafe?". We want to address these concerns early in our documentation.

I'm not sure if you saw but in a previous iteration of our bug one of our team put a very very simple vanilla hello world:

https://github.com/rocicorp/replicache/issues/998#issuecomment-1124963401

[hovissimo]

I'll check that out!

I appreciate your response, and I recognize the challenges. Thank you!

[aboodman]

I'm going to call this closed as we do have the wc quickstart now. Since this bug was created we've also decided to do a tutorial for the docs that is even more minimal (just a synced counter) and that will be plain js so I think will address your undelrying desire @hovissimo .

[hovissimo]

Awesome, I'll have a look. Thank you!