React Components as a Service with Steven Fabre
===

[00:00:00] Hello, everyone. I am Paige Niedringhaus. And today we have Stephen Fabré, the co founder and CEO of Liveblocks here to talk about React Components as a service. Welcome to the show, Stephen.

Hey, thank you for having me.

We're very excited to have you on. And you recently gave this talk at React Conf in Paris, I believe.

That's right. That was on Friday, 22nd. Yeah. I gave a talk about React components as a service and kind of went pretty deep into what that actually means. So happy to do this as well on this podcast.

Awesome. So let's get right into it. In the talk, you mentioned you started a blog about your favorite football team Rodez, and how that actually led you into coding. So how did your passion for coding evolve from there, which eventually led you to working on design systems at Facebook and then co founding Liveblocks?

~Mm ~

~That brought this up. But yeah~ I come from a small town in the Southwest of France called Hodez, that's where I grew up and I'm a big fan of the local football team or soccer for [00:01:00] the people that are listening to this in the U S and ~that's what got me into, ~that's what got me into not only coding, but also design.

~I always liked basically that team.~ I started building like a blog for the team. And that's how I learned like CSS, HTML. ~I was like messing around with the look and feel. I was like following tutorials online and I always loved like building, building stuff that way. And that's how I got into.~

~Kind of the intersection of design and code. Yeah, that's basically how I got into it. And I forgot the beginning, the end of your question, what was it again?~

~How did that go from you building a blog site or a football site to going into design systems at companies as big as Facebook and Meta and then co founding Liveblocks?~

~Yeah. ~So that was the beginning. I was probably like ~12, ~12 years old. ~There's been a. Since then, there has been that I've worked through, but yeah, I, ~after that ~I moved to, I finished,~ I studied computer science. I then ended up moving to Quebec in Canada to do an internship ~where.~

~I basically work on WordPress websites and create like different, created different themes and stuff like that. I~ then moved to Sydney, Australia. ~That was supposed to be for, I was just going to go there to travel. It was a good friend of mine, just for fun. Long story short, I ended up staying seven years, seven and a half years.~

~And I became Australian. Actually, I got my citizenship now. But anyway, ~when I moved to Sydney, ~I actually didn't realize I could have a career at the intersection of design and code. And I realized this because two months into my journey in Sydney, I started setting up my life there.~

~Got a place to live find a job as a waiter at a French restaurant actually. And~ I found a basketball team that I could play with ~because I played basketball my entire pretty much my entire life. ~And basically during a game, I ended up dislocated my leg pretty bad.

Oh.

~yeah it really sucked at the time because I didn't have,~ I remember the ambulance has to come through, put my leg back in place. Went to the hospital and I couldn't walk for like over a month.

~So I lost,~ I ~basically~ couldn't work either because I couldn't walk and I barely had any money.~ I remember I had to get an MRI and the lady at the front, once I had done the MRI told me like, oh, it's gonna be $600. And I was like, ah, dammit.~

~That's a lot of money. Like I. Maybe a thousand or 2, 000 in my account at a time. And that's basically when it clicked because I had no money, I couldn't work. ~And I had to figure out how to get over this. ~I had, my family was back in France. I didn't want to ask them for help or anything like that.~

~And so I had to figure it out. ~And ~so ~I started posting an ad. On a website called gumtree. ~And that's basically the equivalent of I forgot what it's called in the U S there's Craigslist, where I put an ad up ~to make websites and designs for people and ~basically three weeks, ~three weeks later, I was already making more money than I was on my way to job.

[00:02:00] And I only realized at that point that what I love doing for fun, like creating designs, graphics, but also building websites, I could actually have a career in that space and. I ended up joining different startups through that because of the work I was doing, and studied a couple of startups.

~One of them as well was basically I started working on like creative tools at a company called Campaign Monitor, where I basically worked as a, on a drag and drop email builder that would create. That would enable people to create like beautiful email newsletter that worked on mobile and desktop.~

And I ~loved~ really built a passion for building those kinds of tools where ~like ~you create an interface and people use that thing to create something out of ~that,~ all of that products. I really enjoyed that. And I had some designers on the team that didn't know how to code. ~And it's, that has changed, obviously, like that was probably over 10 years ago.~

And I was one of the only one that could code. And so I started building every time we had to create like animations and stuff like that, ~most of the designers would come to me to ask me to prototype some of that stuff for them. ~So I ended up building, starting building this tool that enabled Photoshop layers or the sketch layers.

