At Facebook, engineers want to move as fast as possible. At scale, this presents challenges with ensuring that new features can be introduced without regressing performance or increasing code complexity.
React simplified the process of developing complex user interfaces. However, it does not provide an answer for how to retrieve the server data necessary to populate those user interfaces. We’ve found that coordinating how and when to retrieve server data can pose challenges. Solutions often create fragile couplings between the client and server logic that lead to bugs and race conditions. And as apps grow in complexity, the number of bugs and race conditions will grow as well.
We’ve been working on a solution to simplify the process of retrieving server data, and we’re happy to share our solution via open source: Relay.
Relay is a JavaScript framework that attempts to apply lessons learned from React. Relay provides a way for React applications to declaratively specify data requirements instead of imperatively dictating instructions for how to fetch that data. And similar to how declarative components allow React to efficiently batch view operations, declarative data requirements allow Relay to efficiently batch network requests.
Relay’s juxtaposition of data requirements and rendering logic reduces the mental disconnect between what data will be retrieved and where it is used. Colocation makes your application more predictable by guaranteeing that if you change the data requirements of one component, you will not unintentionally break view-rendering logic that depends on that data in another component.
Colocation makes it easier to spot both under-fetching (data is used in rendering code but not declared) and over-fetching (data is declared but not used in rendering code). Reducing under-fetching reduces bugs, and reducing over-fetching improves client performance and reduces server load.
And we’re just getting started. We are continuing to explore new ways for Relay to improve the application-development experience, including ways to fulfill data requirements from cache without network connectivity and further improving network efficiency.
Relay is currently in use at Facebook. It has been powering features on facebook.com, messenger.com, and a number of mobile apps using React Native. Check out the Relay website to learn more. The code is available on GitHub and npm.
