React: Making faster, smoother UIs for data-driven Web apps

Billed as a JavaScript library for building user interfaces, React is a Facebook- and Instagram-driven project that is providing the “view” part of the MVC (model-view-controller) development paradigm. It was created to enable developers to build large applications with data that changes.

Work on React began around late 2011, and the technology was open sourced a year ago. Sometimes identified as ReactJS, the current version is 0.10. Proponents argue that React challenges a lot of conventional wisdom and that some ideas at first might seem crazy. InfoWorld Editor-at-Large Paul Krill recently spoke with Pete Hunt, a core member of the React development team, about the technology.

InfoWorld: What distinguishes React from other JavaScript frameworks, such as AngularJS or the Meteor platform?

Hunt: Over the past couple of years, we’ve seen a shift toward what we like to call reactive programming. Meteor and Angular are examples of that. When your data updates, your UI is automatically updated to reflect that, and the system manages that for you. The difference with React is the way that you program it is much more like a game engine, as opposed to these alternative approaches, with data-binding. With a game engine, effectively what happens is the screen is cleared at the beginning of every frame, and then you redraw the scene. With a traditional data-binding approach you have live widgets on the screen, and you manipulate them, and they stay on the screen the entire time. So the terminology for this is that React is an immediate-mode renderer, and other systems could be considered a retained mode.

InfoWorld: Doesn’t React provide the view portion of the MVC paradigm?

Hunt: If you’re using model-view-controller, you can definitely think of React as the view part of that and many people think of it as the controller as well. But since there are lots of different interpretations of model-view-controller, it’s not a black or white kind of thing. But definitely the view, probably the controller.

InfoWorld: What’s the story pertaining to React and the DOM?

Hunt: The browser itself is retain mode. You click an HTML element on the screen, and then you change it over time. The programming model we wanted for React was basically to throw out and redraw everything. We think that’s easier to understand. However, the browser is not designed to work like that. What we did is we built something that we’re calling the virtual DOM to abstract that. And so we have a way of basically rendering to a virtual DOM, throwing out the whole virtual DOM and re-creating it every time the data changes, and then React under the hood will convert that, will get the old virtual DOM with the new virtual DOM and then convert that to manipulations of the real browser DOM.

InfoWorld: I’m looking at a blog entry from James Long of Mozilla, entitled, “Removing user interface complexity, or why React is awesome.” It reads, “I’ve been studying frameworks and libraries like Amber, Angular, and React, etc., and I’m mostly concerned with the core problems of data binding and componentizing UIs. After much research and uses of the technologies above, I found React to provide the best solution.” Does he say what you’re you’re trying to accomplish here?

Hunt: Yes. He definitely gets it.

InfoWorld: Can you tell me about a road map for React, where you go from here and when you might have a formal 1.0 release?

Hunt: Sure. We don’t have a very strict release schedule yet, so I can’t speak to specifically when we will get to 1.0. My guess would be by the end of the year. We have a public Wiki page that talks about what we hope to accomplish by then. Mostly, we’re looking at tightening up the API and removing what we like to call foot guns — features that developers can use to shoot themselves in the foot. We’re also looking at maybe making the story around static analysis and type-checking a little bit better. Microsoft has a great technology called TypeScript, and wouldn’t it be great if we could integrate that with React? So looking at that, also looking at leveraging more features in the upcoming JavaScript standard, ECMAScript 6, specifically around classes, is another thing we’re looking into. Right now in the JavaScript world, everybody implements classes a little differently. We want to get everybody to use the same standard so that when people come up with tooling for these classes, they work everywhere. And React is all about re-using as much from the existing JavaScript vernacular as you can.

InfoWorld: Does React work with TypeScript at all right now?

Hunt: Parts of it do. We would like to make more of it work with TypeScript. The great thing about [TypeScript] is you can gradually start to adopt it, so if you write your code in TypeScript it will work with React. But we’d like to let TypeScript give React better guarantees for correctness.

InfoWorld: How many developers are using React, or is there really no way to know?

Hunt: It’s very difficult to measure that. I can say that we, as of this morning, we had around 6,300 GitHub starts, and we’re growing pretty quickly. Most of the people writing JavaScript at Facebook are using React. We use it for lots of projects, the more high-profile ones would be when you’re liking and commenting on Facebook, you’re going through React. You can imagine that gets a decent amount of traffic. Our Page Insights product uses React. If you upload photos on our mobile site or navigate to different pages, that’s powered by React. We’re really using it a lot.

InfoWorld: Facebook had a controversy where the company redid its iOS application in native Objective-C. Do you think you might redo it in React?

Hunt: Well, I’m not really working on those teams, so I’m not sure what their plans are. What I can say is that the Web platform does have a lot of problems still, but it’s also solved a lot of stuff since then. We didn’t have React back then. Maybe the math on that decision would be a little different with React, but I honestly wasn’t involved with that kind of stuff.

InfoWorld: Can you name any other high-profile applications that use React?

Hunt: We’re starting to see a lot of really great companies use it. Khan Academy, the e-learning startup, they’re using React. We’re starting to see companies like Venmo and Airbnb use React as well. The New York Times has used React on some of their interactive media.

InfoWorld: Is there anything else that you want to say about React?

Hunt: This is actually a fundamentally different mental model for building user interfaces. This isn’t just a different syntax of the same old ideas. This is a very different way of looking at the problem. Even if you’re not looking to build a lot of user interfaces on the Web or you don’t want to use React, we do have some ideas that I think are fairly novel. It’s worth at least checking out the documentation and seeing the ideas behind it.

This story, “React: Making faster, smoother UIs for data-driven Web apps,” was originally published at InfoWorld.com. Get the first word on what the important tech news really means with the InfoWorld Tech Watch blog. For the latest developments in business technology news, follow InfoWorld.com on Twitter.