React Demolishes Engineering Silos So Facebook Can Reuse Code For Web, iOS, And Android

It was supposed to take 18 months. But with React Native, Facebook built its iOS Ads Manager app in 5 months, and then ported it to Android in just 3 more months. That’s because React Native let Facebook’s engineers work faster and reuse the JavaScript backend.

Coders have dreamed of a system that would let them ‘write once, run anywhere’. But Facebook engineering manager Tom Occhino says the performace of those apps “feels like shit”. Instead, he says the opportunity is to “learn to build user interfaces once with React, and then you can write your apps anywhere.”

IMG_2350

React and React Native are two tools that have helped Facebook build websites and mobile apps faster. React is a powerful JavaScript framework for web apps. React Native lets developers build native mobile apps in that familiar JavaScript language while displaying user interfaces in high-performance native components.

Facebook open sourced React in 2013 and React Native earlier this year at its F8 conference. That helps it get tons of feedback on how to improve the tools. But now Facebook’s opening up more figuratively about how important these technologies are to its business. Occhino and Facebook engineering director Adam Wolff, who was the co-founder of a company called Sharegrove that Facebook acquired in 2010 to build React, spoke to a group of reporters today.

First Wolff gave a little history of Facebook’s mobile engineering effort. Things were a disaster in 2011. Facebook had grown up as a web-only company that frequently iterated and tested new features. But the pursuit of speed became what Mark Zuckerberg famously called one Facebook’s “biggest mistakes”

The mobile apps were built on HTML5 — a hybrid of native infrastructure wrapped around content pulled from its website. That made it quick to make updates because Facebook could write one mobile web code base and easily wrap it in iOS or Android. But this HTML5 format led to painfully slow mobile apps that users hated.

mobileteamold

Finally in 2012, Mark Zuckerberg declared the company would become mobile first. Whole iOS and Android teams were devised to overhaul the code, and when Facebook re-released its entirely native apps for iOS and Android, speed went up dramatically and so did user satisfaction.

But still, the mobile teams were siloed. So Facebook changed its engineering structure again, led a huge charge to train most of its engineerings in one of the big mobile operating systems, and embedded mobile engineers inside each product team like photos or events.

mobileteamnew

Wolff admits this “slowed down development”, because engineers had to learn these new mobile mediums, and because building for mobile naturally takes longer because of device and native app constraints. But the benefit goes to the user. The native apps are harder to make, yet they can be faster and flashier without using more of a phone’s computing and energy resources.

Facebook ReactNow with React and React Native, the silos dividing Facebook’s engineering teams for web, iOS, and Android are coming down, and so are the barriers to building great apps. Once engineers know how to code in JavaScript for React, they can easily write apps for any of the major platforms.

Next, Facebook is building two more tools called Relay and Flow that will let it still use the JavaScript backend and React, but get some of the flexibility and productivity benefits of more modern coding languages. Occhino concluded “Developers could move really fast on web, and we’re trying to get some of that back with React Native.”