Christopher Chedeau, creator of Excalidraw, co-creator of React Native on the impact of connecting the right ideas with the right people

Transcript

Beyang Liu: I'm here with Christopher Chedeau, creator of Excalidraw, co-creator of React Native and Docusaurus, early developer and advocate for React and Prettier, initiator of the CSS-in-JS movement, and last but certainly not least, Engineering Manager of a team of 13 at Facebook. Christopher, thanks so much for joining us today.

Christopher Chedeau: Hey, thanks so much. Yeah, I'm super happy to be here and to talk about some of my experiences.

Beyang Liu: How, Christopher, did you get into programming?

Christopher Chedeau: Yeah. So, I think it was when I was six or seven years old, my father came in. And he loved to tinker with hardware and he came in with a computer and he showed me like, "Oh, you can use notepads and then you can show the browser on the other side." And then like, "Oh, if you put B or H1, put some text and you save and then you can reload," and like, "Oh, it was magical. Now I can actually build and start building pages." And so, this is how I really... the first iteration. But the places where I really started was with video games. And so, I was playing a video game called Warcraft III. And so, one of the thing there is, there was a map editor where you could actually build your custom maps.

And usually, the custom maps are like, "Oh, you're placing elements across the map." But they had a very unique thing, which was a trigger editor where you were able to... Say, for example, when a unit enters this region, then you can put a condition saying, if the unit is a monster, then you can say, "Oh, the unit that entered is now going to actually move to this other region."

And so you were able to build those kinds of maps and I've built a lot of tower defenses. And I've also been involved in all of the mapping community at the time. And one of the really cool thing about this is that this was a way to start programming without knowing you're programming. You're just basically building a map. And once, at some point I was able to get to know this, some people realized that actually in practice, all of these things that you would double-click and change on the screen would actually generate a programming language and real code. And so this was super interesting because now I was able to implement, get rid of all of the UI and just write code. And I was able to actually learn through that and I used the same concept, but now it was actually writing code. And there was a no more language syntax and this is super cool. They were able to hack the entire editor to be able to access this and then this.

Beyang Liu: Awesome.

Christopher Chedeau: But, yeah. This is how I started.

Beyang Liu: That's really cool. And you were saying earlier that it was a C-like programming language, but without dynamic memory allocation, right?

Christopher Chedeau: Yes. Yeah. So this was a super interesting perspective is, in this language, the reason they did this is because you need to run this across all of the player in the map. And so it's run on all of the client's sites and also run on the server. And then this way, for live competition kind of thing, now everybody's running the same thing and they're able to figure things out. So one of the very interesting things is you're not able to allocate any memory. And so now if you're working on JavaScript, anytime you do var X equal an object, you're basically allocating your memory. So what you ought to do is figure out in advance all of the possible things you would like to allocate and put them basically in global variables and then you are basically modifying them.

And so it introduced a bunch of arbitrary constraints. So for example, if you had an area of 200 elements, if you allocate it... You wanted to allocate something, you couldn't. It was going the other way, or it would actually not let you do it. And there was also no concept of exceptions. And so all of the things that you had would actually work. But they were never raised. So it was a very interesting way to learn without all of the complexities of points of arithmetic and a dynamic thing. So, it was really interesting.

Beyang Liu: Yeah. That's awesome. So you got into programming through modding video games, Warcraft III. After that you went on to school, where I understand you studied computer vision and worked on neural nets before neural nets were cool?

Christopher Chedeau: Yeah. Yeah. So for this, I joined a school called EPITA. And so this is a French school in Paris that is actually dedicated to computer science. And so there's a lot of colleges that are all across and they maybe have geography, history, those kinds of things. But all the courses were data structures, algorithm, functional programming. And my major was actually in computer vision and artificial intelligence. And I actually had the choice to go with more web development, but I felt like I already knew that and if I didn't know already those things now, I could learn them on the job. But this is something I know myself, if I don't have a teacher that's asking me to do math equations and this kind of thing, I'm not going to do it.

So I was like, "Okay, this is probably what I should be doing to maximize my time there." There were two parts for the computer vision. One was all of the convolutional networks, so basically you look at every single pixel and then you do an algorithm, a recursive algorithm on those pixels. And then you're able to find all of the edges, you're able to find all of the areas in the image and those kind of things. And so this was one technique. And the other one that I've learned through this is a neural network. And so as you mentioned, neural network were really big in the 70s, the 80s, or something like this. And then there was the AI Winter and basically people didn't find any concrete use cases. And so one of my teachers, they were actually part of the group of scholars that actually built all of this theory and those kind of things-

Beyang Liu: The first wave, back in the-

Christopher Chedeau: The neural network. And so he was basically teaching us, which was pretty cool. But in practice, there was no use cases. There was just the theory, and then a one or two years later, then all of the deep neural network came in and now everybody's using them. And so it's been super interesting to see the same skill, you should wait a few years, from being completely useless to the next big thing and this ... in the world.