Sketch was like this app to design UIs and stuff like that. And put them into this tool to create animations and extract the CSS automatically for that without having [00:03:00] to code anyway, end up launching this products on product hunt. And the CCEO of Envision reached out, saying that he would love to, for me to work for Envision.

And basically basically I ended up joining Envision in 2016 to work on a tool called Envision Studio. And that was also a creative tool, like a tool that designers use to create ~websites,~ apps, and websites, but also animations and prototypes. And stay there for four and a half years ~and sorry, I'm going on and on here.~

~But ~but that's basically what eventually led me to start Lifeblocks. Because as I worked on InVision Studio, which was a desktop based, file based application,

Okay.

Figma started to get a lot of market shares and was becoming very popular by the design community. And as a designer myself, I was like, Oh, I felt like I wanted to use Figma as well.

And a lot of people on the team as well wanted to use Figma. And so one of the things that Figma did really is that it wasn't file based. It wasn't desktop based. It was something that worked in the [00:04:00] browser. And you could instantly share your role with somebody and start collaborating together.

And that really felt magical because historically ~you always had to,~ if you wanted to do something, you had always has to save a file, send it by email and like back and forth that way, but there's still a lot of industries that still work that way. And that felt quite broken. And so we had this project at InVision to convert InVision Studio from a desktop based app to.

Browser based web based collaborative app where you had comments where you had, you could bring multiple people in that experience together and it felt like you were exactly in the same space collaborating, like basically what you experienced in Google Docs, Figma and those kinds of tools where it feels like you're together.

And so I led design for that project to make that conversion. And it took like a full dedicated squad. I think we were like seven to eight people at some

It took us a year and a half to build the initial version to make that transition.

Yeah.

And that was a bit frustrating to me [00:05:00] because. It ~felt it just ~felt like this is how everything should work.

Because the web was originally meant to be collaborative and it yeah. And it was a bit frustrating to me that it took so long and it costed so much. Money to the business to actually pull that off.

And with my co founder Guillaume was based in Montreal. We worked together at InVision.

We really enjoyed working on some of those problems together. And that eventually led us to start Lifeblocks. ~And and so in a short sentence basically ~LiveLux is ~the, yeah, it's ~the company that we ~started in ~officially started in March 2021, and we basically help companies create awesome collaborative experiences.

So we provide the APIs and the infrastructure as well as the React components to create Figma like app, linear app like apps, those kinds of collaborative apps. We ~basically ~provide all those tools to make that very easy for developers. So that's basically the journey. ~Yeah,~

it sounds fantastic. I've worked a little bit as a, I'm a software engineer as well. So I've worked on WebSocket APIs or I've worked on collaborative tools and they're [00:06:00] either really difficult to build because there is almost no infrastructure or there hasn't been up until the last few years to make it happen.

It just doesn't feel very collaborative at all, it ends up feeling stilted and janky and just not a great experience where you're just going back and forth like you would if you were all in the room together. It sounds like Liveblocks has come around at a time when we really need that kind of a push in that direction.

Yes.

Yeah. That's basically what, where we started the company and yeah. We think it's heading in that direction. Like when we, our initial kind of assumption that we had was like, okay, we've seen that happen with like maybe 10 or 15 years ago when Google docs came out and they started taking a lot of market shares ~from ~from Microsoft office, the office suite, and then Microsoft has to spend like multiple years to do that internally and enable collaboration in their tools to be able to compete.

And we've seen that [00:07:00] again, most recently with Figma basically taking over the entire UI design kind of market taking over Photoshop essentially and sketch for those use cases very quickly, actually, that was quite impressive. And so the bet we wanted to make is that this is not a technology that's only helpful for.

Creative tools, but this is also helpful for all kinds of industries. So this is one of the reasons we wanted to start Lifeblocks and create this company to, to enable that kind of experience on the web.

so at Liveblocks, you are focusing on letting developers create those collaborative experiences regardless of what industry they might actually be building products or websites for. So you just said a little bit of what inspired you to pursue this as you watched Figma take over, you watched Google Sheets and Google Docs take over, but what kind of unique challenges have you faced to build this?

Because we've talked a little bit about how it was very difficult for me at [00:08:00] least to wrap my head around it and get started in the past, but what other types of challenges did you face when you started to really deep dive ~deep ~on this?

We actually, ~when we built, ~when we made that transition at Envision, I didn't realize at the time I would start a company around this. With my co founder, we actually stumbled upon this and it clicked for us. We knew we wanted to work together. And so we experimented for about six to nine months and being a true creative tool fan, and I love building those creative tools.

