Real-Time Collaborative State on the Edge

Practical talk showing how to go from a local state to an on-the-edge offline capable persisted state to make an app like Figma, Notion, and more.

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Steven has worked at Facebook Messenger, Campaign Monitor, InVision, and currently runs a company called LiveBlocks.

Steven is passionate about building and designing creative tools, particularly design tools and applications that enable users to create something.

At Campaign Monitor, Steven worked on an email builder, a drag-and-drop tool for designing responsive emails.

Easy is a tool that helps designers create web animations without coding. It was created by Steven.

At InVision, Steven worked on the team responsible for creating InVision Studio, a UI design tool for designing apps, websites, and creating animations and prototypes.

LiveBlocks is a company run by Steven that provides APIs and tools for developers to build multiplayer and collaborative experiences.

Steven faced challenges in converting InVision Studio from a desktop-based, file-based application to a browser-based, collaborative application, which took about a year and a half to develop.

Figma revolutionized the design industry by creating a high-quality, browser-based, collaborative design tool that allows multiple users to work on the same design file simultaneously.

Key features include presence indicators, broadcasting events, data storage for collaborative documents, comments, mentions, document browsing, and integrated audio and video functionalities.

Steven is a design tool enthusiast who has lived in various places including Paris, Sydney, Quebec, and New York City.

Steven Fabre
Steven Fabre
26 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.

1. Introduction to Design Tools and Experience

Short description:

Hey, everybody. My name is Steven, and I've lived all over the place. I am a massive design tool nerd. I worked at Facebook Messenger and Campaign Monitor. I created Easy and joined InVision. At InVision, I worked on InVision Studio, a UI design tool.

Hey, everybody. My name is Steven, and I've lived all over the place. So, I'm doing this talk from Paris today, but I lived in many different places. I spent, you know, 7 ½ years in Australia, in Sydney, even lived in Quebec before that for a little bit, and also spent a few years in New York City.

So, yeah, great to be here today. And what I want to tell you guys is that I am a massive design tool nerd. I love building. I love designing design tools. I love creating apps and things that people use as a return and create something with that tool that I helped make. And so, this is the angle for my talk. I'm a big design tool nerd and I love making this kind of creative tools.

So, I worked at Facebook Messenger for a little while on the design system slash Messenger team to help them with their tooling needs internally. I also spent some time at a company called Campaign Monitor in Australia back when I was in Sydney. And, my main project there was to work on this email builder. So, it was a drag-and-drop tool where you could design beautiful emails that were like responsive, so they worked on mobile and desktop. And we helped brands kind of create those emails just in a drag-and-drop way very easily. That was the first time really that I was really introduced to creative tools. That eventually led me to create Easy. And Easy, I don't know if some of you have heard of it, it's pretty old now, was a tool to help designers create animations for the web, and then to do that without having to code. And then you just could click that and get the CSS from it. It was pretty cool. I enjoyed working on that. And that eventually led me to join InVision.

And so at InVision I worked on the team responsible for creating InVision Studio. I worked on that for four and a half years. And I don't know if you guys are familiar with InVision Studio. But that was essentially a UI design tool where you could, you know, obviously design apps, websites, but also create animations for them and prototype them, make them very interactive. And this sounds pretty obvious, but back in the day there weren't very many tools that could do that sort of stuff. And really, that experience really led me to the path I'm on today. We had a, you know, it was a desktop application working on the file system, and Figma was this amazing browser based tool to do UI design and that sort of stuff was starting to become really popular.

2. Challenges of Building Collaborative Products

Short description:

Figma's multiplayer feature and the challenges of converting InVision Studio to a browser-based collaborative tool led me to start LiveBlocks. At LiveBlocks, we provide APIs and tools for developers to build multiplayer and collaborative experiences. Building a collaborative product involves more than just multiplayer functionality. It includes features like comments, annotations, shared dialogues, document browsing, and audio/video capabilities. Google Docs played a significant role in shaping the collaborative SaaS landscape with its browser-based document editing capabilities.

And one thing that Figma did really well is that, as I said, the product worked in the browser, meaning you don't have to download an app to get it to work, and it was what they called multiplayer. And so, we eventually had this project at InVision to convert InVision Studio from a desktop based file based application, excuse me, to an application that was browser based and collaborative by default. And so I led design for the project, and this is the first time I really got exposed to the problem of like, damn, this is freaking hard to do. We had a dedicated squad of, I think, at the peak, seven engineers, one point manager, and I was the designer of kind of heading up that initiative. And it took over it took about a year and a half before we could have a working version of that desktop based, sorry, browser based multiplayer application a year and a half. That's a very long time. And, yeah, I was eventually a little bit frustrated with this because I was like this, I just don't understand how this could take that long. But that is that's just how it is. Like it takes very long to build those kind of experiences when you do all that stuff yourself. And so being exposed to that I didn't realize, but that eventually led me to the path I'm on today. I run a company called LiveBlocks and at LiveBlocks what we do, we provide APIs and tools to developers like you guys to build multiplayer experiences, but also more broadly collaborative experiences like comments and pretty much anything you want to do that's collaborative and requires multiple people to work together on some type of digital experience. But don't don't be worried. This is not a sales pitch. I promise I'm only here to share my learnings and dive into the behind the scenes of those kind of infrastructures, the kind of infrastructure needed to build those kind of experiences. But yeah, just to show that this problem that I personally faced with my co-founder Guillaume at InVision has become I mean, it's always been an issue, but most recent years there's been a lot of technologies and frameworks to do to work on this problem. And so a lot of those frameworks and tools when they talk about this often refer to multiplayer. But in the world of collaboration, when you build a collaborative SAS product, multiplayer is only the tip of the iceberg. There are a lot more things to think about when building a collaborative product, right? You need to think about, okay, well, when my users are in my product, how can they leave comments? How can they mention their co-workers or collaborators in comments, in specific annotations within the document, so that those people end up collaborating asynchronously and can join the document and be notified elsewhere? There's also shared dialogues, like how do you share an artifact or something with somebody else? How do you add those people? How do you take care of the permissions for those people? And then, obviously, once you have those documents and those collaborative artifacts working, how do you browse them? How do you find them? How do you find all those documents? How do you share those set of documents? How do you put them into a folder and that kind of stuff? So document browsing is a big part of that. And then, obviously, things like audio and video are becoming more and more present. So if you want to do an audio huddle, you can do that sort of stuff. Share like a video as you're working on something. Having that experience directly in the tool is becoming more and more relevant for a collaborative experience. And so if we take a step back and think about how we got to the state of where we are today in terms of collaborative SaaS products. To me, it really started with Google Docs. I think that was 15 or 20 years ago at this point. They introduced this is not the screenshot. You see, this is a lot more recent, but they introduced Google Docs, a browser-based document or similar to Microsoft Word. And it was mind blowing. Like you could just open a URL and that URL was a Word document pretty much. And you could edit it.

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

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

Workshops on related topic

Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
Top Content
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components