Build a Universal Reactive Data Library with Starbeam

Rate this content
Bookmark

This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.

We'll write a library that caches and updates data, and supports relationships, sorting and filtering.

Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.

All of these features will be reactive, of course.

Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.

In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.


Table of contents

- Storing a Fetched Record in a Cell

- Storing multiple records in a reactive Map

- Reactive iteration is normal iteration

- Reactive filtering is normal filtering

- Fetching more records and updating the Map

- Reactive sorting is normal sorting (is this getting a bit repetitive?)

- Modelling cache invalidation as data

- Bonus: reactive relationships

This workshop has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

Yes, StarBeam is designed to be framework-agnostic and can work with Preact, Vue, Svelte, Ember, and other similar frameworks. The tutorials primarily showcase its integration with React, but the reactive functionalities are applicable across different frameworks.

StarBeam is used as a standalone reactive library and is primarily focused on being integrated with React in the tutorials. It is demonstrated through examples that intermix StarBeam's reactive features with React's useState and other functionalities.

'useResource' is a hook in StarBeam that acts as the main unit of functionality, typically used to manage and encapsulate reactive states and resources within the application. It provides a way to set up and tear down resources effectively.

The 'useReactive' hook in StarBeam is used to interact with reactive states within a React component. It ensures that the component re-renders in response to changes in the reactive state and manages dependencies to prevent issues like stale closures.

Using StarBeam with React allows developers to manage state more dynamically and reactively, facilitating better integration of reactive programming paradigms into React applications. It helps in creating more efficient and responsive UI components.

Yes, StarBeam is compatible with React's strict mode. It includes under-the-hood mechanisms to handle strict mode's requirements, such as the teardown and setup of components, ensuring stable values and preventing issues related to React's lifecycle constraints in strict mode.

StarBeam is particularly effective for applications requiring high reactivity across user interfaces, such as real-time data displays, dynamic user interactions, and complex state management scenarios. It is also useful for creating cross-framework compatible libraries.

Yehuda Katz
Yehuda Katz
66 min
14 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

StarBeam is a standalone reactive library that can be intermixed with React. It provides reactive versions of JavaScript built-in collections and allows for dynamic arrays of counters. StarBeam also introduces the concept of remote data API and offers features like invalidation and error rates. It handles errors and reloading, filtering logic, and stable values. StarBeam can be used with various frameworks through renderers and aims to be as universal as possible.

1. Introduction to StarBeam

Short description:

I have a bunch of little mini tutorials that I'm going to walk through. There's a few different ways to think about StarBeam. It's a standalone reactive library. I focused on intermixing StarBeam with React. The first step is a standard counter example. There are two things going on here. The first one is a hook called useResource, and a resource is just a general purpose ... It's the main unit of StarVM functionality. The most fundamental unit of reactive state in StarBeam is called the cell.

So basically, I have a bunch of little mini tutorials that I'm going to walk through. I haven't yet published the packages that would allow you to follow along if you're at home. And so hopefully by the time you watch this, maybe I will have done that. Either way, I basically created a bunch of little steps that can help me get across some of the points about what StarBeam is good for.

So another thing to say is there's a few different ways to think about StarBeam. One of them is just that it's a standalone reactive library. I've given talks about that and even started writing some slides about that, but I instead decided to focus a lot more in this set of examples on intermixing with React. So originally, it was always intended to be a React focused tutorial, but I also focused a lot on interleaving StarBeam reactive stuff with useState and things like that. So there's a way to get more all in on StarBeam, and it does—there's tradeoffs. It helps some, but it requires to be all in. I decided to focus a lot on interleaving StarBeam stuff and the benefits of StarBeam with just regular React stuff.

