AMA with

Ben Alpert

React core team at Facebook, previously at Khan Academy.

31st August 2016, 6:00 pm

This AMA is over!

Thank the host

Message from the host 💬

Thanks for having me today! I hope this was useful for everyone here. I'm off to go grab lunch now.

If you have more questions about React, you can usually tweet at our team (@soprano, @gaearon, @vjeux, @zpao, @sebmarkbage) or find us at conferences on a Q&A panel.

Thanks Ben for the AMA! How big is the React team at Facebook? What does a typical day at work look like for the React team?

I appreciate the kind of work you guys are doing! Keep it up. :)

Hi John!

Right now, the "React Core" team at Facebook is about about 5 people. The React core team is responsible for the web version – React DOM – as well as all the bits that are shared by React DOM and React Native. (There are separate teams that focus on React Native.) We also take care of a few other projects like create-react-app and react-devtools.

Each day can vary quite a bit depending on the person (and day), but it usually involves some combination of responding to GitHub issues, fixing bugs, and building new features for React that we think will help people build great apps. We also help other Facebook engineers when they have React questions and handle updating Facebook code when we introduce new deprecations, but the vast majority of our work is done in the open on the GitHub project so you can usually see what we're up to. New commits to React always land on GitHub first, then we import changes into our internal repos once every week or two.

Describe in 2 sentences what real world problem React is solving?

React tries to make it easy to build complicated apps by making it easy to split up your app into many simple, independent components. This means that when you change code in one place, other parts of your app don't break. It's hard to explain this benefit clearly when convincing people to use React but anecdotally, people find that their React apps are more stable and easier to debug compared to alternatives.

React is part of the "product infrastructure" group at Facebook, and our goal is to make it easier for product engineers to build great products. That could mean making it easier to get started, easier to build a high-quality app that feels good, or easier to debug an app once it's written. We also don't have top-down directives telling Facebook engineers what libraries or frameworks they need to use, so we focus on developer experience and developer happiness in order to get people at Facebook to use React. In the long run, our hope is that we can eliminate complexity and make it easier to get started with building UIs if you're new to programming.

I like working with React, a lot. So thank you for all your work, and for hosting this AMA. I have been through the React Fiber Architecture document recently, and I am quite excited for it, and I have a question regarding reconcilement.

  • From what little I have gathered, React Fiber is just the reconciler; what I am not able to digest is how can a single reconciler algorithm work for all the platforms — web, and mobile. Aren't there changes at a structural level between how objects are structured in DOM as to how "views" are structured in mobile apps

  • What is your favourite pastime, apart from working on React? :)

React DOM and React Native have a lot in common. For example, 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 React DOM you use div, img, and span; in React Native you use View, Image, and Text.

React Fiber is a reimplementation of most of the pieces of React that are shared across platforms. It gives us a chance to fix some things that are difficult to build in our current version – like returning multiple components from render –. It's designed from the start to give more control over scheduling and split up work across multiple frames, so that your app stays responsive even if some of your components are complicated and slow.

I like to sing! My high school of ~2000 students had about 400 students in the choir program, and I sang in those choirs during all four years. These days I don't get to sing as much, but sometimes I sing in Facebook's a cappella group The Vocal Network; we even got to sing on stage in Carnegie Hall earlier this year.

ReactJS and React Native are transforming how developers are creating apps for the web, desktop, and mobile devices. Where do you think this trend will lead us in the future?

Our goal with React is to make it the best way to build apps on any platform. We've advertised "Learn once, write anywhere" because we do think 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.

Over time, we've realized that even if you make a specialized app for each platform, there are still many parts that should be shared across platforms. All of the model logic is likely the same, and even view logic and appearance is often identical for most of the inner views in an app. So we want to make it easy to share code that should be shared. 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.

Over time, maybe we can share view code between native and web too. There are some cool projects in the community like react-native-web (https://github.com/necolas/react-native-web) which try to make this possible. We don't have anything to show at Facebook yet down this road but maybe in a year or two we could officially support using View, Image, and Text on the web for people who want to.

Given your experience at Khan Academy, what do you think the future holds for teaching new developers web technologies? And what role does React have in that future?

Good question. egghead.io teaches tech content similar to how Khan Academy videos teach – simple, no-nonsense explanations that focus on the content instead of the presenter and don't use unnecessary special effects. I think that's a great start, especially for people who don't like to learn by reading. You can rewind a video or re-watch it as many times as you need to fully understand the content.

I haven't thought too much else about this problem in the context of teaching tech. One of our goals with React is to make building UIs simpler overall so that there's less to learn.

Lee Byron, in his last AMA, said that you are the one who is responsible for upgrading React components whenever there is a new big release. How difficult is this task? What tools do you use for upgrading React in Facebook's React projects?

That's true. We have about 25,000 React components at Facebook (counting both web and mobile) and 300 more written every week, so there's certainly a huge codebase that we need to keep 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. My coworker Christoph gave a talk about how this works at JSConf last year: https://www.youtube.com/watch?v=d0pOgY8__JM.

As a recent example, Christoph and my intern Keyan built a complex script to convert most components from React.createClass to ES6 classes at https://github.com/reactjs/react-codemod#class. We ran this over our code at Facebook this summer and converted over 10,000 components automatically. For a taste of the output, see the changes in React Native here: https://github.com/facebook/react-native/commit/a2fb703bbb – just imagine that commit but 100x bigger and you'll have an idea of what we went through in our internal code. We'll likely publicize this script more in the coming months and encourage people to use ES6 classes.

What do you think about other similar libraries like Vue.js and Aurelia ? Have you worked with them as well ? How do you compare them with React ? And what do you think how React is different than most of modern front-end JS libraries and frameworks?

I haven't worked much with the "competitors" to React, but we're always looking to learn from each other and make the best tool we can. In many cases, people advertise React alternatives that are just a simplified or slightly optimized version of React – I usually don't find these super interesting; we learn more from libraries that really do something that's not possible in React which we can use as inspiration for React in the future.

I haven't worked with Vue or Aurelia enough to talk intelligently about what they bring to the table, so I won't try. When we look at what to build in React we're always just looking at how to help people build awesome apps while enjoying the process, and we try not to worry too much about the "competition". If people are already happy building apps using other libraries or frameworks, then we're happy too.

How did the whole idea to create React start and how many people worked on developing and implementing it at Facebook initially?

One of our engineers, Jordan Walke, was frustrated with the existing tools for building web UIs while working on some of our tools for advertisers on Facebook. We were using a custom-built library similar to Backbone where you declared the initial appearance of a view completely separately from how to update it. Jordan had the idea to automatically apply updates by rerendering each view and calculating a difference.

Apparently we were pretty skeptical of the idea and discouraged him from working on it. He kept building it anyway and eventually proved to everyone that it could work and could be fast enough. I'm not sure how the team grew from there but we started using it in more places like the Like/Comment/Share interface on every piece of content and the Instagram website, which was built from scratch in 2012 and 2013. Eventually React grew to be used in more projects and was released as open source.

What would you change in JavaScript/ECMAScript language itself?

We're represented on TC39, the JS/ES committee, so we've proposed some things that we think will help React devs (and non-React devs).

Hi Ben! I like working in Angular and never used React before. My question is how does React plan to stand out among similar JS libraries in future?

What is your development setup? Hardware (Computer specs) and Software (Tools, Apps)

For hardware, Facebook gives me a very nice laptop: 15-inch MacBook Pro Retina with 2.8 GHz i7, 16 GB RAM, and 1 TB SSD – and a 27" display at my desk.

I don't use much fancy software – mostly Chrome and MacVim. I often avoid fancy debuggers and just resort to "printf debugging" and add console.log statements. Some of my development work is on a remote server in the Facebook datacenter, and I recently set up iTerm 2 with tmux integration so that it's easy to create new tabs and to restore my windows after switching networks. It's so much better than just using SSH alone.

Hey Ben, Thanks for AMA. My question is simple.

While api's of some new technologies in React ecosystem are changing rapidly, what is the best approach to learn the entire ecosystem (I mean Flux, Relay, GraphQL etc.) and keep pace with their development ?

Would be great if you answer this question both for complete beginners and intermediate developers?

I think "keeping pace with the ecosystem" is not actually a good goal for most people. I don't personally try to keep up with everything that happens. If the tools you know already work well for you, there's no reason to stop using them. Truly good ideas will last for a long time; being a year or two behind won't hurt you.

Even if you're learning things for the first time, I'd recommend starting small. When starting with React, so many people get bogged down with trying to learn too many things at the same time. We made create-react-app so that it's easier to focus on the basics, which is all you need in many cases.

What software engineering, design and architecture patterns, paradigms, principles are used in React?

Howdy, thanks for the AMA

  • Since React is just a view layer, and these days we mostly use things like redux to manage state. Are there any plans to work on a parallel project to manage state?, or are you guys just gonna push projects like Redux forward.

  • What are you excited for in the web right now?

How committed is Facebook to React Native? Are there any plans for improved tooling?

We're using more React Native every day at Facebook, including several parts of our main apps and the Ads Manager app which is completely built in React Native (and shares 90% of its code between iOS and Android). It's probably still a few years before we might do all new product development in React Native – but it's not going anywhere. Around 100 engineers at Facebook are building products in React Native.

I'm not sure what improved tooling you're looking for in particular, but the Nuclide (https://nuclide.io/) team at Facebook is always building out new features to help React Native devs. I would be remiss to not also mention VSCode and its excellent React Native support (https://github.com/Microsoft/vscode-react-native). You can watch demos of both projects from React.js Conf earlier this year:

Hi Ben,

I really want to understand the differences between server side rendering, client side rendering and isomorphic apps. Could you please shed some light or point me to some resources?

What do you think about ES6 template strings and storing HTML in separate files?

Today you can do something like:

export const data => '
<div class="alert ${data.type ? data.type : ''}">
  <h1>${data.title}</h1>
  ${data.message}
</div>
'

Could you please explain how Flux is different from MVC model?

Hi Ben! What is one enhancement you'd love to add to React, BUT which is tricky due to some aspect of React's architecture?

One of our most popular long-standing feature requests has been to allow returning more than one element from render. Hopefully React Fiber will make this possible!

What are some of the long term goals for React?

Hey Ben, thanks for taking the time to answer some questions.

I was wondering, react is a rather big project and as a followup question on John Martin about the size I would be curious of :

how do you organize your team and decide the work packages of react ? We all heard about agile methods but I guess the bigger the company the more the viscosity of planing and decision making kicks in.

  • What are your practices ?
  • What is your point of view on this topic ?

An other question is about the code-base of react, not to spark an religious war, but some claim that using a strongly typed superset (JS++, Typoscript) which gets compiled into JS is better for the interface definitions and the control of structure / parameters inside such a big code-base because it allows for a better insight to the code (static analysis).

  • What is your opinion about developing a library in JS? (Flow, TS, JS++, ...)
  • Does it make sense to work with types and interfaces or is this the attempt from developers of a typed language to control a dynamic language?

The third question is about the attempt - the old idea - of using asm or other binary forms in the browser to increase performance as well as obfuscating proprietary code.

  • what is your perspective on js-binaries ?
  • what could be the bottlenecks of deployment (nfa vs dfa -> size, VM-compatibility issues, ....)

That's all, again thank you for your time :) I apologize if those questions are to general those were the first that came to mind without drifting into algorithms.

If you were to build ReactJS from scratch today, what would you change?

Hi Ben,

My question is really about the stack used at Facebook... I believe, and correct me if I am wrong, that Facebook switched from working @php to developing and contributing actively to a JS framework. Which problems was it meant to solve? Do you feel that it was a success?

And if yes, would you mind sharing? If no, how do you think the company will change to accommodate?

What do you think of Node.js? Is there an interest at Facebook in this tech? If yes, why? If no, why not? :D

Hi Theresa!

It's definitely true that we're doing more JS development, but we've by no means stopped doing PHP. We have our own version of PHP called Hack to add static typing (similar to Flow) and have custom-built HHVM, one of the fastest ways to run PHP. Some of our UIs are still rendered on the server, and even client-rendered features talk to our PHP server which handles most of the business logic and talks to our databases.

We're not using Node.js much. Our PHP stack is used for almost all of our web stuff, and it's pretty mature with a lot of libraries that help with building features – for example, we have a privacy-aware model layer which prevents you from even loading an object if the current user isn't allowed to see it. For this reason, it doesn't make much sense for us to spin up microservices written in other languages.

We do use Node in our JS build process and transform our code using Babel before our static resources get shipped to the CDNs.

Can you give any hint on the DOM Diffing algorithm you guys used in React?

Is there any internal work being done on React Native for web? Are you guys gonna merge react-native-web ever?

Hi Ben! How soon after a React update does Facebook upgrade its React based dependent projects?

I think at React conf earlier this year you mentioned that animations and gestures are areas the Facebook team would like to see improvements. Are there any efforts or plans regarding this from Facebook?

What tools/frameworks do you use to test React itself?

Hi, Ben! How far along are you on React Fiber's implementation? Do you have an estimate timeline, or a hypothetical React version number for React Fiber?

React.js has been amazingly successful in the last year. Its virtual DOM implementation is unique among JavaScript frameworks. I would expect that even browser builders would implement something similar to React's virtual DOM. Do you have any insight into that?

When are you going to merge my Yellow Box PR? :)

How do you see Web and IT in general including AI, ML, VR, Siri/Cortana, bio-engineering will change five years from now?

How React is different from vanilla JS in terms of state/rerendering? When I want to change the state (let say a simple content inside a div) and rerender it, I can just use element.textContent = 'new state' or via vanilla JS object Component.setSomething('new state') or even Component.update(data). Why React should be used instead of simple objects and native web API?

Does React uses document.createDocumentFragment()?

What would you change in React?

Here is a kinda personal question. I saw you contributed to the UW Flow project. Did you go to the University of Waterloo? :D

From business point of view what are use cases for React. In other words, in which apps React should be used and in which - shoud not?

"Sell me React"

What are your thoughts on react-storybook? Does facebook use anything like react-storybook internally?

https://github.com/kadirahq/react-storybook

We noticed by accident that we can do ReactDOM.render inside the render function of our component. Since we use (RxJS) observables to track our component states, it looks like we could just subscribe to each component state and then call ReactDOM.render for each component's react render function.

Is this a misinterpretation on what you are planning in the future? We are hoping to be able to let state emit when rerender is needed per component instead of composing state into a large app state observable.

What is the best best resource to learn React? And what level of mastery in JS should one have before going into React? Also do you recommend any books or specif resources?

What was the state of React development when you joined Facebook? Was it in early stage or late into development?

I joined Facebook in early 2015, much after React was released. In fact, I was already contributing to the React open source project for over a year at that time! I was already spending a lot of time on React, so I figured that I may as well come here and work on it full-time!

  • What are some lesser known features of React that you wish more people tried and used?

  • What are some techniques to get the best out of server side rendering in React?

Fan of yours for a while :)

Curious about your thoughts on React Native web vs React? If you have an idea when it will be out, and how the development is going on it?

We're building an interface using React for our Bitcoin ATM hardware and it's management software to manage our fleet here at our company. We're currently getting started using React.js and building out the components for each piece of ATM hardware. We're designing an isomorphic system and have some concerns about dynamic routes since our workflow is controlled by JSON files. Are there any basic concerns I should make note of before getting too deep into the server side with react?

What is a good way to handle

  1. Animations
  2. Layout

with React Components ? How does Facebook implement them with React Components ?

Is there any way to get better insight of the React build? If not, it would be great if someone made a podcast about the internal build, so it's easier to contribute! :)

We have some info about the build process in the README: https://github.com/facebook/react#contribute. Basically, our build system lets you write @providesModule Foo in one file then you can require('Foo') in any other file. This is left over from how we build JS at Facebook and we might convert to standard CommonJS one day.

If you have more specific questions, just tweet at us and hopefully we can give you an answer.

What setup do you recommend for testing React and React Native components?

How things work at React team? Who usually makes the decision about upcoming features and which bugs to fix first etc?

How do you pick issues to work on? Is this a developer choice on which issue (s)he will be working on or some sort of team lead assigns that?

Hii Ben!! I'm currently working with Angular 1 in a company internal product... And I never use React, so I have 3 questions:

  1. How can I integrate react with existing projects?
  2. What is the best learning path? Because the number of resources are MASSIVE, and I'm lost on where to start and what I need do study.
  3. What are the advantages of using React with our projects?

Thaaanks a lot, and sorry for my English xD

Why do you need to store a copy of a real DOM and compare both trees when you can just use vanilla JS?

For example:

let state = {name: 'John', age: 42}
Component.update(document.getElementById('target_element'), state)
Ben Alpert

Ben is a software developer, currently working at Facebook building React. Previously he has worked at Khan Academy.

This is a great opportunity for you to get in touch with Ben and have his opinions on various topics. Shoot any questions you want Ben to answer!

Community Sponsors👊

The all-in-one cloud platform developers & their teams love. Get started free for 60 days.

Learn more