Notes on "The React Story" Pete Hunt interview
Notes on The React Story: How Facebook's Instagram Acquisition Led To The Open Sourcing of React.js (2017). Emphasis added, including headlines.
"the Facebook’s and Google’s of the world are like five years ahead of open source"
Some people say that the Facebook’s and Google’s of the world are like five years ahead of open source and companies that can’t throw zillions of dollars at engineers. When I joined I remember this vividly I think it was 2011 or maybe 2012 I gave this tech talk on this thing called Tupperware and it was using this thing called Linux Containers. I didn’t really understand what that was because I wasn’t super knowledgeable about the actual kind of devops side of things. That’s basically Facebook’s version of Docker and this was back in 2011. They had built that and Google I know had their own containerized thing that they had. Then Docker came out I think it was 2013 is when it started getting really popular, 2014. I think that one change that would happen today is that rather than invent your own container orchestration they would just use Docker and probably something like Kubernetes.
Zuck's forward looking vision
Zuck gets everybody together and is like, “Hey mobile is going to be a big deal and we are dropping everything and moving tons and tons of resources to mobile.”...I was like, “We can’t maintain the largest photo site in the world with a handful of people, this is crazy guys. We’re putting all these people into iOS and Android for apps that make up a minuscule amount of our traffic this doesn’t make any sense.” Turns out that it was 100% the right thing to do, that’s why I was not CEO of Facebook...
everything was really, really well tested so if the tests were green you were okay to roll out and the tests were really, really thorough.
"How does that work? It's almost too good to be true"
PETE HUNT: So everyone has got their “hello world” and if you’ve worked on other ways of rendering client side apps before and then you see React, it’s like almost too good to be true. You are like, “How does that work? There is no way that that works and if it works it must be really slow.” It took me, like Jordan worked with me a lot and he had written a lot of really interesting hello world, not hello world but like quick starts for various types of things. We had prototyped the profile page in React and it was a pretty positive experience, the end result was really positive. It was fast, it worked really well, didn’t have too many bugs because it’s getting rid of all the mutable state is a good thing. We launched it and it was really successful.
Internal stuff better than Open Source but coupled
INTERVIEWER: was Angular ever a thought?PETE HUNT: No, not even close.
Knowing that it's "the right way"
We were like this is definitely the right way to build applications it wasn’t even up for debate. All those the BoltJS and all these other things you build the apps in similar ways and components. What made React unique was how the components re-rendered, the other ones there would have been an initial render and then you would have to manually like update the DOM.That’s what I thought was, that’s what blew my mind. I like didn’t understand how that was possible.Now we have a really crisp explanation of this like, think of it as a Virtual DOM and you do a diff and the diff is fast. That was a really big pill to swallow back then. Remember we were pushing products on IE7 and 8 back then, so having that be fast enough I was like, “Yeah right.”
fast enough, not faster
PETE HUNT: Yeah fast enough. One of the big observations that I didn’t really appreciate until building something with React was usually it’s only a tiny percentage of your app that re-renders so the diffs normally aren’t actually that big. In the cases that the diffs are really big the alternative approach is to use data binding and the building up and tearing down of all those change listeners is really, really expensive. React in a lot of ways optimizes just for the initial render and sometimes at the expense of the incremental updates, because the incremental updates are pretty rare and pretty small.
PETE HUNT: Sorry, Flux predates React, a lot of people don’t know that.Flux came from the Facebook chat team. So the chat bar on Facebook and you type a message and you got to sync, there is like a little … The example they always use is that there is a little unread message count in the top bar and there is an unread message count in the bottom bar and you got to keep those in sync. It gets a little more hardcore because if you have multiple browser windows open you want to keep those in sync and …Yeah, so Flux was already there and basically the approach a lot of teams took was, “Hey we are already using Flux we’re just going to swap out our manual DOM manipulation with React,” and that ended up working like pretty okay.
JSCONF announcement tanked
"people that stumble in the IRC and they were like, Hey we really liked your JSConf video"
"it was designed to do that"
PETE HUNT: “Yeah, like it was designed to do that. Like render client side and server side, any mobile platform natively,” I just thought that was incredible and required a lot of foresight.The thing was when I joined, when I started working on React it’s like the server side rendering piece was more theoretical than it actually worked in practice. I had to build the API for it.
Stamp of approval idea
PETE HUNT: Go on npm and there's like 40 different React type aheads right? How many of those get accessibility right? How of those get tab behavior right? How many of those are sufficiently styleable? How many of those mutate props God forbid? I was just thinking that people can submit to the React team, then the team goes and does a quick code review, and maybe there's a checklist of what we think or we check for, locales that kind of thing. Then we say, “Yes, this type ahead is good or passes this bar,” and we never did that. I think that there was an opportunity for somebody to do that. I’m not going to do it.
Premature optimization meme
PETE HUNT: React came on the scene and it was super, super fast because it was micro benchmarked, because it was micro optimized. Like did we have to do that event object pool thing? Probably not but nobody complained about garbage collection pauses when it came out.I’m saying that there are things that sound really true that are repeated all the time. Like premature optimization is one of those things where it sounds great, it sounds like, “Oh, you are thinking about the big picture,” but in reality you are adding latency to your app and you don’t have a … a lot of people don’t have a rubric for when is that okay and when is that not okay.