Beyang Liu: Yeah. I feel like that's a lesson I've heard repeated quite often. You never know what part of technology you're going to work on first, but whatever you do, learn it, love it, acquire a deep understanding of it, because you never know when something might resurface as useful later on.

Christopher Chedeau: Yeah.

Beyang Liu: Cool. So what was the journey from doing your degree in computer vision and AI to joining Facebook? How did that happen?

Christopher Chedeau: Yeah. So, that was super interesting. So one of the things I've been doing while it was cool is to write a blog and talk about all of these things that I was playing around with. And I find it very useful because I was able to first, put my thoughts into writing, which helped me think. And then I was able to show it to a lot of people and they were able to give me a bunch of good advice. And I was able to talk to people like Stroustrup who wrote C++ because I was doing this kind of things. And so it was a super cool experience. And one of the things that happened there is I created... In a weekend I was learning C++ at school and there was this new C++0x.

We didn't know when it was going to be released and they added Lambda and constructor and the way to do a type inference so you can do auto and not set a type. And I was like, "If I have all of this then I can basically write JavaScript in C++." And so I did expos and this kind of things, and I was able to do something like var X equals to 10, and the var Y equals to X plus and the string. And it would evaluate the same way as JavaScript. And so in practice, it's completely useless because the perf is horrible. We don't have a JIT, we don't have anything. But it was a fun experiment.

Beyang Liu: It was all via C++ macros or...?

Christopher Chedeau: Yeah, C macros. You define and then you're able to rewrite things.

Beyang Liu: Got it, got it. Sorry, I interrupted you. So you built this and then you posted it. And then what happened?

Christopher Chedeau: And then I went to a person on Hacker News and it made the front page and somebody from Facebook, a VP at Facebook, reach out to me and basically say, "Oh, this is super cool. We're building a PHP VM. Are you interested in joining?" And so my first reaction was, I thought it was a prank. I thought one of my friends was sending me a fake email. But I looked at this person and it was good. And one thing that confused me is in France, VP, Vice President, there's only one. And then I looked at Facebook and I saw there's 10 VPs, and I'm like, "Okay, what's going on?" I then realize, "This is just a title of someone high up." And so this was interesting. And so he sent me this and he's like, "Oh, do you want to chat?"

I'm like, "Yeah, sure. I'll chat." And he basically for 45 minutes, American style, basically told me, "Oh, Facebook is the best thing in the world and we're doing complex problems and everything." And at the end he asked me, "Hey, do you want to apply to join?" And for me, I was like, "Yeah, of course. I wanted 45 minutes ago but thanks for the chat." And so then I did I think three or four phone interviews and then they flew me into a super nice hotel in Palo Alto. I did one a day of interviews and I got in. But it was a bit of the American dream. I was one person in France. I wanted to go to the States at some point. My eyes were actually on Google. And it actually happened and it was always my wish that came true.

Beyang Liu: That's awesome. That's awesome. So when you got into Facebook first, I take it you didn't work on computer vision, you didn't work on a PHP VM. What was the first thing that you worked on at Facebook?

Christopher Chedeau: Yeah. So at Facebook, there's an interesting thing where there's one month and a half where you're not allocated to any team. And you're basically working on random tasks or small projects. And one, I was looking at it and one of them was basically a one-liner saying like, "Hey, we acquired this new company Face.com that is able to tell us where... Sorry, faces are in images. Can we use it for improving tagging?" And so I was like, "Yeah, this sounds cool." And so I basically spent all of my month and a half doing this. And the way it worked is... so when you open the photo viewer on the web and you click the tag, then you... Normally you have to click on the face and then start typing your name and those kind of things.

Beyang Liu: Yup, yup.

Christopher Chedeau: And so what I did was, basically when you click tag, it automatically focuses you on the first face and automatically expands the dropdown. And if we have the information about who the algorithm recognizes, then we are sort of the suggestion box for that. And so the workflow for this, if you want to tag in photos, you press tag and you basically press enter, enter, enter and then that's it. And so this was super cool because it actually improved by a significant amount the number of people that are being tagged. And one of the super interesting things about this is when you tag someone, they receive a notification that they're tagged. And so if you look at the list of notifications that you receive, if you're tagged on a photo, you want to see what was the photo? Why I was tagged and everything.

And so this is one of the notifications with the highest click-through rate. And so now that they actually come to Facebook, now they're able to engage, they're able to do and so engagement actually goes up. And so this was the first time outside of newsfeed where improvement in AI. So if we improve the finding images and everything leads to direct engagement wins. And so this was a super nice project because now for all of the people working on deep AI stuff, they were able to say, "Hey, we did these two points better model or something, and actually it's improved engagement by X." And so this was a really nice way to bootstrap all of the AI work... Or computer vision, AI work within Facebook.

