Inside Facebook’s journey from web based to native mobile app development

A significant portion of smartphone owners regularly use the Facebook app on mobile. And most certainly, many users have already seen many bugs and slowdowns despite regular updates. Some users prefer to use mobile web version of Facebook, which is much faster compared to mobile version.

The story is that Facebook has preferred to develop mobile application in HTML5 instead of native Android (Java) language, leading to many bugs and slowness. The company’s engineers spent days and nights in front of big screen monitors writing JavaScript, PHP, and HTML code for PC users.

But as smartphone penetration and Facebook’s user count increased, building and updating app on HTML5 was a difficult task for Facebook’s engineer. It needed stability and a top-notch user experience. What it had was devastatingly slow apps with long load times between screens and unresponsive controls. CEO Mark Zuckerberg would later call relying on HTML5 was one of Facebook’s biggest mistakes to date.

In order to avoid losing ground in mobile and reassure shareholders, Facebook proposed a functional Android application knowing that 70% of mobile owners use Facebook on Android. In 2012, Facebook made the transition from WebView to native in the Facebook app for Android. Facebook’s moving from a hybrid native/webview to pure native code, allowing the company to optimize the Facebook experience for faster loading, new user interfaces, disk cache, and so on.

Scaling Facebook for Android

Developing and maintaining native apps for different devices is time-consuming and expensive. You need to hire separate teams of engineers/designers/QA, experts at squeezing the best performance from their respective devices, reducing the most usable and intuitive UI.

Chaitanya Mishra, a software engineer at Facebook London, where he focuses on improving the performance of Facebook’s Android apps, recently concluded Velocity Conf London shared how Facebook for Android transitioned to a native app, and the growing pains associated with it in measuring and improving performance on multiple dimensions, while distributing development across a broad set of independent product teams.

The design has hardly changed a bit compared to the previous version; but the real improvements stuck inside the application. Thanks to native code, the app is running faster now. This can be seen especially when loading the news and history, including images or when scrolling through the timeline. The load times are shorter and the navigation has become more fluid. Native apps do a much better job at providing a single point of focus for the user.

Chaitanya shared that Facebook team primary objective was to create a build tool that favored the creation of many small modules rather than a handful of large modules. Facebook’s web development team needed to adapt a fast cycle time for Android development. The team was quick to fix when a build breaks and they did production-like monitoring on functional errors and performance problems every four weeks before releasing to app store.

Android Native Code

Facebook’s Android app is built from scratch using Android’s Software Development Kit (SDK), which improved user experience. Because all of Android apps (Facebook for Android, Messenger, and Pages Manager) are built from one codebase with a single, unified directory of Java source code, code reuse is straightforward. This fine-grained design also makes it easier to create small, sample applications for testing individual features of an app.

Chaitanya spoke that besides functional and performance testing, the team check other build process including app size, memory usage and power consumption. Memory efficiency has a dramatic effect on UI smoothness. The team focused specifically on minimizing, eliminating, or deferring allocations in performance-critical code and also deferred performing allocation-heavy code (like feed story parsing) until scrolling stopped and moved them off the UI thread.

The Facebook engineer gave the example that app performance and error monitoring is done using Analytics Logger. The data is then analyzed regularly using an in-house tool called Scuba. He gave insight into free space measurements technique the team implemented where an increasing number of DB crashes was found due to over allocation or even entire copies of database, large caches and also some unnecessary files found on users’ devices.

He shared that native apps have more direct access to optimized OS modules and hardware features, which means better performance, faster, more immediate interaction. Despite the transition, Chaitanya conceded that for less used features web based design was a better choice for Facebook. According to Chaitanya the drawback of relying on web is the need to maintain a backwards compatible web site API as much as possible.

About Saroj Kar

Saroj is a Staff Writer at SiliconANGLE covering DevOps, social, mobile and gaming news. If you have a story idea or tip, send it to @SiliconAngle on Twitter.