Facebook Relay JavaScript framework simplifies API

Facebook has reconstructed its Relay JavaScript framework for building data-driven applications for easier use.

Renamed Relay Modern, the updated framework features a GraphQL framework incorporating best practices from classic Relay, Facebook’s native mobile GraphQL clients, and the GraphQL community, Facebook software engineers Lee Byron and Joe Savona said this week.

“Relay Modern retains the best parts of Relay—co-located data and view definitions, declarative data fetching—while also simplifying the API, adding features, improving performance, and reducing the size of the framework,” the engineers said. “To accomplish this, we embraced two concepts: static queries and ahead-of-time optimization.”

Developers can use new Relay Modern APIs in the context of existing Relay applications thanks to a compatibility API, and Relay has combined Facebook’s React UI library with the GraphQL query language for data-fetching to enable scaling.

GraphQL has been used in native iOS and Android apps from Facebook since 2012, but Facebook’s native apps team had found that it brought the overhead of building queries by concatenating strings and uploading queries over slow connections. The team determined that if GraphQL queries were statically known, they could be constructed once and saved on Facebook servers and replaced in the mobile app with a tiny identifier, resulting in reduced network traffic and faster mobile app performance.

Relay Modern takes a similar approach. “The Relay compiler extracts colocated GraphQL snippets from across an app, constructs the necessary queries, saves them on the server ahead of time and outputs artifacts that the Relay runtime uses to fetch those queries and process their results at runtime,” the engineers said.

Ahead-of-time compilation is used in Relay Modern, as is garbage collection. “Garbage collection is enabled in the core runtime and also carefully integrated into the public API so that developers do not have to explicitly manage cache memory usage,” the engineers said.

Originally intended for building apps for the desktop, tablets, and other high-end devices, Relay has been used for applications ranging from web tools to mobile apps built with React Native, the Facebook engineers said. Previously, Relay was composed of one library, but with Relay Modern, it features three, with a compiler, runtime, and React/Relay integration layer. This modularity could allow Relay’s use with other view libraries at some point or as a standalone library. Relay’s compiler is designed to add more capabilities based on GraphQL’s type system or to be used for tools beyond app development.