Beyang Liu: That's awesome. The people working on those AI models must have loved you because you kind of bridged the gap between their deep kind of research oriented work and this... I bet it was a top line business goal, right? Engagement is pretty core to Facebook's business model. Right?

Christopher Chedeau: Yeah.

Beyang Liu: Cool.

Christopher Chedeau: It was pretty cool.

Beyang Liu: So at this point, did React exist at all anywhere in the organization or is this before it even existed internally?

Christopher Chedeau: Yeah. So I joined and the interesting thing is... So React was super small. Jordan Walke had been working on React for, I think a few years. And React was like, use the bits in Ads Org and use the bits to replace comments in Newsfeed was super, super early. And one thing I remember is, somebody told me, "Hey, there's this Jordan Walke that has some interesting ideas. You should chat." And so I like, "Yeah, of course." So I think I scheduled a 30 minute meeting with him. And what he told me... He asked me a question, "What is the most difficult thing in the front-end space right now?" And I didn't know. "I don't know." And one thing he told me is updates.

And so if you think about it, updates are really the most difficult thing because if you are thinking about the web before the front-end, in PHP, you basically... You just restart from scratch all the time. So somebody goes to dispatch, you basically query all the database and you figure out what PHP and HTML... Where the HTML should be outputted and send to the ... And then when somebody does it, you click... They send a post request, you process the update and then you redo the loop of, "Hey, you refreshed." But now in the client side, now with jQuery and data binding, you basically had to figure out, "Okay. So if I change this..." First, you need to do the rendering phase and generate the initial thing. And then if you've changes, this is all of the place I need to update update and this should change this in the place-

All of the place I need to update and a few changes all over the place, and then there's all these event meters, like there's a lot of risk conditions. So this is actually super hard. So the idea of Jordan was, this is the hardest part. Update is the hardest part. Let's remove it and use the same server-side model where you're going to actually rerender from scratch, and so now you don't have to write any of the updates. You just change the data model. You just literally rerender.

I left this meeting around first... Okay. He has his mind somewhere. I have never talked to someone that was like this kind of super deep thought and everything. My other thought was okay, even I agree with you this is the hardest part, but your thing is never going to be fast. There's no way.

So I basically shrugged it off, but two weeks later I was in the weekend I was, I didn't know what to do. In the past I've been in a project where this was a way to search for large data sets. I basically did everything client side. I hand tuned every single mutation in the DOM and it was super fast. I even found at the time, the sort algorithm could be improved. Anyway.

Okay. Let's try this React thing. I don't think it's going to work but let's try it. So I started basically using a version of React. There was no JSX and everything, but I started using this and I think in half an hour I was able to rebuild what I've done in many months of like doing.

Beyang Liu: Wow. That must have been mind blowing.

Christopher Chedeau: It was not as fast, but it was in the same ballpark of speed. So it was probably maybe 2X slower or something, but it was reasonable. I was like, oh shit. So I was like, okay, this is like, there's something there. So basically since I've been the biggest React fan boy, and I've been trying to convert everybody to use React, so yeah. This is how I've learned React.

Beyang Liu: That's awesome. At that point, how many people were working on React? Was it just Jordan or were there other folks in the team at that point?

Christopher Chedeau: This is interesting. At that point there was no React team, but React was in the monorepo and many people have contributed in and out of the project, but yeah, there was no real team. What happened, this was Jordan really pushing and convincing people. At this point I started to get momentum within the company and the goal was to start open sourcing React.

Beyang Liu: Got it.

Christopher Chedeau: So this is where I got really invested around okay, how do we build a website? How do we do event transition and everything?

Beyang Liu: Yeah. Say more about the launch because I think nowadays React is almost a given and it's easy to assume that it was inevitable and it immediately clicked with everyone and gained widespread adoption. But when you first released it, what was the reaction from the community and how did you as a member of that team work with that and turn it into something that people were comfortable adopting?

Christopher Chedeau: Yeah. For this, it was super interesting because we launched it and then the launch went really bad. It was on Hacker News and got publicity, this was good. Not every project is getting this kind of visibility. Now there was a few things going against our way. First at that time, there was basically a new JavaScript library every month or so. There was a lot of churn and people were, okay, this is one more.

The last one was around JSX. This is very interesting because the mindset at the time was the separation of concerns.

The whole mentality is like, the JavaScript should be separated from the HTML so it should be separated from CSS. Basically with React we are like, we're going to put everything together in one block, but instead the separation should be at the component boundary. So one component is the unit and it should have its HTML and JavaScript and CSS at the same time. Then the next component, a file is a component. There was a lot of people like, okay, what's going on?

The second part is for React, we decided to use JSX. This meant that we basically did a transpile step. In that world, nobody transpiled anything. People were including a script and Angular 1, like if you include Angular 1 it actually parses the DOM online and then look for the key word and rewrites it and those kind of things.

