Notes on "The React Story" Pete Hunt interview

"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...

Tests

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

A good example was all the Facebook JavaScript, React included, was packaged using their homegrown bundler which was really, really advanced it used some machine learning or statistical thing that looks at the logs of people downloading individual modules and the dependency graph and will do an optimization on what modules are we going to bundle together and what are you going to have to download up front versus lazily and all sorts of stuff. Written by this PhD, super super crazy, it’s awesome, it’s better than Webpack, it’s better than anything that’s out in open source still, but it’s very, very much tied to Facebook’s infrastructure.

Angular lol

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.

Flux

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

PETE HUNT: we decide to announce it at JSConf 2013, I’m not sure if you guys remember that, but Facebook sponsors, the JSConfs and in exchange they get like a keynote spot or something. There is some sort of arrangement like that that happened. Already the sponsor keynote spots people are like a little “meh” about, the audience is kind of like, “The sponsor gets to speak to us... like... great.”
Yeah, also Facebook this evil mega corp that ruined open source and blah, blah, blah they’re speaking at JSConf. Then so Facebook goes up, Tom O. goes up and he is a really charismatic guy and he goes up with Jordan, who is the smartest engineer I have ever met. They are like, “Hey, we have a new way of building web applications. Everything that you are doing is wrong and here is how we do it.” At least that’s how it was interpreted and it’s like step one put XML in your JavaScript, inside your JavaScript it will be totally fine.” People were like XML whoa I hate XML and then they were like, “I thought I was supposed to separate my mark up from my JavaScript, from my styling and you are telling me to put all of that stuff into one file... I think this is too much.”
PETE HUNT: We were really excited ... the tweets started to roll in that were all like, “Facebook is terrible, this is the worst idea I have ever seen.” ... It wasn’t even like, “Man, I have to throw out my code,” it’s like, “These guys are dumb, Facebook is stupid. Like they have been in their own little world for too long and they don’t know what they are doing and blah, blah, blah,” it was like sort of a bummer. ... They were excited to hate it and I believe that was the last conference that Jordan spoke at.
PETE HUNT: I was chalking it up to ignorance we were just like oh yeah people obviously understand that templates suck. Like components are clearly the way to do things and we know that everybody has felt the pain of having the separate mark up from your JavaScript driving it. We were like, “they’ll love this” and we didn’t realize that like that’s not how the rest of the world thought.

"people that stumble in the IRC and they were like, Hey we really liked your JSConf video"

PETE HUNT: Everybody hated it at JSConf 2013. Nobody used it and it was just kind of like a disaster. Well actually we had an IRC channel, a couple of people, if you know the Chang Lu and Ben Alpert both who now work for Facebook. They were these kind of people that stumble in the IRC and they were like, “Hey we really liked your JSConf video,” which we were like, “Really?”
PETE HUNT: We basically, anybody at that came in the IRC I was always in there, Chedeau was always in there so we would get notifications whenever anyone would join and we would welcome them and we would answer any questions like super, super quick. The first couple of people that came in the community were up and running pretty fast because of that support. Then JSConf EU was later that year and Tom O., I was sitting next to Tom O. at the time and he was like, “I don’t want to do this stupid conference talk,” because remember his last one was so fun and I was like, “I’ll do it!” And he was like, “All right.”
I wrote this talk and I was like, “I’m not going to try to convince you that React is better. I’m just going to tell you why it’s different and these are the three or four things that nobody has tried before.”
That was a lot more; people were a lot more receptive to that. I was like, I don’t know if this is going to work. In reality we were pretty sure it was going to work but you can’t just come in and say, “Hey, we got a better solution that you should just do it this way.” You got to say, “Hey, here is the stuff that’s different,” and then you work your way to ...
Yeah, talk was a hit. Ended up doing a lot more talks based on kind of the success of that one. We got, we talked to David Nolen who was the guy who made ClojureScript. He had been waiting for something like this and he wrote a really kind of famous blog post called; the future of JavaScript MVCs. Where he talked about how great React was, that caused a really big step function increase in React’s popularity.

"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.