React Components as a Service

Historically, most developer tools offered REST APIs and SDKs to interact with their services. React components are the new gold-standard API. Steven will give a practical talk and behind-the-scenes on how Liveblocks built their first React Component as a Service to improve time to value and developer experience.

-----

1. Introduction

- Brief intro about myself, worked on creative tools for over a decade

- I founded Liveblocks, but don’t worry this isn’t a pitch (promise!)

- Back story on how I ended up in this real-time collaboration space

- I worked on Invision Studio (like Figma/Framer) and we needed to make it multiplayer and I was leading design there.

- Making it multiplayer was a pain in the ass. It was a 18-month effort, and I was like “this is too painful! Let’s fix it”

- Turns out this pain is so common that there are a number of companies trying to solve it like PartyKit, etc (slide with all the logos)

- We learned two things

2. Learnings

1. Multiplayer is just the tip of the iceberg (iceberg)

- Multiplayer, but *also*

- comments

- document browsing

- permissions

- + more (audio/video/etc)

2. Most developers want purpose-built solutions

- What is a purpose-built solution?

- Example

- Multiplayer text editor

- Collaborative whiteboard

- Comments

- The shape of purpose-built solutions can often be a set of React components

- Why is that?

- Historically, most developer tools offered REST APIs and SDKs as the most common APIs (e.g Stripe)

- Now, the component is the next gold-standard API (e.g Clerk)

3. Today, we'll dive deeper into Liveblocks Comments, and what we did to create our first React Component as a Service

- Level of API abstractions (show pyramid slide from REST API, to hooks, to primitives, to default components)

- Identify common comments UI patterns

- Provide components for those patterns (real-time, customizable, accessible)

- Default components

- Customize via CSS variables

- Leveraging color-mix() to generate color palette

- CSS logical properties and `Intl` APIs to allow localization via overrides props

- Rich text formatting

- Primitives components

- Compose UI like Radix UI

- Fallback to React hooks (front-end facing APIs)

- Fallback to REST APIs

4. Conclusion

- Recap + summary of key points

- I’m a guy who built a hard thing and wants it to be easier for other people. That’s it

- I hope you learned something today

- The future is collaborative. Everything is more fun when we're together. People deserve Figma-like experiences.