You had jQuery and you put some document.on("load"), and then you do your thing. So this was a big step. The thing that we've done for helping with this, the first one was Pete Hunt has been magnificent at explaining all of these concepts. What he's done is he wrote this Thinking in React tutorial which is three pages long, but really clicked with people. He basically also went on the world tour where he actually went through I think 12 conference that's here and basically explained the virtual DOM and the way it does diffing, explain separation of concern and everything. Every time he did it, people were like, okay, you're solving a real problem. This is not just messing around. This was the early adoption.

There's two people that really helped. One was James Long and the second one was David Nolen. Both of them made super competing blog posts that were not from Facebook and that actually people clicked, around like, okay, this is a fundamental transformation. David Nolen was all about functional programming and Clojure and everything. He was basically like, "Hey, this is what we've been missing from Clojure or from the functional world." And so it's really picked up steam now.

On my side, what I did was to try to build a community. For this, one of the things that I've done is a weekly recap of everything happening in the React world. There's something very interesting with people, the way they evaluate success, is they basically have a heuristic in their mind around, how many times do you hear about the project? The more you hear about a project, the more famous or the more important it is. So this is something-

Beyang Liu: Sure. It's occupying space in your mind. Yeah.

Christopher Chedeau: Yeah. What I did was basically to hack this. For this, what I was doing is every person that I interacted that was asking about React or doing something about React, I asked them to write a blog post about it. Every single one of them.

At the beginning, there was 10 people that were using React and every single one of them wrote a blog post and in my weekly roundup I was actually posting about 10 blog posts. The very interesting thing is like for a normal project, if there's 10 blog posts written in a week, that means that the project probably have 10,000 people.

Beyang Liu: Yeah, right.

Christopher Chedeau: But in this case, there was 10 people.

Beyang Liu: It's just all of them wrote blog posts. That's amazing.

Christopher Chedeau: Yeah. I did this for the first year, so basically I was able to hack the perception and create this bigger than it actually is, to really grow it that way. Then at some point, the reality and the awesomeness of React caught on and so I didn't need to do it. There was enough people writing blog posts and everything that we didn't need this. This is interesting, like for example right now you're doing your podcast and so you're basically helping people be promoted and everything. So thanks for doing this and giving me the opportunity.

Beyang Liu: Oh, of course. Thanks for coming on the show. You are the main attraction here. It's people yourself that make this show interesting and worth watching.

I guess React, you did a lot of community building in that. You were also one of the co-founders of React Native or one of the original team members on that. Tell me about the backstory there. How did that grow out of the React project?

Christopher Chedeau: Yeah. This one was super interesting. Jordan Walke, the same guy that created React, his vision is like, React is actually just a way to structure UIs. But for him it was not dependent on the web or JavaScript. It was like you have a tree that represents the UI and you're able to diff the tree and rerender it and do it again.

At that time, Facebook, there was a big shift where the company was going mobile first and was going native, and so one of the big challenges at the time and all the way to Mark Zuckerberg, it was the iteration time of native development. It was way, way, way slower than the web. Facebook has always been about move fast, and so now we basically have to shift to a new business and in practice you cannot move fast and so this is something that Mark Zuckerberg wanted to solve.

The way Facebook works is bottom up. Like, Mark Zuckerberg said, "Hey, we need to solve this." Like, this is the direction. Then he expects engineers to come from all over the company with solutions. One of the things that Jordan had in mind was, can we embed Javascript in an iOS app? At that point, we actually, there was no API for this and they couldn't do it, but he found a way to cross-compare something and he was able to do it. He wanted to be like, okay, can we run React and power native iOS views out of React? Instead of divs and span you can power a UI label and UI views and those kinds of things.

At Facebook there's hackathons. In the summer there's a three-day hackathon and Ashwin, Lin that were on my team, on the photos team and Jordan, we hacked together for three days working on this, using React to power native views on iOS. At the end of the three days, we had a demo where we are able to show a list view and we had a primitive layout system and we're able to have the text editor on the right and the iOS development on the left and basically move the line before and after. We used a native iOS like button and we're able to move the like button from the left to the right and we're able to click on it and have the likes actually work. We're able to do a demo and changing and saving would be almost instant. I think it was 100-millisecond refresh so it was barely perceptible.

We presented to the hackathon group, all the employees did some co-hacks could go. What happened is the five projects, most interesting have an audience with Mark Zuckerberg. So we went to present this hack to Mark Zuckerberg, and there was Schroepfer, the CTO of the company as well in this audience. We presented this and both of them were super excited. What happened the next week is we basically did a world tour of Facebook and we talked to all of the management chain, all of the people with the DevOps.

Beyang Liu: Amazing.

Christopher Chedeau: It was a super fun thing. But now the thing that happened then is we did this demo, there was people liking it and everything, but now for myself as an engineer, I joined Facebook less than a year ago and I moved myself, I married my wife. This was a huge thing. We moved halfway across the world.

Beyang Liu: Yeah.