We actually started making a video slash presentation tool, and obviously we wanted to make it collaborative like Figma, and it's only when we started working on this for multiple months that we realized that we were spinning. Literally like all of our time on the real time and the collaboration aspect of things And almost no time on the tooling itself And that's basically when it clicked for us We're like damn like it took us a year and a half a full dedicated [00:09:00] squad at envision

And again, it's just the two of us now and that's all we're doing right now.

So surely There's something to be done in terms of so that's basically when it clicked for us. We felt like there was a need and there was a problem to be solved because we faced it ourselves twice that's what really led us to do this. And the thing that I think is hard to do for there's a couple of things obviously there's on the technical side Scaling websocket can be very difficult So that's one thing we're solving, like enabling the real time aspect and being able to scale that to thousands and thousands of people that's inherently hard to do with WebSocket.

And the other thing that I think is difficult is also that collaboration can mean a lot of different things. And the multiplayer real time aspect, when you work together, almost like in a video game, that's only the tip of the iceberg. There's a lot more you want to cover. And so there are things like comments.

Notifications,

Sharing permissions. There's a lot of things that [00:10:00] you have to glue together in order to get a cohesive collaborative experience. Not just when you cover it together, but across the board within the product. And that's what we're trying to do. Like we're trying to provide all those tools and components to make that work very seamlessly.

~And yeah, I would say that's another thing that we have been thinking about quite a lot. Yeah. So~

~Okay, so you were, ~when you were describing Liveblocks, you say that you provide the concept of React components as a service. ~So Yeah. ~Can you describe a little bit more how does this approach ~develop ~benefit developers, particularly in terms of the speed and the flexibility and building these applications.

This is something we offer, but that's new at Lifeblocks. We only started offering React components if I'm not mistaken in October last year, on November, maybe. But six months, something like that. There's this idea. It's not new. This is, we're not the first one doing this.

I think a company that does this really well is clerk. It's the authentication platform. And they basically offer a set of React components that integrate both the front end and the backend seamlessly together. [00:11:00] And that makes it very easy for developers, especially front end developers to add a fully working feature that also has often a better design than if you were to do it yourself, because it takes care of all the edge cases, it takes care of it looks at all the best patterns and try to combine those things together.

So we. Started doing this at Lifeblocks for a commenting system. So what we did is that we looked at all the best kind of collaborative SaaS products that we see out there. So we look at Linear, we look at Figma, Google, and a bunch of others, and we try to identify the common patterns that all of those tools have and see if we can actually combine all those things into a React component or set of React components and hooks.

That front end developers can quickly add to their app and that's great because it makes it very easy and fast for companies [00:12:00] to add a full commenting system that is working end to end that includes things like, mentions reactions with emojis But also that ties automatically to a notification in app inbox or something like that, that you have in your app.

So the idea is to ship those components and make it very easy for people to get the value quickly.

~Okay.~

And one thing that we do

~Okay. Okay.~

little bit differently I would say at Lifeblocks ~than some of, ~than what Cleric does, for instance,

Okay. ~Okay.~

is that we try to

~Okay.~

ship that with like different levels of abstractions.

And so

Okay.

~the easiest way, ~the highest level of abstraction to integrate this Okay. You put a thread hook, like use threads and you list all the threads for your comments and there's a thread component that you put in and everything is working automatically and the only way you style this is by tweaking some CSS variables.

It's pretty good. You can get quite far with it, but there's a certain threshold at which you can't really customize anymore.

Sure. 

Can then. [00:13:00] Compose the UI themself and even use their own components from their own ~react system, ~design system, ~sorry.~

And that is very similar to what the library called radix does. And I'm sure you're probably familiar with radix page. And I love this way of like setting up components because there are completely flexible. You compose them the way you want and you can pass any kind of CSS, Properties to it any classes so you can use your own ~like ~css framework whether that is tailwind or something else And it's just gonna work and you have pretty much full flexibility that way so we think about it ~into ~like different level substractions based on what you need one is like really quick to get started and then as you go deeper down the tree and then You can ~go ~enable any kind of customization on top of that if you want to

That is super cool and that seems like a great way to do it because I can't tell you the amount of times we've started out with some component library and it works great. And then the designer says they want to do something that the component library doesn't support and suddenly you're [00:14:00] down a rabbit hole trying to force it to work.

~exactly. I film ~I'm a designer at heart. And so I know the feeling and I, yeah, I just like the idea of being able to ~like ~control, like exactly how the thing look and feel. Because I think that's what great products, have to do, right? If you build a great product, you have to have control over ~like ~how exactly how things look and behave.

And so that's what we're trying to enable as well at Lifeblocks. Yeah.

