HTML5 Standards WebSocket, Shared Worker Fuel Facebook Messenger For Firefox’s Social API

By David Cohen 

Facebook Software Developer Pamela Vagata offered a behind-the-scenes look at the creation of Facebook Messenger for Firefox’s Social API in a note on the Facebook Engineering page.

Vagata wrote about how working on the project with Firefox parent Mozilla enabled the social network to take advantage of HTML5 standards including WebSocket and Shared Worker in order to “architect our messaging stack from the ground up to be fast and efficient.” She added:

Historically, Web developers have worked around the limitations of Web standards by polling servers for updates via asynchronous requests. These asynchronous requests are somewhat expensive because the client-server has to perform some handshaking on each poll. HTML5 introduces a new application-programming interface, WebSocket, which addresses these issues by keeping a client-server connection alive and only requiring the hit of handshaking at the time of opening the connection.

In our first stand-alone chat product, Messenger for Desktop could rely on assumptions such as having at most one instance of the product open at any given time, and being able to create invisible windows which could perform data fetching without rendering until necessary. In Mozilla’s Social API, however, the notion of invisible windows was replaced with an implementation of the HTML5 Shared Worker. This worker provides a mechanism for communicating and synchronizing across the different content elements for the product.

One of the challenges we encountered was using existing JavaScript code from within the context of a DOM-less Shared Worker. Many of our libraries take a dependency on being able to access DOM elements. At Facebook, every developer is empowered to make changes to libraries and existing code. We were able to tweak all of the libraries that Messenger for Firefox takes a dependency on and remove the libraries’ assumption of having access to DOM elements, allowing us to reuse well-built and tested code from the Shared Worker.

Our ability to work with a small team and push code on a daily basis meant we could rapidly iterate on the API design and feature work to get this integration into the wild. It has been awesome getting to work with the latest and greatest HTML5 technologies, as well as the talented developers at Facebook and Mozilla.