Christopher Chedeau: So now it was a soul searching moment. Like, do I want to bet this dream on a crazy idea? At that time the answer was no. So what happened is Lin and Ashwin basically went and built... They wanted to do an iOS photo app and they built it using what was React iOS at the time. Three months after, they basically came back to us and said, "Hey look. We really want to build the iOS photo app, and right now we're spending more time building this React iOS thing than actually building the product. So we're going to restart the product in a normal iOS so we can actually work on it." It was basically a time where the project could die or the project could live and I need to make a call. Like, do I want to invest in?

So I did a lot of soul searching and basically at that point I was like, okay, I think I need to do it. And, so, Tom Occhino was the manager of Jordan at the time and Jordan and myself, okay, now we're basically creating a small team. A few people came in after this and this is how the project started, but this was not an easy decision to make. This was something a lot of people don't realize with these kind of projects. They're super high risk.

A lot of people don't realize with this kind of projects, they're super high risk, high reward projects, but most of those projects actually fail. This is like a startup, most of the startups fail. And the fact that I'm here talking to you, all the stars align and everything that it could work, but this was not a given at the time. So I could have also went the other side.

Beyang Liu: You took a risk and it paid off. And I think especially, it was a big risk and at Facebook at the time because my understanding is that they had already tried to build an initial version of the mobile application using web technologies. That was the first attempt. And then it wasn't performant enough, the user experience wasn't good. So they ended up rebuilding it in native iOS and Android. So there must have been probably some amount of institutional resistance to have another go at a web based or web inspired technology. Right?

Christopher Chedeau: Yeah. This was a very interesting time. And one of the things that also, I don't know if it's still true today, but when I joined Facebook and even at school, there was this notion of, if you're doing web, you're not a real engineer. If you're doing a channel or network or native, you're a real engineer. And so there was this super interesting notion where we are coming from a web background. And so we have all of these preconceived notions that whatever we're doing is not going to be real engineering. And we're script kiddies and let's ... do this. And this is very interesting.

And the other thing which has been super interesting is there's also a very big difference between the iOS community and the Android community. And so what's super interesting with the iOS community is Apple plays a central role and basically there's this notion that everything that Apple does is the right way, and this is the way things should go. And there's a very ingrained notion of this. And so now, if you're basically coming in, "We're doing something different than what Apple guideline says." There's a lot of resistance. In practice, it has worked well because Apple, in practice, the software that they produce and the libraries and everything are actually really good in practice. So there's reasons for this, which has been one of the very interesting things about trying to convince people.

On the other side, for Android, what was super interesting is, Android, the state of the development at the time was very fragmented. There's 20 different of Android and everything is hacky and the quality of the framework and the infra was not as good. And so basically 400 people were a lot more welcoming to the idea. But the challenge there was the actual devices were really, really worse. For iOS, the iPhones are actually super powerful. And on Android, there was really bad phones. And so now, the challenge was, "Oh, the other JavaScript runtime on top of it and everything." So it was a lot more challenging to actually get it to work well. And so it was super interesting how one place was more about the people mindset and everything. And the other was more about the actual technological choices and difficulties that were challenges for working on this.

And one thing that we found is that in practice, a lot of the people working on React Native have been people coming from a web background. And the thing is, we have been hiring a lot, but it's still harder to hire like an iOS and Android engineers and web engineers, employ more of them. And so we've been able to bootstrap the entire team using React Native through the web and all the teams were starting to hire dedicated native engineers. They were able to get funded through web development. And so it's also an interesting thing around the staffing and the people working on this project.

Beyang Liu: That's a neat, I guess, developer team growth hack is using technology that allows people from a much wider pool to come work on the product. I'm curious, you mentioned all these challenges with getting started in both iOS and Android, partly psychological, partly technical. What was the first project or first major project that the React Native team targeted inside Facebook as a focal point?

Christopher Chedeau: So the first one was Instagram. They had a list of all of the photos you've liked or you favorited. And this view was super small and would have been our entry point into getting Instagram. And so one of the challenges with this is, the big challenge is the feature was not big enough to justify the investment and adding a whole JavaScript runtime and this kind of things. And so, we were not able to actually succeed there. And in retrospect, I think you need to start to find something small enough, but something significant enough that actually solves a real problem for the company. And I don't think we really judged the right balance. And so this didn't work out.

The thing that actually worked out and the first one was Ads Manager. And so we were building an entire app for managing your ads on the phone. And one of the things is, the team had a really hard time hiring native engineers to actually build this and ... app. And this was actually the perfect opportunity for us to actually get a team. And most of the team, Ads is the most complicated piece of JavaScript software pretty much as we could. And so there was a lot of really great front end engineers, JavaScript experts in the Ads organization. And they were able to bootstrap the Ads Manager product and we were able to work with them. And so this was the first big app that was shaped using React Native. And to this day, it's still using React Native and it's been super successful.

Beyang Liu: That's awesome. And how did it grow from there? I mean, these days-

