News

Facebook Modernizes Open Source Relay JavaScript Framework for Mobile

• By David Ramel
• April 19, 2017

Facebook today announced a new version of Relay -- its open source JavaScript framework for building data-driven applications -- that improves performance on mobile devices.

Called Relay Modern, the new offering also is designed to be easier to use and more extensible than its predecessor, Relay. That original Relay framework was introduced to improve data-fetching functionality for Web developers using the company's popular React library for building UIs.

Relay combines the composable UI functionality of React with GraphQL, a query language for APIs used in retrieving data.

Facebook says Relay is characterized by three primary attributes:

• Declarative: Developers don't need to communicate with their data store using an imperative API. They can simply declare their data requirements using GraphQL and let Relay figure out how and when to fetch the requested data.
• Colocation: Queries live next to the views that rely on them, so devs can easily reason about an app. Relay aggregates queries into efficient network requests to fetch only what's needed.
• Mutations: Relay lets coders mutate data on the client and server using GraphQL mutations and offers automatic data consistency, optimistic update, and error handling.

However, Relay was originally developed to help Facebook engineers build apps for higher-end devices such as desktops and tablets. As its usage spread to lower-end mobile devices that didn't boast the same computing horsepower, problems began to arise.

"As we used Relay on a wider range of devices -- especially underpowered mobile hardware -- we realized some limitations with the original design," the Relay team said in a blog post today. "In particular, the expressive and flexible nature of the API made it challenging to achieve the level of performance we wanted on some devices."

Also, the team received feedback from internal and community developers that indicated the "magical" nature of the Relay API sometimes made it hard for them to learn about its inner workings and predict behavior.

"We realized that a simpler approach could be easier to understand and also allow for greater performance," the team said. "So we set out to redesign Relay to accommodate these new constraints, looking to our existing native mobile GraphQL apps for inspiration."

That resulted in Relay Modern, described by the team as "a forward-looking GraphQL framework that incorporates the learnings and best practices from classic Relay, our native mobile GraphQL clients, and the GraphQL community. 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."

Two concepts instrumental to those goals include static queries and ahead-of-time optimization.

Static GraphQL queries -- known not to be changed by runtime conditions -- are stored on the server during development time in order to lessen overhead and reduce network traffic, thus resulting in faster mobile apps.

Ahead-of-time optimization, meanwhile, is enabled by the Relay compiler's static knowledge of query structures, enabling them to be optimized for quicker delivery to mobile apps.

"Examples of such optimizations include flattening, which reduces duplicate fields to help avoid redundant data processing at runtime, and constant inlining, in which static knowledge of conditionals may allow some branches of a query to be pruned at compile time," the team said.

"Combined, these optimizations help to reduce both the time spent fetching and downloading query results as well as time spent processing them."

Also, other new features were announced for Relay Modern, including:

• Simpler mutations: These were a frequent request from the community. A new mutations API lets developers specify which fields to retrieve after a mutation, along with how the cache should be updated after the mutation occurs.
• Garbage collection: "Relay Modern is designed from the start to support garbage collection -- that is, cache eviction -- in which GraphQL data that is no longer used by any views can be removed from the cache."

The team discussed these and other improvements in detail in today's blog post, which ends with this: "We're excited to share the new Relay Modern APIs, runtime, and compiler with the community on GitHub and npm and to hear your feedback. We're even more excited about sharing this philosophy of how to use GraphQL in sophisticated clients, and we look forward to seeing more tools in the GraphQL community adopt them as well."