So I'll just get started, I guess. The first step here is a very standard counter example. So let me just show you the example. We have some increments. I have a little text field here, and if you increment, it basically adds the number to whatever counters are being implemented. I think I could have made an example that's just pure React, but you can probably figure out how to implement that in pure React, right? So like I said, I decided to focus on intermixing StarBeam with React. So in this case, I'm just starting by using a regular useState to get me the start variable. So that's let's see if I can pull off a React inspector. So here's how we'll counter, right? And you can see that there's a start props that goes into all the things. And if I increment start, right, then like that's going to be a props are going to update. So that's like very normal React stuff. And then how I implemented the text field is just like an input field. Basically, I did the new use ID hook that React added to make HTML 4 work, blah, blah, blah. This is all like bog standard React stuff. But then the counter is like because I think I'm legally required to make a counter tutorial, the counter is a React is a StarBeam example. And I decided the way I decided to focus on this is basically to make a little custom Reactive value called a counter and I'll explain how that works in a second. And then I'll explain there's basically two things going on here. One thing that I'll just generally want to say is that a thing that's interesting about StarBeam but it's hard to get across in this kind of demo is that when you implement something like this, which we'll talk about in a minute, it will work in Preact, it will work in Vue, it will eventually work in Svelte, Ember, et cetera. But when you first encounter it in React, you're probably mentally comparing it to what you would have to write by hand, and it's probably fine, but it's not like it's unfamiliar and it's not that much better. So I think I decided anyway to focus on an example that basically just give it five minutes is what I would say. So let's get through it, even though at first glance, this is not really buying Vue a lot. But the point is, as you'll see, as we build on it, we'll see that you get some benefits and also the universality is good.

So basically there are two things going on here. The first one is a hook called useResource, and a resource is just a general purpose ... It's the main unit of StarVM functionality. And if you write the resource that's on line 38 over here, like I said, that same resource will work in other frameworks. So what you would probably do if you're writing a library or something is you would write this as a standalone thing. You wouldn't be using any React code here at all, and then you would be able to use it wherever you want. And again, the second half of this tutorial is building up a data library, and hopefully it will make more sense when I get into that. So what is going on here? So first of all, the most fundamental unit of reactive state in StarBeam is called the cell. And that's like if you're familiar with signals, it's like a signal or a use state variable or anything like that. It's just the most fundamental unit of reactive state. So we're just inside of the resource... The resource function is kind of like the promise callback, right? It's place to set yourself up. So inside of there, we're just making a new cell and then we're returning an object that has a getter on it, which gives me the current value of the cell and an increment method on it. Now if we go back to the react code, the hook just takes one of those things and it gives us back this value. It can do a lot more things than that, including like setup and teardown but we'll get to that soon. Importantly, the value that you get back from useResource is always the same. That means if your hello counter re-renders a bunch of times, you're not going to get new copies of cell every single time because of course that would not work.

2. Using useReactive and React State

Short description:

When you use the useResource hook, it will give you the same value every time. Use the useReactive hook to interact with StarView state. It works with React strict mode as well. If you forget to use Reactive, you'll get an error. The hello counter and incrementer examples show how StarBeam works with React state.

You can't subscribe to something or you can't interact with something that's changing all the time unless you're useState. So when you say useResource, that is going to give you back the same value every single time. I think one way to think about this is that it's giving you a lot of what if you're familiar with solid, solid is basically a way of writing something that looks like React, but there's a part of your code that runs one time and then there's a part of your code that keeps running every time. It's basically that same model, but it uses a familiar looking React hooks and you can use it in React. You get the counter, it's the same one every time, and then this code over here is something and it's something that you have to write in React basically because of React internal details. Notably in preact, which has almost the same API, you don't have to write this. It's just a thing that React makes you need to do. So basically useReactive is just a hook you wrap around any code that interacts with other StarView state. So here you're making an instance of the counter and here you're just saying I'm going to interact with the counter. So if you just use Reactive as a hook you can pass dependencies and in this case importantly here like I said before start is just a normal React state variable so you can pass it in over here and that all works as you would expect. I also should mention that I have a bunch of stuff on the website that goes into detail about this, but starbeam also works perfectly well with React strict mode and that turns out to be a little trickier than it looks in general, but basically whenever I say this only runs one time or like this dependency etc etc, there's a lot of gotchas that come up if you just try to implement stuff like that yourself and make it work with strict mode and basically under the hood we make that work. So basically you say use Reactive that just means you're interacting with the Reactive state. You can put you can wrap that around anything, but you don't need to do it if you're not interacting with any Reactive state. Also if you forget to use Reactive, what's going to happen when you try to interact with the state is you're going to get an error that's that's pretty clear. It says you attempted to read this Reactive value and it gives you a line on stack trace, but it's a Reactive value that was created here. Please wrap it in use Reactive. So basically we have this hello counter, and we're saying counter.currentplusstart. Again, I focused a lot on interleaving React state with Starbeam state just to show that it works. And so we have an H1 and then on click we're doing counter.increment, and that's going to call this increment. So kind of got into detail here, but if we just reload here, it basically behaves like you would expect. So increment the start thing that is going to update the start in all these places. And I also have this incrementer. When I increment that, it obviously works. So I think that's like, I'm belaboring the point a bit, but I think it works the way you'd expect more or less. Now let's go to the second step.