So you talked about how you looked at popular component libraries and different companies that were doing it well and reverse engineering the React components that you thought would be most beneficial to people who are using Liveblocks. So ~how did you.~ How did you ensure that these components were both customizable but also easy to use?

That's a good question. So I think I explained this a little bit. ~It's basically you have to ~for us, because we're so focused, all focus is enabling collaboration to make

And that sort of stuff, we try to look at okay, what all those If we look at all the best collaborative products out there, [00:15:00] what do they all have in common?

So that's basically how we did it. We started identifying like UI patterns and once we had this We basically had to decide okay, what is Standard enough that it deserves to be In the default opinionated components And what doesn't so that's basically how we did it. And then we have the different levels abstractions, as I said, based on if you want something that works, like 99 percent of like how SAS products do it, just use the default.

If you want to customize, Fine. You can still start with that. Then decide to use the primitive components that we actually use in the default components as well. And go deep deeper down the tree to make it a bit more customizable. This is more in terms of making things customizable from a UI standpoint.

But there is also a little bit of the functionality itself that I didn't really talk much about in the talk, but there is. Also, like where does a comment or a thread get left on, there's a lot of different ways to do this. Like for [00:16:00] instance, in a Google docs, you select a piece of texts, right?

You select some characters and you can leave an annotation right next to what you have selected. If you look at a tool like frame. io, it's like this tool to review video assets and films. You can actually leave a comment at a specific timestamp on a video, sound cloud as well has this kind of feature where you listen to a podcast or something, and you can leave a comment at a specific timestamp.

So ~we, ~we try to think about like, how can we enable comments, but like in many different contexts, another example is stigma. You can leave a comment at a specific X, Y coordinates, for instance, or on top of a layer. So we try to think about all those different contexts and where we enable this, for instance, is through, metadata.

So we have each thread can have a set of metadata and that can be whatever you want. So as a developer, you have extreme flexibility there because you can say, okay. I want a comment to have, I want a thread to [00:17:00] have a timestamp attached to it. And then you can use that in your UI to say, okay. I'm going to show a little avatar on top of that timestamp position, for instance, or if you build like a canvas based tool, you put that somewhere else on the X, Y coordinate based on that metadata that you stored. I don't know if I, did I answer your question here?

~think so. ~It's very much start with the building blocks that you provide. And then as your use case or as your specific requirements diverge from what the building block has out of the box, then you start to go deeper into your own customizations. Yeah.

exactly. I think a company that does this well as well,~ it's not,~ I think they do ship some like React components, but Stripe is a good example. ~Like they. ~By default, you will use kind of the standard checkout page that they have, or they build like a new kind of hosted site where you can handle like billing and all that stuff.

I forgot what that's called, but if you want, and [00:18:00] if that's not enough for you, you can actually build ~your own. ~Your own UI and deploy direct components for that. And if you don't want to use the on components, you can actually use yours and just leverage the rest APIs to build whatever you want. We think about it in a very similar way.

So how did you decide that you were going to do React as opposed to Web Components or, I don't know, Angular or Svelte?

Yeah. So ~we are, ~we actually looked quite a bit into web components and I don't want to talk for the team, but I also think that we're small, like we're 12 people right now at Lifeblocks and our strength is around the React ecosystem, Next. js,

And I think when you start a company, it's important to be focused and there's only so many things you can do.

And we knew that with react, we could do that well, and there was A big enough market to start with. So that's one of the reasons we picked that. I believe there was also some technical reasons [00:19:00] why we didn't go in the web components route. But yeah, we'll have to bring somebody from the engineering team to, to dive deeper into this.

~Yeah.~

It makes perfect sense. React is a good framework to bet on. It's not going anywhere, that's for sure. So if I was in your shoes, I probably would have done the same thing.

Yeah. And for people that don't use react, I can still use the rest APIs. And we have like different tools that if you want to do something that way you can. So that's basically the

It's a good compromise. All right, so let's talk a little bit about something that you touched on in your talk, which was the color mixing scale and the CSS logical properties that you use in your components. I'd love to hear more about the techniques that you used to enhance and adapt your UI with these.

Yeah, so disclaimer, that wasn't my work, that was actually mostly Mark from the team, super talented design engineer, and I really discovered this as I was working on the talk I [00:20:00] went pretty deep into the code base, and we basically use a color mix CSS property to essentially, the value of this is that you can create, for the default components, for instance, we have Several CSS variables that we give to people that they can easily update to fit and match their brand as best as they can

Yeah. ~Yeah.~

the accent color, you can only change it once.

