How Facebook could save the mobile web, starting with open-sourcing its secret tools

Starting today, Facebook is cracking the seal on a treasure trove of tools for the mobile web.

Facebook, as the maintainer of the world’s largest mobile website, stands to drastically accelerate the quality of the mobile web as a whole. The company’s open-source team could give other mobile web developers the capability to create native-competitive, first-class apps built on web technologies. The social network could release tools the industry has been craving for years.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

It’s starting with a Java library for animations. Depending on how Facebook defines competitive advantage, it might also work on releasing tools for real-time reporting tools for monitoring crashes, memory leaks, load times, and more.

We know from conversations with various Facebookers that such tools exist; the big question is whether and when the company will open-source these game-changing bits of software.

Time will tell, but the Java library, called Rebound, is a good first step.

Today’s tools

Ever since Facebook publicly backed away from the mobile web for its iPhone application, developers inside the social network have been working on ways to drastically improve the performance of mobile web technologies.

Apparently, these improvements begin with making the user interface beautiful, responsive, and elegant.

React is Facebook’s JavaScript library for building mobile web interfaces that are perform well and fast.

Here’s a talk explaining the particulars:

Today’s release, Rebound, addresses the issue of clunky, stodgy, old-school mobile web interfaces that feel pretty much like boring, slower websites crammed on a cell phone.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

After exploring available resources for Android and some of Facebook’s existing internal tools, the development team decided a new paradigm was in order.

Rebound brings physics-based animations into play — stuff like you’d experience with Chat Heads or the top end of your News Feed.

From today’s engineering blog post by Facebooker Will Bailey:

We wanted something simple, lightweight, and well suited to the task of animating user interface elements based on physics rules and spring forces. Initially, we thought of building a new type of SpringAnimator on top of the built-in ObjectAnimator framework. Since the animator framework on Android is inherently time-based, we found it wasn’t the right abstraction for doing physics-driven animation. Our SpringAnimator used a trick to tell the animator system that the animation’s duration was essentially infinite until the physics simulation resolved, at which point the animation was immediately finished. Although this did allow us to get realistic models of springs with input velocity and configurable tension and friction running on the animator framework, the abstraction felt wrong. We really just wanted springs or sets of springs and the ability to listen to events on those springs such as start, stop, and update as well as the progress of the spring system as a whole (such as notifications before and after the springs in a system have been updated). These SpringListeners would allow us to perform arbitrary transformations on object properties based on the state of the spring or some mapping thereof.

Rebound is our solution to this set of requirements. Rebound provides a SpringSystem object that can manage a set of spring objects and the ability to listen to various events indicating the state of both the SpringSystem and the springs it manages.

Rebound is also available as a JavaScript library; it plays well with HTML5 as well as Node.js.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

Why the world needs heavy-duty tools

Tools has been one of the most asked-for and most promised element for mobile web technologies for some time now, and every major player has skin in this game.

LinkedIn, which made a big, early bet on HTML5 for its iPad app, later regretted the decision and broke it off with mobile web technologies.

The reason, said mobile chief Kiran Prasad in an interview, was that “more and more people are spending more time in the app, and the app is running out of memory. It’s not performance issues, like speed or rendering, but it’s still a big problem.”

When we asked him what the LinkedIn team needed to make HTML5 work, his first response was more and better tools — “having a debugger that actually works, performance tools that tell you where the memory is running out.”

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

Dollars’ll get you donuts that Facebook already has tools that do exactly that.

Prasad’s second request: Better tools for the animations that give apps a high-polish feel — the bounces, twirls, pops, and other little details that have a subtle but powerful impact on consumers’ impressions of the overall application.

Who’s building mobile web tools?

“If you look at Android and iOS, there are two very large corporations that are focused on building tools to give a lot of detailed information when things go wrong in production,” said Prasad. “On the mobile web side, getting those desktop tools to work for mobile devices is really difficult.”

Enter the Goliath of mobile web evangelism, Mozilla.

[aditude-amp id="medium4" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

“When someone says, ‘We can’t do it; we have to go back to native,’ that hurts us,” said Mozilla’s Jonathan Nightingale in a chat with VentureBeat earlier this year.

“Right around Firefox 4, I spun up the developer tools team. For the last two years, they’ve been cranking out these incredible tools at a breakneck pace. … Because we care a lot about the mobile web, this is very close to our hearts.”

That urgency has increased since the rollout of Firefox OS, the organization’s web-based mobile operating system, where all the apps are web apps.

For Firefox OS and mobile-focused web apps in general, there’s the App Manager, a workflow to build, debug, and deploy great, functional mobile web apps.

[aditude-amp id="medium5" targeting='{"env":"staging","page_type":"article","post_id":868119,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

“The developer response has been extremely positive, with thousands of applications being submitted to the Firefox Marketplace since the recent launch,” said Stormy Peters, the head of developer engagement at Mozilla, in an email to VentureBeat.

“With the announcement of the Firefox OS App Manager, we expect this momentum to increase as developers will find it even easier to start creating and debugging Web apps.”

And, in fact, the Firefox platform now supports thousands of apps, proving there’s value in providing mobile-focused web devs with adequate, simple tools.

And then, there’s Microsoft, which is making a play for more Windows Phone web apps with a sweet suite of tools for Internet Explorer.

As Adarsh Nair, an IE marketing guy, said in a recent VentureBeat interview, “It’s critical that sites have a super-fast UI, and it’s even more critical for touch devices.”

So the new F12 tools for IE show you exactly where to find troublesome page elements that aren’t high performance. You cans see exactly where the frame rate dips. You can see how memory is being used in real time and grab screenshot of the page during memory analysis to see where memory is varying. “You can quickly identify memory leaks,” said Nair.

It’s hard to talk about tools and monitoring without mentioning New Relic. For early 2014, that company is getting ready to roll a massive piece of work called Rubicon, which monitors billions of data points in real time and can tell you exactly who, what, when, where, why, and how your web app is doing.

Again, dollars’ll get you donuts Facebook has its own internal tools for doing exactly that, down to the last real-time, individual-specific performance metric.

The logical solution

For Facebook, capturing its next billion users has everything to do with the mobile web, including pared-down interfaces for feature phones. Given the company’s past experiments and failures in these areas — and its singular focus on engineering growth and creating more human-to-human connections — it makes total sense that the company is working as hard as it can to create the best mobile web experiences possible.

What does it stand to lose by open-sourcing these tools?

Based on past releases, not much.

Its business revolves around advertising, which revolves around eyeballs. No amount of real-time reporting and pretty animations is going to give any other company the advantage in eyeballs, time spent onsite, and user-generated data.

Its previous open-source projects, from specs for its servers to home-brewed optimizations for PHP, show that the company truly understands the concept of developer communities and the importance of contributions to an open technological body of work. Facebook has long been a valuable participant to the open-source projects it uses.

The difference this time is that few open-source projects for mobile web optimization exist. Such tools are brand-spanking-new and, like New Relic’s Rubicon, proprietary.

While the official word from Facebook PR is that the company isn’t ready to talk about the larger issue, tentative hints from Facebookers in the know lead us to believe that open-source tools — the stuff that could blow wide open the potential of the mobile web — is right around the corner. We can’t wait to see what the company releases next.