Facebook has completely rewritten React, its popular JavaScript library for building user interfaces. The company hasn’t previously talked much about React Fiber, as the project is called, but it has actually been working on it for a while. It’s now ready to talk about this project publicly in more detail (after word about it started spreading last year) and the plan is to put this rewrite into the hands of developers once React 16.0 launches later this year. It’s already in use on Facebook.com today, which clearly indicates that Facebook itself thinks it’s ready for prime time.
In addition, it is also launching a rewrite of Relay, its framework for building data-heavy applications.
React Fiber
The idea behind React Fiber, the company tells me, is to take what the company has learned from developing React the first time around and put that into an updated framework that is still fully backwards compatible with existing React-based applications. React Fiber, Facebook tells me, will become the foundation of any future improvements and feature development of the React framework.
The main focus here was to make React as responsive as possible, Facebook engineer — and member of the React core team — Ben Alpert told me in an interview earlier this week. “When we develop React, we’re always looking to see how we can help developers build high-quality apps quicker,” he noted. “We want to make it easier to make apps that perform very well and make them responsive.”
In light of this theme, it’s no surprise that the highlights of this new release are built-in primitives for scheduling and incremental rendering. “We want to make sure we render the right stuff at the right time,” Alpert said, and added that “responsiveness was a huge push here.”
But why rewrite React from scratch? “It was not necessarily that the old code base was bad, but we wanted to start with a new foundation that could power everything we do going forward,” Alpert said. That means the new code was developed from the ground up to be extensible, for example.
Alpert stressed that React Fiber will be backward compatible, though as with all major React updates, there will be a few small breaking changes. The team says it doesn’t anticipate that these will be problematic for developers, though. “We always had a strong API contract, so that gives us the flexibility to reimplement,” he added.
Relay Modern
As Facebook also today announced, Relay — the company’s JavaScript framework for building data-driven applications — has also been rewritten with a similar emphasis on performance and extensibility. Relay combines React with Facebook’s GraphQL query language and now Relay Modern, as the company calls this rewrite, is meant to push this concept further and overcome some of the limitations of the original design. That also meant simplifying some of the design to enhance the overall performance of the framework. “Relay Modern retains the best parts of Relay — colocated data and view definitions, declarative data fetching — while also simplifying the API, adding features, improving performance, and reducing the size of the framework,” the team explains in today’s announcement. To do this, the team implemented a number of changes, but most importantly, it adopted static queries and ahead-of-time optimizations.
Static queries essentially ensure that complex queries that aren’t altered by runtime conditions can be pre-built and offloaded to Facebook’s servers. So instead of sending complex queries across the network, all an application has to send is a string that identifies the pre-set query and the variables needed to complete it. Related to this, the ahead-of-time optimization feature in the Relay compiler now looks at the query structure to optimize the query that is now stored on the server to execute it faster — and hence return results to the user faster, too. Other new features in React Modern include built-in garbage collection, for example.
For developers who are already using an older version of Relay, Relay Modern comes with a compatibility API.
Facebook says that when its teams switched the Marketplace tab in the Facebook app from Relay to Relay Modern, the time to interaction on Android improved by an average of 900ms. While that doesn’t sound like much, every second on mobile counts, and that’s enough to make an application feel noticeably more responsive than before.
