How Facebook moved from the desktop to mobile with GraphQL

6 Shares 6 Flares ×

Facebook started as a desktop oriented social network/website. However, by 2011 it had to get serious about mobile or risk “the relevance of the grave,” as Nick Schrock, software engineer, Facebook, puts it.

So it built apps for iPhone and other wireless devices with a hybrid approach based on HTML5 views in a native app. “We were getting feedback that the apps were awful,” Schrock says.

By 2012, Facebook had to rearchitect its entire web development process based on GraphQL, a computer language it created for application data requirements. “If you’re a developer within Facebook and you write mobile code and you access data, GraphQL is the language you use to access that data,” Schrock says.

GraphQL and open source success
In a recent presentation at the @Scale Conference in the San Jose Convention Center, Schrock talked about how GraphQL affects the open source ecosystem that Facebook is helping to build and enables developers to create B2B and B2C applications better and faster, similar to an earlier session by Microsoft.

Before GraphQL, Facebook mobile apps all had custom views and required multiple roundtrips between the server and client, which became unmanageable and introduced entropy into the code base, according to Schrock.

Clients ended up doing a lot of hand coding of their own parsing and endpoint models. “We needed more structure,” Schrock says. Because product developers want to think in terms of hierarchies or graphs of data and not SQL-based APIs, GraphQL was built along these lines of thought.

A few months after its conception in 2012, GraphQL powered the native newsfeed on Facebook, which made users less frustrated and Facebook designers happy, so it seemed to work, according to Schrock. “Today, GraphQL powers nearly the entire surface area of Facebook’s mobile application,” Schrock says, “serving about 260 billion requests per day. This is real, it’s in production—been in production for a long time.”

Hello GraphQL core principles
The way GraphQL works it enables simple, intuitive, easy-to-understand queries. For example, if the mobile client asks for the user’s profile picture it queries the server for the “lilPic” and the “bigPic,” two different sizes of pictures. By returning multiple results from one aliasing query makes information retrieval much more efficient.

Similarly, a user can make one declarative query of her name; friends and events and receive a sophisticated results response of events associated with that person, according to Schrock, instead of needing multiple roundtrips, enter-join tables and restful APIs. “GraphQL is designed to be able to send down the connections of data,” he says.

Much more than just a computer query language, GraphQL is a mental model for product developers to think about how data is structured, according to Schrock. At the core of GraphQL is a type system that’s at the root of every GraphQL server and expresses its capability, he says.

Every query field is the same at its root. However, the “FriendOrderEnum” field remains at the top of Facebook’s data hierarchy as a way for Facebook to scale data across 3 billion machines—one for each end user. “This is a software computed ordering of importance of friends,” Schrock says. “Every single step along the way in this query, there’s a type in context that makes it so you can’t query something that doesn’t exist.” It flips the model developers are used to, according to Schrock.

GraphQL changes this model so that the type system of the app server publishes the possibilities to the client. Then the mobile client specifies the possibilities from the server. “This way you’re actually decoupling the client and the server in a desirable way,” Schrock says. “You’re iterating your models and your views solely in the client, except if you have to create new data that hasn’t been accessed before anywhere else in the application.”

App releases live for all time
GraphQL has been a very successful data strategy for Facebook, according to Schrock, with a single GraphQL centralized schema that serves all the apps that consume that data. Then there is another important dimension to how Facebook uses GraphQL for applications.

“We release applications every week, every other week,” Schrock says. “So we have a ton of live versions of our apps that we have to support for all time. GraphQL allows us to manage that process in a more coherent fashion.” There are more than a thousand versions of live Facebook mobile applications, and as far as Schrock knows all those versions still work.

Operating over existing code
Despite having an acronym like QL within it, GraphQL is not a storage engine, according to Schrock. Where GraphQL excels is operating queries over arbitrary code.

“GraphQL is an overlay on top of existing application data. That means if you adopt GraphQL you can operate over existing code,” Schrock says. “The way this works is the mapping between the externalized GraphQL type system and your code. Each one of these fields maps to a function.”

In the end, any GraphQL core written in any language will take advantage of the asynchronous primitives in that language, according to Schrock. Eventually, all this led Facebook to release GraphQL to the open source community in July 2015 with a technical preview.

Those interested in GraphQL as an open source can find out more at GraphQL.org.

Our previous @Scale coverage can be found here

Photo by Derek Handova

6 Shares Twitter 0 Facebook 0 Google+ 0 LinkedIn 6 Email -- 6 Flares ×
The following two tabs change content below.
Derek Handova

Derek Handova

Derek Handova is a veteran journalist writing on various B2B vertical beats. He started out as associate editor of Micro Publishing News, a pioneer in coverage of the desktop publishing space and more recently as a freelance writer for Digital Journal, Economy Lead (finance and IR beats) and Intelligent Utility (electrical transmission and distribution beats).