Started writing my own React bindings for @croquetio, feeling pretty good. gist.github.com/steveruizok/73…
The regular @croquet/react bindings have a lot of boilerplate that's available from their context object (e.g. a viewId) so these bindings folds that stuff in.
It’s still a lot of boilerplate though. Most of the “subscriptions” I’m writing are manually syncing these two data sources (the data published from the model and the React state).
But I have a feeling that there’s more we can do to reduce that boilerplate and improve the experience.
Forcing this thing to play with patches and a zustand store
Let's pretend we only need one way to change the state: by smashing in some deep partial "patch" over the current state
So our model will handle that patch like this, I think. Let's call it an easy model, and we'll extend this one for our app's particular state.
And then we make our "easy state" together with a zustand store, which it will update on change
Then tada! Select out data as needed from the zustand store, and change the state by sending in new patches.
heyy
(collaborative) demo here: youthful-noyce-41aa35.netlify.app
Some initial thoughts: probably better to store dots in a map rather than an array
Maybe this one's better? happy-dijkstra-b60720.netlify.app

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve Ruiz

Steve Ruiz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveruizok

21 Sep
tricker than I thought: making sure that pasted shapes don't end up on top of each other
Normally we'd like to place a pasted shape in the middle of the editor. You can think of this as an offset of [0,0] from the center.
But there are two circumstances where we'd want to offset this position. First, if the shapes that we copied happen to also be perfectly centered in the window, then we'd increase our offset (e.g. to [16, 16]).
Read 9 tweets
17 Sep
Ever wonder why regular pencil tools wait until after you finish drawing to smooth out your line? It's usually because the app using a line-simplification algorithm—and these sorts of algorithms aren't "stable" as a line is changing. 🧵
Here's the algorithm at work, picking new points on almost every frame. Each solution is "correct" for each set of points, but it is overall "incorrect" in the sense that the solutions keep changing! codesandbox.io/s/simplified-t…
Why simplify at all? The "raw" input points are often very jerky and noisy.
Read 11 tweets
26 Aug
Introducing rko, a three-letter state management library for #reactjs with built-in undo, redo, and local persistence. Built on @pmndrs zustand. github.com/steveruizok/rko.
The idea here is to update state either with a "patch", or a deep partial of the state containing only the changes that you want to make...
...or else a "command" made up of two patches, before and after. Only commands become part of the undo/redo stack.
Read 13 tweets
15 Jul
A very common #typescript pattern with some kinda tricky types behind the scenes. codesandbox.io/s/type-mapping…
Let's say we have a number of related objects (in this case, a few foods) that each have a unique type.
We can type all of them together as a union (Food), and extract their common types as a second different union (FoodType).
Read 21 tweets
30 Jun
Live cursors are interesting. You don't really want to be constantly sending updates but you do want the cursors to move smoothly and naturally like this. What's the trick?
Here's what it looks like without any animations.
Regular tweens/duration-based animations won't work here because each new update will "redirect" the animation. While the cursor is moving from A to B, a new update may come in that means it should move instead from its current point (C) to point D instead.
Read 7 tweets
29 Jun
perf breakthru on ios, panning and zooming back to 60 FPS
I was over here staring at the performance tab, all signs green, no dropped frames reported—while also watching things obviously skip around at <30 fps. Super frustrating, couldn't figure it out.
Finally I think, maybe I'm not actually updating the state on every frame? Of course I was, but somehow in a way that didn't quite count for Safari.
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(