Christopher Chedeau: So, one of the biggest things using React Native is actually Marketplace. And so this is one of the big success stories. And one of the reasons why they have been able to be successful is they've been able to iterate super quickly and figure out what works, what doesn't work and being able to move faster with pure native development.

Beyang Liu: That's awesome. And Marketplace, I think these days, it's one of the largest online marketplaces where goods are bought and sold anywhere, I think. I've certainly bought a ton of stuff on Marketplace-

Christopher Chedeau: Nice. Thanks.

Beyang Liu: And know a bunch of people who have as well. So thanks for-

Christopher Chedeau: Yeah it was announced that there's more than one billion people using Marketplace every month.

Beyang Liu: Wow.

Christopher Chedeau: Which is really insane.

Beyang Liu: That's insane.

Christopher Chedeau: So this is a good success story.

Beyang Liu: Awesome. Awesome. I want to fast forward. You've done so much work that it's so hard to squeeze into an hour, but I want to get to the latest or one of the latest projects that you've worked on, which is Excalidraw. And for those who have never used Excalidraw before just Google Excalidraw. It's one of the easiest apps to get started using. It's a tool that you can use for online drawing out diagrams, whiteboarding. And it's extremely collaborative, which I think is one of the big features. Our own team at Sourcegraph started using it during the pandemic, actually. And my understanding is that you created this and that there's an interesting backstory behind the inception.

Christopher Chedeau: Yeah. So at Facebook we have a system every six months of 360 feedback. So you have to write feedback for the people that you've been working with, yourself and your manager, and I'm a big procrastinator. And so for me, it's really hard to actually write this feedback. And so what I did was to decide, okay, now if I'm not in the mindset of writing feedback, I'm going to do something productive. And so my idea was to write a blog post and I used the tool called Zwibbler to draw illustrations for my blog post. And unfortunately, Zwibbler, they have a demo website. So it cost $1000 and it's actually pretty good. And I used the demo websites and unfortunately the demo website was modified and didn't work for my use cases anymore.

And so I was like, "Okay, I've always wanted to actually build something like Zwibbler. Let's try it. And so I spent I think an hour or two drawing using CodeSandbox and Rough.js that makes line a bit rough. And I was able to get something where you're able to draw a rectangle. And I posted a GIF on Twitter saying, "Hey, I've done this. This is cool. I'm having fun." And it got more than a hundred likes. And I was not expecting this. And so, basically, I kept going for the day and the next day, people were still coming, "Oh my God, this is going to be so useful." And there are many things that are getting celebrated.

And so what I did was to create a GitHub repo. And so one of the coolest thing with CodeSandbox is you can actually create a code repo from a sandbox. And so I did this and I was able to get a GitHub repo. And one thing I knew over time is that building a project is more fun when there's other people around and working with you and everything. And so for this, what I did was on the GitHub repo, I created I think 20 issues around all of those things I wish existed. And then, the great thing about this is, people started to actually pick up those issues and started contributing to the project. And so I was basically, "Oh yeah, this is so good." And starting merging code review and these kinds of things. And one thing I did was to actually give commit access to all of the people that I merged a pull request for.

And so at this point there was a bunch of people. And once you give someone commit access, they feel empowered and they're going to do more. And so then, for the next few months, we got a ton of people contributing and basically building a fully fledged, drawing app. And so this was super cool and it started growing a bit and people were actually using it for real use cases. And so this was the first phase of the project for the first three months. And then COVID hit. And so now, basically, everybody was sent to their house and one of the big questions around was for collaboration: how do you actually replace the physical whiteboards and showing people on the paper or something. And everybody was looking for basically whiteboard replacements.

And so one of the things I didn't expect is, people started asking for Excalidraw in this realm of whiteboard replacements. And so for me, it was interesting because I was just... For me, it was a way to draw diagrams for my blog. And I didn't construct the whiteboarding use case in mind. And so one thing I started looking at is... Okay, everybody was asking me. And so I started looking at the competition and the competing products. And one thing I realized is that all of the competing whiteboard products, they took the whiteboard part very literally. So they use the same physical constraint of a physical white board and they adapted to the software.

And so for example, all of them had fixed dimensions for the canvas and for the schedule, and I was like, "There's no reason for this. We are on a screen. We can just scroll and keep scrolling. And then put things wherever you want." The other part is around typing. A lot of them actually don't let you use your keyboard to actually type stuff. Instead, you have to use your mouse to draw the letter like a physical whiteboard. And I don't know about you, but I'm not able to actually write things super well with my trackpad.

Beyang Liu: It's a terrible drawing experience.

Christopher Chedeau: And same, none of them really had things from the digital world like copy paste, being able to rotate stuff, being able to make things bigger. They all had this eraser, like you literally erase the stuff. I'm like, "No you just select stuff and you press backspace and this is how you erase stuff." And so this was super interesting how basically, going at it from a purely digital angle, I was able to build something that was actually a better whiteboard replacement than just copying all of the physical constraints over. So it was a very interesting thing.

