Facebook introduced React Native in early 2015, and it brings forward what developers received from React on web-declarative self-contained UI components and fast development cycles — to the mobile platform while retaining the speed, fidelity, and feel of native applications. React Native was introduced to Android in September the same year.
Exactly one year before introducing React Native on Android, Facebook developers started working on the Ads Manager app. It was created with an objective to provide an application to millions of users who use Facebook for advertising to ease out the management process and create ads when on the move. Facebook Ads was not only Facebook’s first 100% React Native application but the first cross-platform as well.
You can find more about Facebook Ads and the process of its development below:
React Native: The Choice
Creating an application on a new technology which hadn’t proved its worth came forward with a big risk, but the risks were overshadowed by the number of potential advantages.
First of all, many members of the Facebook team were familiar with React, which came forward as a bonus.
Second, the application was required to incorporate complex data including differences in time zones, date formats, ad formats, currencies and many more. A large chunk of this was already created using JavaScript, and the vision to rewriting all the code in Objective-C and then later again in Java for the Android version of the app was not efficient and useful.
Third, in React Native it would have been easy for the Facebook team to implement UI surfaces that were proposed- data display with multiple lists, table or graphs. Product engineers could be immediately productive implementing these views, as long as they knew React. For this primary reason, all the MOOC providers have come up with ReactJS tutorial lessons for developers.
Much like any new technology, React Native posed many challenges as well, including image editor (zooming and cropping an image for advertisers) and the Geolocation-based advertising. These opportunities motivated the Facebook team to work and push the platform to another level.
iOS: The Platform
The Facebook team decided to work on the iOS version of the app first, which aligned very well with React Native which was also being developed first for iOS. The team of engineers working on the project grew in the subsequent months where new engineers wanted to bring forward a great mobile experience for the users.
Engineers who were experienced on the React Native team helped bridge certain features which were unavailable in React Native, for example gaining access to the device’s image gallery. The application was collaborated with Facebook’s current iOS libraries to perform analytics, crash reporting, and other tasks. That eased the development process and the only thing that was left was to build the application.
As stated, Facebook was able to reuse many of their pre-existing JavaScript libraries. One such library used was Relay, and it was used to deliver data to React applications via GraphQL. Another set of libraries dealt with internationalisation and localisation, which can be tricky when time zones and currencies are involved.
Another big challenge that Facebook faced was navigation flows. A breadcrumb navigation bar was required to navigate through an advertiser’s existing campaigns. It was necessary to get the transition animations and touch gestures correct, otherwise the application would become more of a website advertisement rather than a native application.
The solution that Facebook came forward with was the Navigator component, which is a React component that keeps track of other components using a stack. With a pluggable navigation component, it enabled the developers to implement and iOS-like navigation bar for regular views, breadcrumbs for campaigns and stepper for flow. The bar is notified of animation progress and performs the necessary animation increment to match.
Android: The Shift
When Ads Manager for iOS was nearing its shipping date, Facebook tilted its view towards building an Android Version. A port of React Native to Android was the best possible solution. Luckily, the team was also working on shifting React Native to Android as well.
Fortunately, the React Native Packager’s blacklist feature and React’s abstraction mechanism helped the Facebook team a lot with maximizing code reuse across the two platforms and minimizing the need for explicit platform checks. When it was time to ship Ads Manager for Android, the recycle approach yielded around 85 percent reuse of app code.
Another challenge the Facebook team faced was the management of the source code. The source codebases for Android and iOS were managed in two different repositories. For example, much like with the iOS version, the Facebook team decided to use a few of Facebook’s Android libraries, which lived in the Android repository.
In addition, all the build tools, automation, and continuous integration for Android apps were hooked up to the Android repository. In the end, it was decided to designate the iOS repository as the primary, as it was already there and the iOS version of Facebook Ads application was the mature one.
