React UI Library

React, the result of collaboration between Facebook and Instagram, provides a JavaScript library for developing user interfaces. It abstracts away the DOM and is intended to improve performance, as well as provide a simpler programming model.

And Facebook’s React Native offers a JavaScript framework for building on native mobile environments using JavaScript and React. Introduced for Apple’s iOS, it has been recently extended to Google’s Android platform.

InfoWorld Editor at Large Paul Krill recently sat down with Facebook engineers Olivia Bishop, Tom Occhino, and Adam Wolff to talk about React technologies.

InfoWorld: There are so many JavaScript frameworks, such as Meteor and Angular. What does React bring to the table?

Facebook: The first thing that React brings is components as the fundamental building blocks for our applications. When you break your application down into components, it’s a lot easier for more people to iterate on your app because they can focus on one piece at a time, and that isolation lets us reuse those components in lots of different places.

The second thing is the way that you build those components using declarative code. Declarative code means you’re basically describing, for a declarative user interface, what your application looks like at any point in time. You don’t think about how to make the gray button blue or how to go from this size to that size or this text to that text. You just describe what your view looks like at any point in time and React takes care of making the changes to those views for you.

Angular is a framework, Meteor is a framework, whereas React is more of a library. It’s only concerned with how you build your user interface. If you build your user interface using React, though, it really influences the structure of the rest of your application.

InfoWorld: And what does React Native do?

Facebook: React Native takes that same paradigm — componentization and declarative approach — and the JavaScript framework that is React and now it brings it to the native environment.

Instead of rendering to something that the Web browser can interpret, it builds these DOM nodes and this text and these buttons and things, so now you’re rendering to actual native views. On iOS this would be UIKit views, and on Android it would be Views. There’s no browser involved, there’s no Web view involved.

React Native is really easy to integrate it with an existing native application. That’s important because we know that a lot of people already have an application that they’re not interested in rewriting, but they can still experiment with this technology and incorporate it. In that way it is like a library.

InfoWorld: How have you used React and React Native at Facebook?

Facebook: We’ve built a couple of stand-alone projects, and we’re building views inside of our main Facebook app. [Our Ads Manager app] is the first stand-alone application built using React Native for both iOS and Android. The same team built it for both platforms.

InfoWorld: Will React Native be brought to Windows 10?

Facebook: Facebook’s not actively working on this, but the really nice thing about us open-sourcing this is that there is some interest from the community. So a lot of people have started talking about it and [may take] this on. We’d love to see it. We’d love to see the community drive this one.

There’s also some talk [that] somebody already started playing with porting React Native to the new tvOS to build Apple TV apps using React Native. That’s not being driven by Facebook, but because we’ve open-sourced everything that we have thus far, the community can run with it, which is great.

InfoWorld: Where do React and React Native fit with the Internet of things?

Facebook: Someday. React is really concerned with building user interfaces, so React is an opinionated JavaScript library for building user interfaces. The Internet of things deals with communications between devices, so it is not really the user interface that you’re touching. But certainly if some of those devices have screens, that user interface itself could be powered by React.

InfoWorld: What is next for React and React Native?

Facebook: We’re making developer tooling better. There are some more Android modules coming — more ways that you can make an app feel good on Android.

InfoWorld: Are any Instagram engineers still involved with React?

Facebook: Instagram.com, their website, is built completely with React. [But] they’re not using React Native yet at Instagram.