Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Facebook lays out ambitious React.js JavaScript dev plans

Paul Krill | March 1, 2016
Facebook details improvements to performance, data management, and developer experience for its UI library

React.js, Facebook's JavaScript library for building user interfaces, is in line for improvements in performance, gesture capabilities, and developer experience.

All these improvements, however, remain in the conceptual stage, with Facebook seeking help from the developer community to implement them.

Speaking at the recent React.js Conf in San Francisco, Facebook Software Engineer Ben Alpert emphasized faster list processing as key to boosting React's performance. "If you actually look at almost any mobile app on your phone, they're all made up of lists," such as a mail client, calendar or phone book, he said. "This is one thing that we think is superimportant to make fast."

There are three techniques for doing this, he said. One is windowing, in which the application only renders what is on the screen. While this sounds obvious, it's not easy to do in React now, Alpert said. "We have some abstractions for this, but they're not as performant as they could be."

A second technique is rendering views in chunks, breaking them up to avoid unresponsive performance. React could render part of a new item onscreen, pause, then let scrolling continue, to maintain responsiveness.

The third technique is doing layout in React itself rather than within the browser. Layout information would be available in the render function for a component, and a default could be in place for widths smaller than a specific size. "This very easily fixes the reflow problem because now you can just render the correct thing the first time. You don't need to render a placeholder and then replace it once you know how big it is," Alpert said. This also makes windowing simpler, he said.

Facebook wants to provide the gesture capability with a simple component API written entirely in pure JavaScript. Gestures could be added into the component tree, and the same gesture system could be implemented across different platforms, including the Web.

The company also wants to bring its Animated library from React Native, allowing for views to be declarative while state changes continuously, to the React DOM. This would enable the library to be used in Web applications rather than in only iOS and Android applications.

To improve application structuring for code reuse, Facebook's React Native technology, for building native iOS and Android applications via React, could be extended to the Web. Developers could end up with basically the same app for all three platforms, sharing 90 percent of the code. Alpert emphasized this was "just an idea," but it would enable software engineering organizations to have a single team instead of separate Android, iOS, and mobile Web teams.

Facebook wants to make the development process quicker, resulting in higher-quality applications, and simplification plays a key role. Right now, React developers have to configure tools like Babel, Npm, and Node.js, Alpert said. These tools solve problems, but at the expense of simplicity. Developers should be able to create a single file and run it without setting up anything else, Alpert believes.

 

1  2  Next Page 

Sign up for CIO Asia eNewsletters.