React: Facebook's Functional Turn on Writing Javascript

practice DOI:10.1145/2980991 performance. The key to both advances Article development led by queue.acm.org is that components built from stan- dard JavaScript objects serve as the fun- damental building blocks for React’s A discussion with Pete Hunt, Paul O’Shannessy, internal framework, thus allowing for Dave Smith, and Terry Coatta greatly simplified composability. Once developers manage to get comfortable with building front ends in this way, they typically find they can more readi- ly see what is going on while also enjoy- React: ing greater flexibility in terms of how they structure and display data. All of which caused us to wonder about what led to the creation of React in the first place and what some of its most Facebook’s important guiding principles were. For- tunately for us, Pete Hunt, who at the time was an engineering manager at Instagram as well as one of the more Functional prominent members of Facebook’s React core team, is willing to shed some light on React’s beginnings. Hunt has since gone on to cofound Smyte, a San Turn on Francisco startup focused on security for marketplaces and social networks. Also helping to tell the story is Paul O’Shannessy, one of the first engi- Writing neers at Facebook to be dedicated to React full time. He came to that role from Mozilla, where he had previously worked on the Firefox front end. JavaScript The job of asking the probing ques- tions that drive the discussion forward falls to Dave Smith and Terry Coatta. Smith is an engineering director at HireVue, a Salt Lake City company focused on team-building software, where he has had an opportunity to make ex- tensive use of both Angular and React. ONE OF THE long-standing ironies of user-friendly Coatta is the CTO of Marine Learning JavaScript frontends is that building them typically Systems, where he is building a learning management system targeted at the involved trudging through the DOM (Document maritime industry. He is also a member Object Model), hardly known for its friendliness of the acmqueue editorial board. to developers. But now developers have a way to DAVE SMITH: What is it exactly that led avoid directly interacting with the DOM, thanks to to the creation of React? Facebook’s decision to open source its React library PETE HUNT: Of all the Web apps at Facebook, one of the most complex is for the construction of user interface components. what we use to create ads and manage React essentially manages to abstract away the ad accounts. One of the biggest prob- lems is keeping the UI (user interface) DOM, thus simplifying the programming model while in sync with both the business logic also—in a somewhat surprising turn—improving and the state of the application. Tradi- 56 COMMUNICATIONS OF THE ACM | DECEMBER 2016 | VOL. 59 | NO. 12 tionally, we’ve done that by manually at how this new programming model manipulating the DOM using a cen- fared against both the Bolt model tralized event bus, whether by putting and our old event model. React ended events into the queue or by having lis- up really surprising a lot of people— teners for the event and then letting enough so, in fact, that it was shipped them do their thing. almost immediately as part of our That proved to be really cumber- “liking and commenting” interface some, so a few years ago we imple- on News Feed. That was the first big mented what we then considered to test for React, and that came a few be a state-of-the-art, DOM-monitoring years ago. system called Bolt. It was kind of like Then we tried it out on Instagram. Backbone with observables, where you com, which is where I entered the pic- would register for computed proper- ture since I was the person at Instagram ties that would eventually get flushed responsible for building a few things to the DOM. But then we found that using React. We were really happy with also was pretty hard to manage since it since it proved to be capable of run- you could never be sure when your ning our whole page instead of just one properties were going to be updated— small widget here or there. That gave us meaning that if you changed a value, a pretty good indication it was actually you couldn’t be sure whether it was going to work. Since then, it has essen- going to cause a single update, cascad- tially become the de facto way people ing updates, or no updates at all. Fig- write JavaScript at Facebook. uring out when those updates might TERRY COATTA: I’ve heard React takes actually occur also proved to be a really a different approach to data binding. hard problem. What sets React apart there? The whole idea behind React ini- PH: The way I think about data bind- tially was just to find some way to wire ing in a Web context is that you’ve got up those change handlers such that en- some sort of observable data structure gineers could actually wrap their heads down to the DOM nodes. The challenge around them. That hadn’t been the is that when you’re implementing case with Bolt, and as a consequence some sort of observable system, you’re we ended up with lots of bugs nobody obliged to observe this data structure could solve. So the engineers who start- wherever your application touches the ed working on a way to remedy that data model. ended up going wild for a couple of For example, if you use something months and came out with this weird- like Ember, everything you do is go- looking thing nobody thought had ing to use getters and setters, meaning any chance whatsoever of working. If you’re going to need to remain aware of you’re even vaguely familiar with React, this observable abstraction throughout you already know that whenever there’s the entire application. So if you want to a change in your underlying data mod- compute a value, you’re not going to el, it essentially re-renders the whole use a function only; you’re going to use application and then does a diff to see a computed property number, which is what actually changed in the rendered a domain-specific thing for Ember. result. Then it’s only those parts of the Angular, I think, does a much better page that get updated. job of this since it uses dirty checking, Some people here had some per- which means you can actually take ad- formance concerns about that, so vantage of regular JavaScript objects. an early version of React ended up The problem with Angular, though, is being run through a serious gaunt- that it makes it difficult to compose let of engineering tests where it got your application. That’s because, in- benchmarked against pretty much stead of using regular functions or ob- everything that could be thrown at it. jects to build up abstractions (as you IMAGE BY ALICIA KUBISTA/ANDRIJ BORYS ASSOCIATES, BASED ON FACEBOOK REACT LOGO REACT ON FACEBOOK BASED ASSOCIATES, BORYS ALICIA KUBISTA/ANDRIJ BY IMAGE As part of that, of course, we looked would do with JavaScript), you have to DECEMBER 2016 | VOL. 59 | NO. 12 | COMMUNICATIONS OF THE ACM 57 practice er data you tell it to accept. That basically allows for any structure. It could be something like Backbone. It could be plain JSON. It could be whatever PETE HUNT you want. Then your code will just go At a very high level, ahead and do whatever it’s supposed to do, backed by the full power of Ja- React essentially vaScript. At the end of that, however, it will treats your user return a value, which we call a vir- code as a black box tual DOM data structure. That’s basically just a fancy handle for JavaScript while also taking in objects that tell you which kinds of whatever data you elements they are and what their at- tributes are. So if you think of data tell it to accept. binding as a way to keep your UI up to That basically pass everything through a scope in or- date with your underlying model, you der to observe those changes. Then you can accomplish that with React just by allows for any end up with this data binding that cou- signaling, “Hey, something in my data ples different parts of your program model may have just changed.” That structure. in ways that aren’t necessarily all that will prompt React to call the black-box clear or obvious. user code, which in turn will emit a For example, let’s say we’re look- new virtual DOM representation. Then, ing to sort a list of your top friends— having kept the previous representa- which is the kind of thing we do all of tion, React will look at the new version the time here. In order for us to do that and the old version and do a diff of the with an observable system, we would two. Based on that, it might conclude, have to set up an observer for every “Oh, we need to build a className at- one of the thousand friends you’ve tribute at this node.” listed, even if all we’re really looking The advantage of this approach is to do is to render the top 10. So, as you that it involves no actual tracking of can imagine, it’s going to take a good your underlying data model.

Load more