Announcing Starbeam: Universal Reactivity

Rate this content
Bookmark

Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.

Yehuda Katz
Yehuda Katz
27 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.

1. Introduction to Starbeam

Short description:

Today I'm here to talk to you about Starbeam, a library for building reactive user interfaces with JavaScript. Starbeam is not the next hot new JavaScript framework. We have similar examples in Svelte, Vue, and Ember. Let's start by taking a look at the app we're going to be building. It has a form to create new users, filtering, deleting items, and more.

Hi, everybody. Today I'm here to talk to you about Starbeam. Starbeam is a library for building reactive user interfaces based on the guiding principle that if you write your reactive code just like any other code, you can build a radically simpler, more reliable user interfaces with the JavaScript skills you already have.

Now, people have said a lot of similar things like that before, so I don't blame you for being skeptical and jaded. Before I get started, I want to be really clear about something. Starbeam is not the next hot new JavaScript framework. The demo I'm doing today uses Starbeam inside a React app, and we have similar examples in Svelte, Vue, and Ember. The people who work with me on Starbeam are pretty tired of the way that new front-end ideas are always packaged up with a whole new framework you need to migrate to. We think we can do better, and I hope that by the time I'm done here, I'll have piqued your interest.

Let's start by taking a look at what the app that we're going to be building looks like. Here's the finished app. So we have a form we can create some new users. I can write leah-silver-portland. I can append it. As you can see, once I have appended it, there is some information on the bottom about what happened. I can filter. I can write portland...here. And when I do that, you see that this changes to say two filtered out of five. I can delete items while I'm filtered. Everything works as you would expect. I can delete all the items. I can add people back in. Like that. And that's about it. That's basically what this app does.

2. Data Structure and Query Feature

Short description:

Let's start by using the non-finished version of the demo. The data that backs our component consists of a table with rows and columns. Each row represents a person with a name and a location. We can append, delete, and clear rows. Additionally, we can use the query feature to implement filtering and sorting.

Well, the very first thing I want to do is change to using the non-finished version of the demo. So let's start there.

Okay, great. And as you can see, there's some features here already, but nothing, there's no filters. There's nothing that made it very interesting. And more importantly, nothing works here.

Before we get started, let's take a look at the data that backs our component. Now it's a little bit of an involved JavaScript thing here, but the reason it's involved is less that Starbeam cares that you do anything interesting here and more that I want to show that even if you use pretty advanced fancy JavaScript features, everything still continues to work.

So let's take a look at the first piece of this, which is the table. So a table has an ID which starts at zero and that's what we can allocate IDs as we create new rows. We have a list of rows, which is a map from a string to a row. Now what's a row? Well, here we have an example of a person. So a person has a name, which is a string, a location, which is a string, and all a row is is that thing plus an ID added to it. So we're going to map from the ID to a row of a person, in this case, and that means it's going to be the person plus an ID. We're going to take a bunch of columns so that we have a way of reflectively creating headers. We're going to have a getter for rows. So what does the getter for rows do? It gets the values out of our map and splats it onto an array. This gives us an array back. How do we append a row? Well, we make a new ID as a string and then we make a new object that contains the ID and the columns that we specified, and then we set the string ID onto the map and give it the row as the value, return the row, pretty vanilla stuff. How do we delete an ID? Well, we delete it from the row. How do we clear rows? We clear the map. And then there's one additional feature here, which we're going to use to implement filtering, which is the query feature. So what is query? A query is another very simple object. A query has a table that backs it, and then it has a bunch of filters and an optional sort. What's a filter? It's a thing that takes a row and gives back a Boolean. What's a sort? It's a thing that takes two rows and gives you back a number, which is what the compare functions do. Okay, now what happens if you ask for a list of rows from a query? Well, the first thing that happens is that we get the rows from the table, and as a reminder, that does this splatting thing. Then, we loop through all the rows and we make sure that all the filters match the row. And then if we have a sort, we sort the filtered things by the sort, otherwise we just return the array. So basically it's a little object, wraps a table, has some filters, and gives us back new rows.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs