ReactJS insights from the React core team member, Ben Alpert

Yesterday we had the core React team member, Ben Alpert (@spicy), host an AMA on Hashnode. There were a lot of interesting questions. Ben delighted all of us with his insightful answers, shining light on how React is engineered at Facebook.

I’ve compiled a short summary scooping up all the interesting tidbits. All the excerpts have links to the detailed answers.

You can read the full AMA here, if that’s more your style. 👊

The Origin of React

Jordan Walke, a Facebook engineer, was frustrated with the existing tools for building web UIs while working on tools for advertisers on Facebook … Jordan had the idea to automatically apply updates by re-rendering each view and calculating a difference.

Read the detailed answer here

Why React?

React tries to make it easy to build complicated apps by making it easy to split up your app into many simple, independent components … anecdotally, people find that their React apps are more stable and easier to debug compared to alternatives.

It's important to put care into each platform you build apps for, but it's silly that you need to relearn everything when switching between web and native – or even between iOS and Android.

In the long run, the React team hopes to eliminate complexity and make it easier, for all the new programmers to get started with building UIs.

Read the detailed answers here, here, and here

ReactDOM & ReactNative

ReactDOM and ReactNative have a lot in common; the way that you define custom components and handle state in each component is exactly the same across the two platforms.

The only difference is what built-in components you have to work with: in ReactDOM you use div, img, and span; in ReactNative you use View, Image, and Text.

Enter React Fiber

The above component similarity across platforms paves way for React Fiber, a reimplementation of most of the pieces of React that are shared across platforms.

This new implementation is also an aid to fix things that are difficult to build with the current React implementation – like returning multiple components from render.

Read the detailed answer here

React Native at Facebook

Facebook's Ads Manager app is built 100% in React Native for both iOS and Android, and we were able to share 90% of the code across platforms.

That's huge compared to the status quo of completely rebuilding your app for each platform. Around 100 engineers at Facebook are building products in React Native.

Read the detailed answer here

The React Core Team

"React Core" team at Facebook is about 5 people; responsible for the web version – React DOM – as well as all the bits that are shared by React DOM and React Native.

The vast majority the work is done in the open, on GitHub; involving a combination of responding to issues, fixing bugs, and building new features for React.

Apart from this, the team also helps other Facebook engineers with React questions and handle updating Facebook code when we new deprecations are introduced.

Read the detailed answer here

Updating React at Facebook

With 25,000 React components at Facebook (counting both web and mobile) and 300 more written every week, there's a huge codebase that needs to be kept running.

  • “For simple changes like an API rename, we normally just use find and replace."

  • "For complex changes when it's hard to find the problematic code by grepping through the code, we generally add a runtime warning in React first. We intercept all React warnings that happen during development and log them to our servers so that the React team can sift through them later and see which components in our codebase are causing warnings. At that point it's usually not too hard to fix up each component by hand."

  • "For changes where it's fairly easy to find the code but modifying it is nontrivial, we write an automated "codemod script" to parse the JS and modify the syntax automatically."

Read the detailed answer here

JS changes all React enthusiasts can look forward to

The React team is represented on TC39, the JS/ES committee, and they've proposed changes that they believe will help React developers (and non-React developers, alike).

Read the detailed answer here

Advice for new developers

"Keeping pace with the ecosystem" is not actually a good goal for most people. Truly good ideas will last for a long time; being a year or two behind won't hurt you.

If you're learning things for the first time, it is recommend that you start small. create-react-app was made so that it's easier to focus on the basics, which is all you need in many cases.

Read the detailed answer here