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.
Getting Started with Suspense and Concurrent Rendering in React
React Summit 2020React Summit 2020
125 min
Getting Started with Suspense and Concurrent Rendering in React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.