AMA with Ben Alpert

Ask me anything

Ben Alpert

React core team at Facebook, previously at Khan Academy.

Held on

Missed the AMA? You can still connect with Ben Alpert and ask questions on their Hashnode profile

View Profile

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.

johnmartin

John Martin

1y · Programmer and tinkerer.

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. :)

spicy

Ben AlpertAMA Host

1y

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.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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

spicy

Ben AlpertAMA Host

1y

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.

juanita_b_sutton

Juanita Sutton

1y · Beginner front-end developer

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? :)

spicy

Ben AlpertAMA Host

1y

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.

triptych

Andrew Wooldridge

1y · eBay WebDev

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?

spicy

Ben AlpertAMA Host

1y

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.

triptych

Andrew Wooldridge

1y · eBay WebDev

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?

spicy

Ben AlpertAMA Host

1y

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.

kohwang76

Koh Wang

1y · Forever Learner

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?

spicy

Ben AlpertAMA Host

1y

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.

Haafiz

Haafiz

1y · There is easiness after difficulty

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?

spicy

Ben AlpertAMA Host

1y

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.

bill_89

Bill Schrockwitz

1y · JS is the knife that I carry!

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

spicy

Ben AlpertAMA Host

1y

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.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What would you change in JavaScript/ECMAScript language itself?

spicy

Ben AlpertAMA Host

1y

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).

akatyal

Ayush Katyal

1y · Android Developer

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)

spicy

Ben AlpertAMA Host

1y

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.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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

naquiuddin

Khaja Naquiuddin

1y · Frontend Developer

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?

spicy

Ben AlpertAMA Host

1y

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.

Myselfbharath

bharath muppa

1y · Techical dude

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?

nashio

Ignacio Chavez

1y · Front end software engineer

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?

cecilphillip

Cecil Phillip

1y · .NET Software Developer, Podcaster, Educator & Mentor

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

spicy

Ben AlpertAMA Host

1y

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:

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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>
'
echorohit

Rohit Choudhary

1y · Full stack engineer

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?

spicy

Ben AlpertAMA Host

1y

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!

cecilphillip

Cecil Phillip

1y · .NET Software Developer, Podcaster, Educator & Mentor

What are some of the long term goals for React?

chilimatic

j

1y · stuff ;)

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.

cecilphillip

Cecil Phillip

1y · .NET Software Developer, Podcaster, Educator & Mentor

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

isogramc

Theresa

1y · Front End Web Developer (JS/HTML/CSS @ JAVA) : Predict the future by inventing it

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

spicy

Ben AlpertAMA Host

1y

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.

Myselfbharath

bharath muppa

1y · Techical dude

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?

ppgrant

Paul taylor

1y · Musician, dreamer and coder

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?

kohwang76

Koh Wang

1y · Forever Learner

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

abrahamEarls007

Abraham Earls

1y · Learning to code

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?

keyanzhang

Keyan Zhang

1y · Incoming Front End Engineer at Facebook. I worked on React as an intern and it was fun.

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

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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()?

lpan

Lawrence Pan

1y · Engineering

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

sosana

Zach Sosana

1y · all things javascript

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?

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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"

johnimg

John

1y · front-end dev

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?

kthomas88

Kyle Thomas

1y · Node.js beginner, Trying many things ATM

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

spicy

Ben AlpertAMA Host

1y

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!

kthomas88

Kyle Thomas

1y · Node.js beginner, Trying many things ATM

  • 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?

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What would you change in React?

josheche

Josh

1y · programmer

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?

boopathi

Boopathi Rajaa

1y · A web developer

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! :)

spicy

Ben AlpertAMA Host

1y

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.

n4ndan

Nandan N

1y · Compassionate Coder

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

Haafiz

Haafiz

1y · There is easiness after difficulty

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?

snow

Daniel

1y · =D

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

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

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)

Connect with Ben Alpert and other awesome developers

Join this AMA and connect with developers

loading ...