Beyang Liu: I feel like you're like the Linus Torvalds of online drawing apps, because in the same way that he was working on version control system, he got frustrated is, "I'm going to write my own VCS to scratch my own itch." It's kind of like you, you wrote your own drawing app and it became... I think it's probably the most popular drawing app on the web at this point, at least, especially for this whiteboarding use case

Christopher Chedeau: I don't know. I know the stats for Excalidraw. So right now we have a hundred thousand monthly active users. I don't know the stats for all of the competitors. And so I wouldn't be surprised, they're actually bigger, because for example, like Google has World Draw and because it's part of the Google suite and everything, a lot of people are using it. So the space is moving quickly, but I'm super happy that these side projects have been helpful for so many people during this time of crisis.

Beyang Liu: It's been helpful for us. Members of our team just started using it just because it's so easy to dive in and it's natural and easy to use, and we're using it for a lot of project planning and collaborative drawing and diagramming now.

Christopher Chedeau: Nice.

Beyang Liu: So thanks for building an amazing thing. And it's so cool that... So you're a full-time engineering manager at Facebook. You have a team of more than a dozen and you started this just on the side as a way of procrastinating doing perf reviews, and then it became kind of this thing. And then-

... doing perf reviews. And then it became this thing and then COVID hit. Now it's become super popular. Now I understand that there's a company being built around the core open source project too. But you're still a full-time engineering manager at Facebook. So tell us how does all that work?

Christopher Chedeau: Yeah. So this is the thing where ... I built Excalidraw for me to actually solve the problem I had. And at this point, this problem for me is solved. And so this is not where I see the next five years of my career. And on Facebook the problem I'm trying to solve is all of the performance and reliability and size of the Facebook, Instagram, Messenger, Ads Manager, all tools, this is right now what I want to solve and this is where I want to dedicate most of my time. But there's this thing happening and so I want to be a good steward. And so one of the things that I've learned as a manager is now I'm basically managing these projects. And so what I'm doing is I'm not coding anymore, but I'm putting the right people in the right connections, being more strategic around what could be helpful in these kinds of things.

And so the good thing is there's two people, David and Milos. So David was the biggest contributor of Excalidraw. I think he surpassed me now. And Milos is like his partner in crime. And both of them basically decided to focus and build a company around it. And so this is one of the things which has been interesting with this experience with Excalidraw is so this is an open source project, and we did end-to-end encryption. So no data is going through the server and everything. But a lot of the company, and rightly so, are afraid of using it for their core business if there's no one behind it, another legal entity behind and those kinds of things. And so one of the things that we realized is that actually if we build a legal entity around this, now we're going to be able to provide the peace of mind for all of the companies and provide proper support and everything.

And so this means that we can actually have more people use Excalidraw by having a company and by building a lot of things that are company specific. So for example authentication, user management, permission and those kinds of things, which is like right now in the open source it doesn't exist. And so this has been something all of the companies want and for good reasons. And so now this is I think a win-win model where we have people dedicated to build the business specific use cases. And then of course this requires investment. So they have to pay right now it's $7 a month per seat to do it. And now it's Milos and David and I want to make a living out of this. And they are also able to also maintain the open source application because now I am not going to spend more time writing code. And open source is all great but at some point there needs to be some people are spending time and their time and career and effort on this. And so this is sort of the legal structure to be able to support open source.

Beyang Liu: Yeah. That's great. I mean, the project can sustain itself now, now that it has this source of funding attached to it in the form of a business. I feel like you of all the people I've chatted with are probably one of the best at time management and delegation. And this is one example of that unique skill that you have. I also recently read one of the posts on your blog, which you mentioned earlier called Casting Lines and all about how to find people to work on problems that you think need solving and convince them to kind of internalize the motivation and become passionate about the problem the same way you are. What other general approaches do you find useful in scaling the influence that you have on the world and convincing other people to get involved in projects you think are worth getting involved in?

Christopher Chedeau: Yeah. So this is very interesting because for me what matters most is we're actually solving the problem. And so when I joined Facebook, I was basically the one that every time I touch something that wanted to fix, I would actually go in and own things. And one thing I quickly realized the hard way is that at some point if I'm going in this mindset of I own everything at some point I'm basically going to be in a world where I basically bite on too much. And I can't actually spend an afternoon without something I need to handle and I can't actually push the projects. And so one thing I've done with my manager like a recommendation is stop, just say you're not going to touch this anymore.

And so I did this when I moved to React Native. All of the follows things, I basically said "I'm not here anymore. You do whatever you want with it." And what was super interesting was this is like I was naive and I thought that like, "Hey, it's going to die and it's going to explode and the world's going to end." And the one other thing in practice is Facebook is built in the way that is very resilient. Whereas if there's a problem and the problem is big enough, then it's going to get staffed. And it's with the monorepo and the culture of peer reviews and everything we have very little burst factor where like, "Oh, if somebody leaves, we're going to be super screwed."

