Reactivity is a programming model where the state of an application is determined by the user’s interactions with it. In JavaScript, this means that when a user interacts with a web page, the page updates itself automatically in response to the user’s actions. This allows for a more dynamic and interactive experience for the user, as they can see the effects of their changes right away. Reactivity also allows developers to create applications that respond quickly and efficiently to user input.
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
Workshop Free
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