Episode 59 - Free
Steven: [00:00:00] I thought that was a really cool use case of like, okay. There's like, not like necessarily like a creative tool, but it's like, okay, because you like, make a digital product feel like you're in the same space together, actually makes the efficiency for, in that case, nurses and doctors a lot, a lot better.
Andrew: Hey, before we get started, I'd like to remind you that the full episode is only available to our subscribers. The current platforms you can subscribe on are YouTube, Spotify, apple, and Patreon. On the full version of this episode, hear about Steven's thoughts on live block's, pricing, and of course all of our tool tips.
And with that, let's get onto the episode.
Andrew: Hello. Welcome to the Dev tools FM podcast. This is podcast about developer tools and the people who make 'em. I'm Andrew, and this is my co-host Justin.
Justin: Hey everyone. Uh, our guest today is Steven Fabre. Sorry if I messed that up. Uh, CEO and [00:01:00] co-founder of Live Blocks, uh, Steven. So glad to have you on. Uh, we've heard a lot about live blocks. Uh, but before we dig into that, would you like to tell our listeners a little bit more about yourself?
[00:01:10] Steven's Background
Steven: Yeah, sure. Thanks. Uh, thanks for having me guys. Good to meet you as well. And, um, yeah, so live blocks, oh, I guess a bit by myself first. Um, so. I'm Steven. I grew up in the southwest of France, but I've been kind of all over the place. I, after uni, so I studied computer science, then I went to do an internship in Canada, in Quebec for a little while.
Uh, and then decided to move to,~~ uh,~~ Sydney in Australia. So, uh, I was just gonna travel there, um,~~ you know,~~ go around Australia like a lot of people do. And, uh, yeah, I ended up staying there for seven and a half years. Worked in a different tech companies there, studied a couple of my, uh, studied a couple of startups and, um, eventually became [00:02:00] Australian.
So I got, uh, got my citizenship there. Uh, so like a, a, a trip that turned into, uh, a life-changing kind of situation. Uh, but yeah, long story short, uh, I. Towards the end there, I worked, um, on a tool called Easy, and that was, uh, a web animation tool. And there wasn't any, any tools at the time that could do this when I was starting working on this.
Uh, when you wanted to do animations or for the web specifically, uh, you had to know code right to do it. And so study making this tool where you could like put like some of your sketch layers or Photoshop layers into this, this tool and it will enable designers to kinda animate stuff and you would get the CSS and code for it on the other side, which was super helpful for some of the designers.
Um, I worked with, uh, that didn't necessarily knew, uh, how to code and, uh, that basically led me to Invision. And so I started working,[00:03:00] uh, at Invision. Um, From Sydney remotely, and most of the team was, uh, in the us And so two years, uh, two years into that journey, ended up moving to New York City, uh, Brooklyn.
I think that's, that's where you're at, Justin right now. And so, yeah, I lived in New York for a few years. Um, yeah, I kept working at Invision for a while and that, that experience at Invision is kind of what, um, got me introduced to the problem. I'm, I'm working on now, uh, with Gillam and, and the team at Life Blocks, uh, because we were working on a tool called Invision Studio.
I dunno if you guys remember. Uh, it's more for a tool for designers, but it's essentially a, a design tool very similar to Figma, uh, except that Figma is way better if I'm being, if I'm being honest. Um, but the point is that tool was a desktop based application that designers could use to design apps, web websites, you could do like UI design, but also animation, prototyping, that sort of stuff.
And, um, and it [00:04:00] was all file based, they desktop based at first. Um, and Figma started to, to get a lot of like market shares, a lot of, uh, interest in the designer community, uh, design community, sorry. And we basically had a project of converting Invisions studio to, uh, from a desktop based application to a browser based multiplayer, uh, where you could see like cursors and it'd be like multiple people in the same file.
~~Uh, ~~and so I was hitting a design for that project and we had like a dedicated, uh, um, squad, uh, full of engineers kind of working on this problem. ~~Uh, yeah. ~~And basically that took over a year, uh, to get to a first version of that browser based application. And I had no idea at the time I would be starting a company in this, in this space.
Like, no idea. But I got very intrigued and. If I'm being honest, a little bit frustrated by the fact that it took so long and even after all that time, the experience wasn't quite as smooth as what you would experience in Figma. Like [00:05:00] it would be a little slow to like update some of the, like as you would drag stuff around, like layers into the tool, they would take like a couple of seconds to update on the other side.
And then live cursors were like kind of out of sync with that. Um, and so as a designer, I was, I was a little bit frustrated that we couldn't, like we could, but it was a lot of work to get it, uh, you know, performant and work really well, like, like Figma. And so I, uh, I ended up leaving, uh, Invision after four and a half years.
I had a great time there. I met a bunch, bunch of great people. Uh, and one of them was my, my co-founder Gillam. Um, He is incredible, a super talented engineer, but also really gets the, the, the business side of things. I'm very lucky to, to work with him and um, towards the end, I'd Invision, um, he joined, actually a fun fact, maybe I'm going in completely different directions here, but Guillaume's, first day at Invision was when we had an offsite, [00:06:00] and I dunno if you guys know, but Invision was one of the pioneer in time of remote work.
So we were all working remotely. There was no office way before Covid. Uh, so the first time I met Guillem, we were in, in San Francisco, and basically we realized they were on the same team. So there was another French person on the team. Uh, he lived in Montreal, he still lives in Montreal. But um, yeah, when we met, Um, we realized we were from the same region in France, which is like super, super random cuz it's like a tiny, uh, rural kind of remote area.
And so, yeah, we got, we got along really well, worked on a bunch of projects together and quickly we decided, okay, let, we should do something together. We didn't know what it was going to be. And, uh, that's how I met him. And, uh, yeah, we ended up, both of them eventually leaving in vision, working on the video slash presentation tool. And when we worked on that months into the project, uh, we realized, [00:07:00] damn, this is the same story that's happening again. We're spending all of our time trying to figure out the real time aspect of things and we have pretty much no time to, to focus on the core mechanics of the, the actual tool itself. And yeah, that's basically, basically when it clicked and we decided to, uh, basically take to some of the stuff that we had built for this tool product justify and make it so that any developer and company could use it to, to build collaborative experiences.
Uh, that was a long intro. I just realized, sorry. So
[00:07:30] Experimenting with Collaboration
Justin: No. All good. All good. That's great. Such a cool story. So what was the, what was that pivot like? Uh, did. I'm assuming that you had like investors at the time or something? Did. Did you have to
Steven: Nah,
Justin: oh, okay.
Steven: no invest, no, no investors. At the time we were, um, we knew we wanted to do something together, so we, we were kind of experimenting on different ideas
Justin: gotcha.
Steven: and because we had this background in, uh, creative tools, and that's something like I'm personally passionate about. I love making tools that. People used to create stuff with those tools [00:08:00] like that.
I love that. And I love like super interactive like design tools, uh, where there's a ton of things you can do in like one space. I found that I found those products super fun to, to design, but also build, they're like quite challenging cuz there's like a million path people can take. So we just felt, oh, the pitch didn't exist at the time.
And working at Invision, we had to put a lot of presentations together and, and videos to communicate a synchronously to pitch ideas and, and collaborate and do all that kinds of stuff. And the idea was like, okay, Google Docs, uh, Google Slides is, it's not ideal to us. Uh, cuz we like, like beautiful products and like, it, it, it didn't feel as good as an Apple keynote and we also felt like it was lacking a v ideo component to it.
So we're like, okay, let's try to make like a iMovie meet, uh, apple keynote, but in the browser and make it multiplayer. That was kind of the. The idea behind that tool. But, um, yeah, eventually, basically it clicked. We decided [00:09:00] to, to go onto the mul multiplayer side of things, dev tools like platform, API side of things for building collaborative application because it's a problem that we faced and Invisioned firsthand.
There was a full dedicated team like building that and it took like over a year and a half like, or close to a year and a half to complete. And for us also building that tool, it felt damn like we're spending again, like months, like trying to figure this out. And we tried like a bunch of different technologies, uh, that existed at the time, like Y Js order merge, but they didn't.
They, they're all great and like I, I still, we might still use some of those today, but they, they didn't quite work the way we wanted them to. And so it clicked in eyes like we had this problem, we have it again, that there's probably something there, uh, that, that felt like we should. Pivot into this, this direction.
But yeah, we hadn't raised any money at the time, uh, yet.
Andrew: For our listeners who may not know what live blocks is, can you give us like the elevator pitch?
Steven: Yeah. Uh, maybe I should have started with that. That's a good point. [00:10:00] So, uh, live Blocks is,~~ uh,~~ a real time infrastructure for developers. And so what we enable developers to do is we, we provide them with like tools and APIs to build, uh, collaborative apps. So if you want to build. A Figma like product, a Google Docs like product, a notion like product, anything that's collaborative, which is in my opinion, pretty much all SaaS products, um, you can build that with live blocks, uh, a lot easier than if you were to kind of build that real time multiplayer collaboration infrastructure yourself.
Uh, so that's basically what we do at Live Blocks. We provide the, the APIs and tools to, to make that a lot easier, uh, for developers.
Justin: Yeah, that's, that's really. Really awesome. You, you know, that story that you're telling though about like, oh, this is a continual problem. It's, it's something that I've seen as well, and especially as real time collaboration becomes more table stakes. Um, we had, uh, Sunil [00:11:00] Pai back on episode 49 who he's working on Party Kit, um, which, you know, if, if we had, we were talking to him on that episode, like if we think back, it's like the things that you had mentioned, like Y Js, it's been around for a while and it's been sort of like, One of the main ways.
And then there have been like some other tools, um, and like socket io and stuff like that. But they, they leave a lot to be desired. And, um, something that I think is interesting about live blocks. So could you talk a little bit about like how it integrates into your, like, applications? Uh, cuz I thought that was like a unique po like positioning that y'all had.
Steven: Yeah, that's a really good point. You bring that up. There's a ton of great tools out there, you know, mentioned. So io there's even like pusher that are really good for like this kind of like web socket, uh, communication solution. Um, then there are tools like the, the one Sunil is working on Party Kit I think is is awesome.
~~Also, ~~what we're [00:12:00] trying to do at Live Blocks, the entire test behind live blocks is that, Our goal is to, if I were to summarize it, is to try and combine Figma infrastructure and offer that as a service and make that all that stuff work well together. So what's that stuff there is, when you think about collaboration, there's the collaboration that happens within a document, a live blocks, we call them rooms cause that's the concept we use.
And that's when you wanna build multiplayer experiences like Figma where you have multiple people in a document. And the document is the artifact on which you collaborate on. And so to build those experiences you need serve like presence, broadcasting. You also need like some kind of storage solution to store the document and enable multiple people to edit that document at the same time without having any conflicts in the data.
So that's one part. But if you think about those collaborative SAS products, you also need stuff like [00:13:00] commenting. Where people can like mention people, bring them into this document you're working on to collaborate. There's also this concept of like, okay, I need to share this document, right? Like, I need to copy the url, get people into this, which ties into a little bit of like permissions.
Uh, we can see this document, we can edit it, know, that sort of stuff. Um, and on top of that, there is also, okay, now that you have those documents, you also need to build a view where you can browse the documents and organize them. so what we're trying to do is to combine all those use cases into one solution that works really well together, um, so that people can build not only the multiplayer experience, but also like all the surroundings that you need and the APIs that you need to build. A true like SaaS collaborative product. Um, and so for that, you need to integrate multiple tools together. So you need to integrate a web socket mechanism to, uh, enable the [00:14:00] real time connections within the multiple document. You need to enable conflict resolution on the, uh, data of the document itself. Uh, but you also need like rest APIs to like be able to, to, to tap into all the rooms and documents that have been created to be able to build like those document views, uh, et cetera, et cetera.
So I guess you, you get the idea of where, where I'm going with this. Does, does that make sense?
[00:14:22] Collaboration Platform
Andrew: Yeah, so does like live blocks is, is live blocks kind of dipping its toe into like user management too, because it seems like there's a lot, a lot of that in the docs and even some features teased about it.
Steven: So we really do not want to go into, uh, authentication and. That, that's completely not our business. We wanna work really well integrate with, well with tool like tools that already exist. Like, uh, next auth our clerk, which awesome, I've been using it such great dx. Um, we don't wanna do that at all. Like, uh, there's already plenty of problems that we're tackling and this is definitely not one of [00:15:00] the problems we wanna tackle, but, uh, we want to integrate really well with those tools so that, so that you can, uh, build like permissions and stuff like that for document level, like permissions.
So that, that way, like basically when you integrate with live blocks, I guess I just realized, Justin, I didn't answer your question earlier on how you actually integrate with, uh, light blocks that might help. So standard the, I'm gonna talk about next. Cause that's probably the, the, the tool like people are most, uh, familiar with, uh, listening to, to this podcast when you, uh, have a next project.
Uh, you can, uh, basically create, you have a package for React that you can install. Um, so like at Live Blocks / React. And when you do that, we give you, uh, different to like a room provider. Uh, and then we give you different hooks to basically integrate with the stuff I was talking about earlier, like presence, storage, broadcast, all that kind of stuff.
And then to connect to live blocks through those like [00:16:00] React APIs, you're able to create a client and authenticate that client, uh, authorize that client in, in your backend endpoint. And that's, that's where you basically make the connection between you authentication provider clerk or whatever you use and assign a user id, uh, to like a live blocks, the live blocks context, if you will.
And, um, and then what we enable is that each room can have like groups and, and user permissions. And you just pass an ID and you like, Set it to read only or write and that type of stuff. And we enable kind of, uh, permissions that way, uh, within the product. So then you can, like, uh, when you create your room, you can decide, okay, this user is gonna have access.
This user is not gonna have access, or these groups gonna have access. Or not have access. And groups gonna enable you to build stuff like groups, uh, like, um, like folders of, of, uh, of projects. Um, and that also enables you to build, like, share, uh, like share dialogues, which are like a standard part [00:17:00] for every kind of SASS collaborative tool out there,
Andrew: Yeah, looking at your guys' share dialogue, I'm like, that looks exactly like our Share ~~di ~~dialogue. I built that exact design just in my design system.
Steven: ex. Exactly. And it's like a, um, up until now, all of our, the only ways you could integrate with live blocks is through our client packages. And so right now we have react. We have a standard like JavaScript package, but then we have a React on top of that. If you use React, that makes it a little bit easier.
We can still use the, the client package if you build with view or belt, whatever, uh, front end framework you use. And then we also have packages for like, uh, state management libraries. So if you use like Zustand, or Redux, uh, then you can integrate with that and kind of turn your, your, your store into, uh, into a collaborative, uh, store that many people, people can, can edit.
And ~~so, um, ~~so that, that's the way we integrate today. So you still need to do quite a bit of React work to integrate, but I'm pretty particularly excited that we're starting to, um, to work on like providing[00:18:00] actual prebuilt components that will make it super easy to do, like very specific stuff. Uh, such as comments.
I think comments is gonna be. It's been one of the, the top, uh, most requested feature requests we've had. And, uh, we're shipping that as actual react components that you like, kind of like style yourself and like it's all accessible. Keyboard shortcuts are handled and you can just compose the UI like the way you want and make it look exactly like your product.
So that's gonna be another way you can also integrate with live blocks.
Justin: Yeah, that'll be huge. That'll be huge.
Andrew: Yeah, that, that's super cool. You like most other, uh, like collaboration libraries are really just like nuts and bolts, but like those things like access popovers and comments are things that you're going to want, so it just kind of makes sense that you would do them.
Steven: yeah, exactly. Like I think that's gonna be the, the truth is like all those patterns are like very similar between products and so if [00:19:00] we can provide like a prebuilt component, uh, for those, um, That helps you like get up and running very quickly, like in a couple of minutes. Uh, and then obviously there's always an Netscape path.
You know, if you want to go full custom, you can still do that. Um, which I really like, it's kind of similar. I dunno if you guys use clerk, uh, you know, they provide you like the prebuilt component, which is awesome. Like you can literally build like, like the, you know, the user panel where you change all your settings.
You can also have like the login screen, all kind of rock out of the gate, which used to take like weeks of work before. And even if you're not happy with that, you can, okay, cool. I'm gonna use the custom hooks and like, kind of do, uh, a custom UI myself. But I, I think it's great for adoption, like helping you sort of get started.
[00:19:45] Differntiating via DX
Justin: Yeah. Yeah. That's super awesome. Um, so this, that seems like a very clear differentiator is like, okay, we're actually starting to sort of offer these like somewhat prebuilt product, like parts of products that you can like, integrate to [00:20:00] like, get started faster. How, like what's your sort of narrative around how.
Uh, light block's tries to differentiates, differentiate itself from the like, broader real time sort of. Platform marketplace. Cause it, it like does seem like, you know, with real time becoming such an important, it almost feels like table stakes these days. It's like people want real time in their, in their apps and, and I think like you're saying, the engineering effort it takes to build that custom is just like way too much.
So there are like, we're, you know, seeing more products in the similar category as live block, like crop up. Cuz people are having the same realization. It's like, oh this is really hard. Um, how do you. How do you like place live blocks in this overall ecosystem? I.
Steven: Yeah, that's a good one. Um hmm. Yeah, I mean it, that kind of ties into some of the, the stuff I said earlier. Uh, I think ~~I. ~~Our strength and something we always focus on is we try to [00:21:00] actually make sure all that ecosystem, like the, all those experiences you need to build to, to make a collaborative product, work really well together so that you don't have a lot of plumbing to do. Which in my experience, when you build products, like the plumbing part is like, what's, what's hard? There's a bunch of like great technologies, but then when you wanna make them work well together, sure you can, but it's gonna be, it's gonna be hard to do.
And so that's always been a focus of ours. So, um, making that stuff very easy. DX is super critical for us. Like, I dunno if, if you can tell, but I dunno, we spend a lot of time on like documentation. Uh, even like the APIs themself in React, like we try to do all that stuff like in type script with like comments so that when you use that, where it doesn't matter where you use, where you, where you connect with live blocks, either it's in vs code, in the docs in the dashboard.
We try to like have a really good DX on like, on all the touch points you can have to like reduce the time to value as [00:22:00] much as possible. So, I dunno if I went on a tangent if I'm answering exactly your question, but I think we're trying to make stuff like work really well together so you have very little plumbing to do and make it very pragmatic for you to not only build a new collaborative product from scratch, but also you're an existing like SaaS company.
You have an existing product that has worked for like a decade or whatever, you already have your API endpoints to like store the data, you have all that stuff. Our goal is to make that transition very easy for also those companies so that they don't have to rearchitect everything. Um, So, yeah, I guess for us, something we always think about is like, DX, time to value.
How do we, how are we pragmatic about the solution we offer? Even if sometimes the solution is from an engineering standpoint might not be always the, like the, the purest uh, approach, but it might actually be the most pragmatic one that's like that, that's the one that wins and makes it very easy for companies, um, to, to build and make [00:23:00] those, those products collaborative.
That's kind of the approach. I would, I would say we take, um,
Justin: Yeah. I definitely think the DX point shines through. I was looking at your developer tools, uh, that you have. Those look really, really awesome and it's another one of these things that's a little bit understated. So if you're doing real time stuff, and especially if you're doing like, oh, well, I've built sort of like a slap together.
It's like a Y js custom web socket thing. It's like figuring out. This, like the state of everything, it can be, can be hard. So this like built-in dev tools where you're, you're seeing like what the collaborative blocks are on the page and like what their current state is and as they're updating, that's super slick.
So cool.
Steven: Uh, I'm glad, I'm glad you brought this up. Like, uh, I, uh, I love this, this product. So just, just for people listening, this is the live blocks, dev tools browser extension, so it works for Chrome, Firefox, and Edge. Just wanna make sure I was not missing one of them. Uh, we used this awesome, [00:24:00] uh, company for this, or product, uh, it's called plasmo, so I don't know if you've built, uh,
Justin: Oh yeah.
Steven: built, uh, extensions~~ for,~~ for browsers.
Like it's, it's awesome. I haven't used it myself, but like the team has been, it's enabled us to build like a, a lot faster. Um, and I love this product first because ~~I. ~~I know, it's like, it's super hard to like debug and build collaborative experiences because you have like so many people that can manipulate the state, like you have presence broadcast, the storage itself.
So being able to like see all that stuff, um, makes the DX like, like it's really hard for me to think about building a multiple experience without this now. And, but what I like most is that this, this project was actually an idea from, uh, uh, Vincent on the team. And, uh, mark, they, they worked, they worked on it together.
They kind of pitched the idea of building this. Uh, and that's, that's one thing I was like, super, super happy to, to see like that there's something that actually came from, like the team. They, they, they, they felt like they had this problem and [00:25:00] they kind of pitched it to us and they're like, okay, let's, let's spend a couple of cycles on this and, uh, try to get it to market.
And they've done an awesome job.
Andrew: Yeah, I just want a second that your docs and all the websites are just like absolutely beautiful. Like even just looking at the examples like the live cursor one, like you have this like simple, easy to read code and then examples that just like work so fluidly. It's a very, very good sell. So, so good job on that.
Steven: Oh, thank you. It's been a lot of, uh, work from the team and, uh, I'm glad that that comes through. And, um,
Andrew: Oh, definitely.
Steven: a lot of fun facts. The, when this come, when this, uh, this episode's gonna go live, we may have an entirely new docs there. I'm really excited to, we're working on a, on a new, I mean, it's kind of the same base, but like, we're working on a new version of the docs that I think is gonna be super sweet with like an interactive tutorial, uh, like side by side view where you can actually start, get started.
Um, yeah, I've, [00:26:00] I'm like, I love that stuff, but So I hope we're gonna like it.
[00:26:03] How's it Work?
Andrew: Yeah. So, uh, let's get into like, I guess a little more technical questions about, uh, how Live Blocks works. So how does it deal with conflicts? Uh, if you're doing collaboration, uh, there's very high chances that you might have conflicts in the things that you're dealing with. So how does Live Blocks deal with that?
Steven: Yeah, so again, I don't wanna, this, this was mostly handled by, uh, my co-founder, CTO and, and the engineering team. Uh, but the way it works, so, as I said earlier, we have, you know, the, the multiplayer rooms, so rooms that are collaborative, we have that on the edge. Uh, so they're like very close to user locations.
And within those rooms, we have a product called storage. And the storage is made of, uh, conflict free data types that we, uh, enable developers to use, uh, within their applications. So we have three, uh, conflict free data types. We have live lists, you know, it's very similar to an RA except that now you can have multiple people kind of reordering [00:27:00] stuff in that list, and we're gonna resolve the indexing of that.
Um, you have maps, live maps, and live objects. ~~Um, ~~and the approach we took, uh, is not like a pure cr DT solution like Y Js, uh, which Y Js is very, um, kind of, that has a bias towards like text collaboration. Uh, ours is very similar to how Figma those things. So we, we resolve some of the conflicts on the server.
It's not like decentralized where like, you know, everything kind of happens on the client. Um, so that, that's kind of how it works. Uh, some of the conflicts that really happens, we kind of resolve them on the, on, on the server or the last, last change wins. And then from other stuff like reordering lists, uh, that's some of the stuff we handle, like based on the index, uh, you put, we enable multiple people to kind of reorder, uh, items within the list.
Um, so that's at a glance kind of how it wo rks.
Andrew: So I I don't know if you know this, but like the Redux, Redux one, do you like when you're using it, do you have to like declare live [00:28:00] lists in objects or is it just like, oh, my redux thing is our live list in a live object thing now?
Steven: so for Zustand, so it's a lot more explicit if you use the client or the React package directly because you have access to those, uh, data structures. You, you just decide, okay, I'm gonna create a live list. And you define that. You even, you have your config file for live blocks. You define the types of, like your data, uh, your document and stuff.
And ~~you, ~~you have full control over that for Zustand and Redux. Um, you basically put a middleware of live blocks and then behind, like on your current state and behind the scenes, we kind of, kind of resolve that and try to put stuff into live list, live maps, live objects. Uh, but we have to do a bit of guessing.
So sometimes we don't fully get the intents, but there's like a way to kind of within that kind of define that yourself if you need to and if you see something that doesn't quite work. But again, this is a good example of like, um, train should be pragmatic on like, There's a bunch of like, developers that have an existing app[00:29:00] and they use like Zustand for example, or Redux to manage the state. And it makes it very easy for them to like see the value of live blocks of like, okay, I've got my state, I wanna make it multiplayer. It's very easy to kind of add the middleware of live blocks and kind of, uh, see how it could look like. And then, you know, as you wanna take this to production, then you kind of dive a little bit deeper and kind of decide the structures you want to use and that sort of stuff.
Um, I think we may have lost, uh, Justin now.
Andrew: Uh, yeah, I was just noticing that, um, I'm checking Discord.
Justin: I'm still.
Andrew: I just messaged him. Um, let's, I think we can get one more question in. Um, so like, oh, he says he is still here. And he can hear himself and himself. Um, we can't hear or see you. Okay. Um, yeah, so, uh, so like, keeping on with that theme, you said that like, on the server, the last person wins. How does it deal with offline then?
Because ~~_like, uh, I, I_,~~ I work on a product called Descript and, uh, it's very possible that somebody was trying to like, work on their video offline, works for an hour and then wants to merge the stuff back in. So how does like that situation work?
Steven: Yeah, so that's a good question. Live blocks currently when you use storage, uh, you can basically go offline for a little bit and we, uh, will persist the data on like memory, meaning that that's, you know, if you go offline for, you know, 30 minutes or an hour or two hours, and then when you [00:30:00] reconnect, it will kinda automatically send all that, those changes that you've made and kind of resolve the conflict that way.
That that's how it works. Um, we're also working on like, um, ~~Storing that in index db, ~~uh, so that it's, it can persist a lot, a lot longer, but I think that also includes some, like, I think at a certain point, realistically when you build like a Figma like product or Google Docs like product, you want your system to be reliable so that if you're on the flaky connection, if you go offline for a little bit, you can still work and you're not gonna be disrupted.
Everything happens locally first. So like it's, everything is instant. It feels like it's super responsive and kind of syncs, you know, as it's his fits. Like if you're, if you're logged in, if you go offline, it's gonna sync back up. One, you go back online. Um, but then if you enable full offline, which is something we wanna do, um, then you probably need like processes.
I think something we still need to, to figure out. But like if you go, if you walk offline for like two weeks and somebody else works offline for two weeks, Like, you [00:31:00] gonna have completely, if you work in the same part of a document, it's gonna be completely different. So it's like at that point, you probably need to enable people to kinda build like an interface like get, or something like where you can like sort of branch in or like, so yeah.
Then an interesting problem, um, which we haven't fully solved yet. Right now we are just, um, yeah, focusing on the real time, making sure it works if you go offline for a little bit. Um, but there is a big topic there to do for, to figure out, for sure.
Justin: Reconciliation's really hard.
Steven: Definitely. Yeah.
Andrew: Uh, I complain about git merge conflicts. I can't imagine complaining about like, how, how do you resolve collaboration conflicts? That, that just seems quite hard.
Steven: Definitely. Yeah.
Justin: It's like a rebase for your data.
Steven: Mm.
Justin: interesting.
Steven: Yeah.
[00:31:50] Bringing Desing Experience to Developers
Justin: So what part of you, you know, you'd,~~ you'd said before that this. When you were creating live blocks or before you created live blocks, ~~you, you were building a different [00:32:00] product. You're building, uh, something that you still ended up working a lot on real time collaboration. So what part of that, and even your time and it Invisioned, sort of shaped maybe the DX of live blocks or how y'all approached building this product.
Steven: Yeah, that's a good one. This is my first time building a dev tools, and so I'm, you know,~~ I, I've always liked building stuff. Uh,~~ I always liked engineering stuff. Uh, ~~but I've, most of my career I've been, uh,~~ product designer. I actually started as a web developer. Uh, but worked with a UX designer. ~~Uh, my manager was a ~~I was on the UX team and I quickly made the shift to towards more like product design.
Cause I really didn't like building stuff that people would design and I would have to build them. That's something I didn't really enjoy. I kind of liked the idea of like, here's what I want to design. Here's is what I imagined this experience to feel. And I kind of wanted to build out. I was always interested in the [00:33:00] interaction side of things.
And so a great UX is always like something I'm like, I'm like obsessed about, uh, whether it's in a UI tool, you know, like, um, when you build like a SaaS product, you actually build like a UI and it's like, here's the thing that people interact with. Here's the path that people will take with a dev tool. Um, It's a lot harder, I think to do a great dx.
I'm still very much, I'm still learning a lot like, um, because you have so many different touch points. Like it's not like here's the product you go to and you're gonna use this. It's like, here is an API you can use that way. Here's another API you can use that way. And here's the docs that's over there.
Here's your dashboard that's over there. You have like a dozen different touch points where they have, they play that play a huge part in the developer experience. And that's the thing like that I find really challenging with dev tools, but I'm also [00:34:00] obsessed about, like, DX is the most important thing to me.
Like making sure, like thinking about all the flows of like how people could interact with live blogs. Making sure it's always clear what, what needs to be done. So I don't know if I got influenced by my experience at Invision or working on like design tools in the past. But I would say that my design background, I would say is probably what drives kind of, uh, user experience or DX for,~~ for, ~~for our case.
Uh, making sure we have a really good dx, something I'm really passionate about, but I it's a teamwork, like, it's like with the ui, like with, with a SaaS product where you have a UI that you interact with as a user. Sure. Everybody has a role to play in making sure that's a great experience. It's a team's effort, but a lot comes down to like, if you have a really good design team, really good front end, uh, really good front engineers, you chances are you're gonna have a really good product, a really good experience [00:35:00] with dev tools.
It has to come from everybody that works on the product. So, like, engineers in fact are almost most responsible than, than designers on the actual. UX because they're gonna be the ones shaping the APIs, the names that you use within the APIs. Is that gonna scale for like years to come? Is this concept gonna remain true?
Like you have to think deeply about that stuff. you putting the right comments in there in TypeScript so that when you use that in VS code, you see the tool tip that tells you how to use this? When you have the tool tip, is there a link that takes you to the documentation and the documentation
where's gonna write this? Is it a dev on the team? Uh, is it an engine? So it touches so many different points that it has to be core and central to everything we do, and it has to be part of the culture of the company. Um, that's one of the biggest challenge and something that I'm like, I think about a lot, uh, and I'm happy where we're at, but I think there's a lot more we can do even to make the DX even even better.
Andrew: Yeah. Uh, DX Dx to me seems a little more higher stakes [00:36:00] than ux. Ux. You can be like, oh, we shipped a crappy experience. We make 'em click different. But if we ship the wrong dx, it's like, oh, these people have to change their code now. And that's a lot harder than just saying, oh, learn this new workflow.
Steven: exactly. And then you're gonna have like a new version of the app. It's not an easy ask to ask people to upgrade. Like some upgrades might be like, okay, cool, it's gonna be five minutes. I'm gonna do it fine. But why is a company or developer going to upgrade to a new package of your product and spend like hours doing this? Like, why would they do this? They're already getting the value. So like it's every decision you make in a, in a dev tool is so, some of them are like a one-way door. It's really hard to revert those decisions. You can always do, but it's, there's a cost to that, to that which, yeah, it's, it's a lot harder, uh, it's a lot harder to build a dev tool, like in my experience than like some of the stuff I worked on in the past.
But it's fun. It's fun.
Justin: Yeah, developers are hard to market to. They're like [00:37:00] very finicky crowd and they have very low patience and they have a lot of confidence in what they think they're capable of.
Steven: That's true.
Justin: So there's a lot of interesting things there.
Steven: yeah, it's a good point. It's like, uh, it's hard. Uh, for sure. I'm, I'm learning a lot, definitely learning that as I'm working on life blocks. It's tough cuz like when you work on a, a SaaS product, you build it, you design it, you ship it, people use it all. They don't, but with developers you build something, but everything you do, they could actually build it themselves.
So it's like, it's a, it's a challenge. Like you have to do something that's really good and like to convince them because they actually understand how it's built. They could actually build some of that stuff themselves. Um, yeah, it, it's definitely good suits. Uh, its challenges for sure.
[00:37:48] Live Objects
Andrew: Yeah. Um, so, uh, we've touched on it a little bit, uh, with like the types of data that you can add to your app through live blocks and comments. Uh, but are there any other types of collaborative presence that we haven't [00:38:00] talked about?
Steven: Yeah, so I mean, so yeah, presence, there's, there's basically the, this concept of presence we have within live blocks. And so there's any, there's a ton of experiences you can build with this, but the most common one, uh, that we see is like live cursors. You know, if you want to build a live cursor experience where like cursors are flying around, uh, it's very easy to do that with presence.
Uh, essentially we enable you within react to pass like the, uh, like the usePResence hook, and then you can like, um, define your x y coordinates for the cursor and. And on the other side kind of show like a SVG component that looks like a cursor and kind of, uh, move stuff around that way. But there's a ton of stuff you can build with presence.
Essentially. The, the idea of this product is to, when you think about multiplayer collaborative products, all we're trying to do is to replicate some of the experiences we have in the real world, in the physical world, bring that to the digital world. And so [00:39:00] when you are in a room with somebody, like literally in the same physical room, you see, hey, Andrew, Andrew is over there in this corner.
Justin is in this corner. I see what they're doing. Or if you, uh, you know, you work on the whiteboard, an actual physical whiteboard, you grab a post-it note and you write with your pen, I'm gonna see that you're like holding the, the post-it note and you're writing on it. So that's basically what prisons does.
Like we, we help you show like, okay, live avatar stack, for example, in digital product to see like, here are the people that are currently here, but here's actually what they're actually currently doing right now. Like, You know, they're, they're holding the post-it note, or if you're doing like a, a, a multiplayer form, like you would see, okay, Andrew is currently editing this input field and you show border around it.
Or like, Justin is editing this slide, so you show border around the slide. Um, those are like the typical kind of presence, uh, like cursor, carrots and text leaders. Uh, live avatar stack is a common one, but then there's also stuff that maybe a bit less [00:40:00] obvious, like stuff like follow, follow me kind of features.
You know, like where you can drive if you, if you build like a, a, a deck, like a, I guess if we were building like the, the Google doc, like the Google Slides kind of experience or like a pitch, being able to drive the experience for everybody where people can follow you around. Um, that's interesting. That's, that's another use case that we tend to see.
Andrew: Yeah, that, that, that one's a, a nice little feature. Like, uh, you wouldn't think about that, but the fact that you can just kinda like drop that in. So Nice. Uh, people asked me about that for De Script and I was like, uh, I, I don't know. I don't know.
Steven: Hi. She should use, uh, live blocks, maybe.
Andrew: Oh, well we have, uh, actually I think our own in-house solution called Trier Sync. It's an open source thing. Uh, it does a lot of things that I don't quite know about, but uh, yeah, it seems to work pretty good.
Steven: That's good. Perfect.
[00:40:53] Usage in the Wild
Andrew: So we've talked about a lot about the technology now, but what are some of your favorite use cases of live blocks that you've seen out in the [00:41:00] wild? Have you seen anything unexpected where you're like, wow, that, that, that's really interesting.
Steven: Uh, yeah, definitely. There's been, there's been some of them, uh, especially, I mean, when we first built this, uh, we built a tool that we needed ourselves. And coming from like a creative tools background, uh, the product was very much designed with that in mind. Uh, although we, we had a, uh, thesis was like, okay, if we make it super easy for people to build Figma like experiences, not only, uh, creative tools, companies will adopt this, but like companies in, like all kinds of industry will.
And so to me, like the, one of the good moments where I started seeing this was like one company, uh, in Australia called popular. They do like, uh, uh, 3D maps. They take, uh, drone footage and mix maps out of them for like civil engineers and like big, big projects like building bridges and those kind of stuff.
And they made like some of the maps collaborative so that you can actually draw them. And when you draw it like calculates the amount of dirt as you draw like, [00:42:00] and like you can move it. So I thought that was. A cool use case that sounds like, so like creative tools. Uh, another one that I, I really liked, uh, recently is a company called Dialogue.
It's a telemedicine company based in Canada. And uh, they have this internal tool for nurses and doctors that they use to look at like patient files and go on like digital, like, uh, consultations with them. And before live blocks they had this problem of like multiple nurses or doctors would be looking at the same passion file at the same time.
And they would have, like, they would change stuff and like, they would have conflicts in the data and they wouldn't know that somebody was hitting it and they would hit save and then the person would like the next person that would save it, like the first person would, would lose all the stuff that they had saved earlier.
they used live blocks during a hackathon and, uh, won the hackathon and within uh, three weeks they were like, uh, paying customers. And so I thought that was a really cool use case of like, okay. There's like, [00:43:00] not like necessarily like a creative tool, but it's like, okay, because you like, make a digital product feel like you're in the same space together, actually makes the efficiency for, in that case, nurses and doctors a lot, a lot better.
So that's something I found super interesting cuz that that's not necessarily like the, the first kind of use case you think about. Uh, so yeah, those are the two, two ones that I liked.
Andrew: Yeah, that, that, that's interesting. Um, it's funny that their name, the name of the company is Dialogue, cuz I just heard of a, a company called Modal. They must get mixed up all the time.
Steven: Yeah, that's a good one.
[00:43:32] Future of Collaboration
Andrew: So, uh, at the end of each episode, we ask more of like a future facing question. Uh, here we've been talking about kind of just like apps in general. So what do you think the future of apps is? Do you think it's more collaboration? Do you think everything, uh, every app should have live collaboration in it.
Steven: Yeah, I mean, The entire reason why we're doing live blocks, um, is based on the fact that we're remote. Remote [00:44:00] work is here to stay for a lot of companies. And even if you have an office, it's very likely you're gonna be working not in the same physical space as somebody else. And so in this world that's becoming more and more digital, it's important that we're able to connect people together.
And so for all SaaS products to become collaborative like Figma, there needs to be, there needs to be a company or some companies that, that play a role in that, in that solution to make it very easy for developers, uh, within those companies to create those collaborative apps. And so for me, I were to predict the future, I don't know if I'm right, but I think a big majority, if not all of the SaaS products that we have out there will have to be.
Collaborative one way or another. Um, and so that, that would be my, my number one bet. Uh, that's the number one. Like at the market SaaS products, there are some digital experiences maybe, maybe won't be as collaborative. There, there are, there are spaces sometimes where [00:45:00] doesn't really make sense, but I think there's a big majority of cases where like everything we experience digitally will, will become collaborative.
So, um, yeah, hopefully live blocks, uh, will play, uh, a role into, into powering that infrastructure for, for the world. But yeah, that's kind of my bet. We'll see. We'll see if I'm right.
Justin: I think you, I think you might be. I think it's gonna be important.
Steven: What do you think?
Justin: ~~I would, ~~I would say, you know, it's interesting how like before, really before the iPhone we didn't have like touch like fully touchscreen devices that people just like naturally used. And now you have kids who come up with like iPads and stuff and they try to touch TVs and touch computer screens cuz they just expect that touch should work.
Right. And I think collaboration is also gonna be that thing. It's like people are gonna get like so used to having collaboration in so many projects, like kids are gonna come up and just expect that they can like mess with [00:46:00] stuff with their friends.
why
Steven: isn't somebody like asking send you your url? Like, why, why am I not seeing you in this, in this app? Like, you know, it's gonna
Justin: Yeah.
Steven: yeah, that's a good, good analogy. I didn't think about it that way, but that, that makes sense. Yeah.
Andrew: Cool with that, uh, let's move on to .
[00:46:15] Tooltips
Andrew: Remember the full version of this episode is only available to subscribers. So to hear those tool tips, you'll have to become one.
Cool. That, uh, wraps it up for tool tips. Thanks for coming on, Steven. This was a fun conversation about, uh, live collaboration and all of the design and coding, uh, considerations you have to make when building something like that.
Steven: Yeah. Thanks for having me guys. Appreciate it.
Justin: Yeah, it was so cool having you on. I mean, I think every since that, like again, when I first saw this was in the Elle Demo, I was like, ever since then, I was like, oh my God, this is so cool. I need to talk to them. So really excited to have you.
Steven: you. It was great to meet you guys and enjoyed the chat.