And so what happened is I left and then I saw the project many of them stopped anything, stopped developing. And some of them actually somebody fresh came in and built a lot of things that I didn't imagine would be possible and made way better than I could have even. So this was one case with CSS Layout. So the layout engine in JavaScript where I built it with JavaScript and compared it to C and everything for the React Native use case. And so Emil Sjölander was working on Native on iOS and Android and he was basically rebuilding in C++ and took ownership. And now we actually on the Native iOS, Native Android, and even in Unity they're starting to use Yoga, which is called now. And this was like now I would have never been able to do that.

And so now the interesting thing about this is now what I've been trying to do is to figure out how I can get the ideas and give the ideas to people and basically grow the people in those projects. And now they can get all the fame, all the credit, all of those things. And I'm able to get more things going on. And so now I'm a different follower. I'm basically a startup advisor if you want. But I basically work with a bunch of people and I have a bunch of connections and I like putting them together and making the project successful. And not by actually writing code and being engaged, but by figuring out where should it go? And based on my experience, if I see it going some other way, then okay, I'm going to come in and start nudging it back and then go down.

And so this is why now I'm able to do the part-time job of Excalidraw, because there's David and Milos that are running the show day to day and making it grow. And now in my team I'm doing the same where I'm able to get my manager, my engineers, all of those things like some of the ideas I have being able to get them. And of course the thing for me is more about direction. And this is what I was coming with the Zuckerberg example is he said this is mobile first. And so now I'm doing like, okay, now we need to solve perf and reliability. And I have some ideas, but there are super smart people at Facebook reporting to me. And so I'm basically like, "Pitch me your ideas, what project, and let's make it happen." And then I can give some suggestions around like, "Oh, I think this way is going to be better or something." And so we can get more people be having impact together.

Beyang Liu: That's awesome. I feel like that's what a manager should be. That's an ideal state. And I feel like you've figured out how to do it, but to the next level. And it's such an inspiration because I think it's good on so many different levels. It's good because you get your problems that you care about solved. It's good for the people who actually get to solve them, because they're motivated to solve them, they've kind of internalized the reason why they want to solve that. And it becomes this project they can use to develop their own professional skillset and careers. And it just seems like such a virtuous cycle. And it's a model I think I definitely want to learn from and copy more as we grow the company here at Sourcegraph as well.

Christopher Chedeau: Nice.

Beyang Liu: Yeah. Well Christopher, I think we're coming up on the end of the hour here. Thanks so much for taking the time to chat. As kind of a last thought, is there anything that you want to leave the audience with? Any parting thoughts or maybe a call to action to try out Excalidraw or check out your blog and anything like that that you want to leave as is kind of the last word?

Christopher Chedeau: Yeah. So I think my last word would be have crazy ideas. And don't be afraid of dreaming big. And this is one of the things I feel like in this industry right now, one of the challenges, it's really easy to be caught up in you're going to fix some small part of it. And one thing I'm seeing a lot happen is you basically work on some projects and then two years later somebody else is going to come with basically rewriting it. And then rewriting it. And for me, this is so depressing because now we got super smart people are solving a problem and then all the new generation is going to come and basically re-solve the same thing. And that's just a waste of time for me.

And so for me, the thing I'm trying to do with every single project is I want to make sure I find the perfect solution. And so this is my goal. I'm aiming for the perfect solution. In places it's not perfect, but I'm really trying to solve it once and for all. And so now I can move on to the next project. And so I feel having this kind of mentality where you come in and, "Hey, this is going to be the best possible implementation of drawing app and let's actually make it happen." And then okay now I can say this is working. This is done. And then now we can start scaling it and everything. But there's not going to be somebody in two years going to start rewriting everything and say... Or, there's probably going to be, but I'm trying to not make it happen.

Beyang Liu: Yeah. I mean, it's like React. Before React, there was a new JavaScript framework every six months. And that became the hot new thing, but React has been so good that it's lasted this long and become something of a standard, de-facto standard in the front end community.

Christopher Chedeau: And this is something, you should look at programming around React, React Native, prettier, CSS-in-JS. Or CSS-in-JS is more like a different topic, and Excalidraw. And so this is something I've been trying to build it once and make it work. And so it didn't always work, but when it worked it was solid. So anyway. This is my parting thoughts for all the people listening.

Beyang Liu: That's great advice. And thanks so much for taking the time to share them. Christopher, it's been a true pleasure. Thanks for being on the show. And I feel like there's so much that we didn't cover. I might have to ask you back at some point as well, if you're up for it.

Christopher Chedeau: Yeah. You know how to find me. Thanks for hosting this and yeah, hearing me rant about a bunch of things.

Beyang Liu: The pleasure was all mine. Thank you.

Christopher Chedeau: Bye.