• 10-things-you-probably- Didnt -know-about-javascript-react-and-nodejs-and- graphql-development-at-Facebook
  • The Nuggets translation Project
  • Translator: Jack
  • Proofread by: DeadLion,Joddiy

Recently, Lee Byron (@LeeByron) from Facebook hosted an AMA(Ask Me Anything) on Hashnode. Interesting questions are raised here, and Lee reveals some amazing facts and details about how Facebook uses React, GraphQL, and React Native. I read his AMA answers, thought about them and came up with 10 interesting takeaways.

So, here we go.

The inspiration behind React?

React was partly inspired by XHP, a project created by Facebook’s Marcel Laverdet in 2009 to modularize Facebook’s user interface. See more here.

Is Facebook planning to rewrite its mobile app with React Native?

Well, the answer is: they already do. Some Facebook apps use React Native builds and some don’t. See this discussion for detailed answers.

Which scenarios are using Immutable. Js?

  • Ads Manager and their React Native Android and IOS apps.
  • Messenger web site (messenger.com)
  • A new article written in draft.js.
  • All the comments on the Facebook News Feed.

How does Facebook write CSS for the React component?

Lee revealed that they forbid importing CSS rules into any file other than the React component. Not only does this ensure that a component should expose the correct API via formatted attributes, but other components cannot override it by importing a rule. In addition, they don’t need to go through JavaScript tricks to import CSS files. Instead, they follow the button.js specification next to button.css. See more here.

Will Facebook update the React component with each major React release?

  • Yes, they can.
  • Facebook typically uses the React Master branch for production
  • The React API hasn’t made many major changes since 2012. As a result, the React team is rarely faced with having to update components.
  • If there are unexpected updates, Ben Alpert, a member of the React team, will be responsible for all synchronization of the code base.
  • They also use an automated tool like Jscodeshift to simplify the problem.

What’s the story behind GraphQL?

GraphQL was born in 2012 when Lee was working on News Feed in the IOS group. At the time, Facebook was growing rapidly in places with poor Internet access. As a result, GraphQL was originally designed to handle slow cell phone connections. Soon after, when Relay was about to open source, they decided that without GraphQL, it wouldn’t make much sense to open source Relay. At the same time, they realized that the GraphQL service was beautifully written and not used by most companies outside of Facebook. So they decided to release it by writing a language-independent specification. That’s the story behind GraphQL. Read the answers here for details.

In what context is Facebook using GraphQL?

Facebook’s Android and IOS apps rely almost entirely on GraphQL support. In some cases, such as Ads Manager, Relay + GraphQL should be used throughout.

Yes, Facebook relies heavily on SSR. Still, Lee says they rarely use the React rendering component on the server. It depends on their server environment.

Does Facebook use Node.js?

Lee says they have a number of client-side tools written in Javascript and run through Node. Remodel is one such tool installed through NPM. All of their internal GraphQL client tools on IOS and Android use Node. But they don’t use Node much on the server side because there hasn’t been a strong demand so far. Even if one day they wanted to use Javascript on the server side (e.g., rendering React on the server), they would just use V8 instead of Node.

How does Falcor (by Netflix) compare to GraphQL?

According to Lee, both tools attempt to solve similar problems. When the GraphQL team first heard about Falcor, they met with the Netflix team and exchanged ideas. Still, there are a number of differences between Falcor and GraphQL. Read the answers here to learn more.

I hope you enjoy this very brief summary. For detailed answers and discussion, please visit the AMA page.