And basically there's five or six or maybe more different. Subtypes of that color that get generated through color mix. ~And~ and that's pretty powerful because you can create different colors that are not transparent. There's no opacity to it. And so it's enables us to build ~like a ~a system that's super cohesive and accessible.

And the way Mark enabled this, I thought it was pretty nice. That is that we basically have, CSS files, a color mix scale, custom CSS property that we've created that then leverages post CSS. And [00:21:00] PostCSS calls a function that generates the proper color mix string for CSS at the end. And what's nice about this is that then we have five, six, maybe a bit more variables that we give to people if they only edit those.

Everything else is going to automatically flow through from that. I would recommend looking at the GitHub repo. If people have a chance, it's pretty cool how it works. Yeah.

That sounds awesome because ~I've, ~I know from my own experience, finding and replacing, trying to make sure that the color, the new color is reflected everywhere is a painful experience and almost never works on the first try.

Yes, exactly.

Very cool. ~All right. ~So how do you approach internationalization and localization in live blocks, because that is, I know something that a lot of designers and developers struggle with based on what country the user might be in or what language they might be speaking. So how do you make sure that works?

Yeah. [00:22:00] So technically speaking, we have two main things here, so there's probably more, but the two main things are, we have different props that we can enable on the components for left to right or right to left,

Okay. 

Things start floating from the right to the left.

So that works for those kinds of languages. And then for ~internal~ internationalization, ~did I say that right? I think so. ~We use the. Intel API, and it's pretty powerful because you can actually do things like ~relative, I think it's ~relative time format for memory that is called, and you can basically pass I want this date to be related for in that case, and ~I want it in, ~I want it short, so there's different lengths that you can use.

And I want it in English. And so if you do that, it's going to tell you one min ago, right? For one minute ago. But then you can pass FR, right? For the language. So French, for instance, it's going to say And so you can do that for every language. And [00:23:00] that can actually listen to the default settings that the people have on their computers and use that and so that's a good way I think to enable Those kind of use cases.

Yeah.

It's nice that you're using actual APIs that are standardized as well. It's a lot less, fiddly than if you were trying to use a particular library to help with that.

I always use those kind of libraries before and Yeah, they're pretty powerful. And I realized like through this project now that ~was ~There was like a proper standard api intel that works really well. And so yeah, we've been using that definitely recommend. ~Yeah You~

Nice. All right, so what can we expect from Liveblocks in the future? Where are you, what are the next things that people can get to, see to come out of this?

Yeah. So we mostly talked about the comments aspect, in terms of React components as a service, we recently shipped live blocks, notifications, and that basically enabled people to have notifications in the app. And so for [00:24:00] that, we also have another set of React components as a service.

So we have one that enable people to create like an In app inbox, that's like automatically synced to the commenting system that we provide so that if somebody get mentioned in a comment that will automatically appear in the, in app notification inbox. So that's one thing ~we~ we're working on.

There's a ton of things we want to do as well with like text editor use case. And Making it very easy for people to create Google docs like experience. That's already possible today. But we want to dive deeper into this ~and ~and yeah, there's a ton of other components that we're thinking about.

So we're always looking at like when you don't have access to a document, like being able to request access or if you want to share something with somebody, like often those UIs look very similar between different SAS tools.

So ~there's. ~There are some challenges here to be solved, but I think those are some of the things we want to enable in the future for sure.

Well, Steven, it's been great talking with you. Is there anything else that we [00:25:00] haven't covered that you'd like to touch on?

I don't think so. I think that was a pretty, pretty deep conversation. It's hard to talk about code and like patterns. I think the, what I would recommend is like to look at, all of that stuff is on GitHub, so if you're interested, I'd definitely look at this. Colin, the founder of Clerk also had a great talk that you can find on YouTube.

Definitely recommend looking at that as well. We talked about like React components being the new gold standard API. And so this is something I really believe in as well. And so for any founders or any people like creating dev tools, I think I would definitely look ~into~ into this as well.

Okay, we can make sure to have that in the show notes. And where can people get in touch with you if they're interested in learning more about live blocks or talking more about React server components or anything else?

Yeah. ~I'm on XI was gonna say Twitter. ~I'm on X. My handle is Steven Fabre, S-T-V-N-S-T-E-V-E-N-F-A-B-R-E. And also life blocks feel free to follow us on Twitter or XI should say. And [00:26:00] we also have a Discord channel can be helpful. We're quite active there and so that's also, liveblogs. io slash discord. So yeah.

Fantastic. Thank you again for joining us on the podcast today. It's been great to talk with you.

Thank you, Paige. It was ~great. ~Great talking to you. Appreciate it.