WhoBuilt

Headless Flipper - embeddable mobile devtools for your CI and beyond

Sep 27, 2022· 33 min· 502 views·Watch on YouTube

Speaker

Andre Goncharov, who maintains Flipper full time at Meta, presents on headless Flipper at RNEU 2022, covering its use as an embeddable debugging tool for CI and remote development.

Flipper as a device and plugin platform

Goncharov describes Flipper as a debugging platform for mobile apps and other hardware, similar to Chrome DevTools for devices. It discovers devices through tools such as ADB and idb, then connects plugins to them through a message bus. Plugins can inspect layouts, network requests, logs, CPU use, and application state; they can also simulate hardware signals or send commands to an app.

Separating the UI from the server

The original Electron app combined device discovery, message handling, and the React interface. That made remote simulators, cloud development environments, and programmatic access harder to support. The new architecture separates a Node.js Flipper server from a browser-based UI, with the two communicating over WebSockets.

Running plugins through a headless API

Goncharov explains that scripts should call plugin APIs directly rather than operate the UI. A Flipper Server Companion runs plugins on the server and exposes their APIs to headless clients through RPC-like WebSocket messages. In the tic-tac-toe example, a client can call functions such as `makeMove` and `reset`; the plugin serializes requests and responses, while an API function controls which calls are available in headless mode.

CI workflows and future test integrations

At Meta, one working use case lets a developer run a terminal command to capture a device screenshot and submit it to the cloud for design verification. The team is also exploring Flipper alongside end-to-end tests running on cloud simulators, so developers can inspect device data in a browser. Goncharov suggests that plugin data could support state assertions, snapshot testing, or saved debugging records, while noting these ideas are not yet implemented.

Takeaways

  • Separate device management from the interface to make remote and cloud workflows easier to support.
  • Expose serializable plugin operations through an API so scripts can use debugging tools without driving the UI.
  • A single plugin UI can serve multiple device platforms when device-side integrations stay relatively simple.
  • Use device screenshots as a scriptable design review step, and consider Flipper data for deeper test debugging.
  • Treat state assertions and saved test-session data as possible extensions, not current Flipper capabilities.

Mentioned in this talk

Search inside this talk

What was claimed 10

  • works at
    maintains Flipper full time
    “I work at Meta, maintaining Flipper full time.”
    YouTube
    Unverified1 source· Talk
  • feature
    Flipper: Debugs iOS, Android, and React Native apps and other hardware
    “Flipper is a platform for debugging iOS, Android, and React Native apps.”
    YouTube
    Unverified1 source· Talk
  • feature
    Flipper: Device discovery service with a message bus and plugins
    “Flipper is a device discovery service with a message bus.”
    YouTube
    Unverified1 source· Talk
  • uses
    “Metro for React Native to discover the devices.”
    YouTube
    Unverified1 source· Talk
  • uses
    “idb for iOS”
    YouTube
    Unverified1 source· Talk
  • uses
    “Flipper starts ADB for Android”
    YouTube
    Unverified1 source· Talk
  • integrates with
    Flipper UI integrates with WebSocket
    “They can talk via WebSockets.”
    YouTube
    Unverified1 source· Talk
  • feature
    Flipper: Separates the standalone React UI from a Node.js server for device discovery and message bus handling
    “a dedicated Node.js server that does device discovery and handles the message bus, and ... Flipper UI, which is now a standalone React application”
    YouTube
    Unverified1 source· Talk
  • feature
    Flipper Server Companion: Runs plugins and exposes an RPC-like interface over WebSockets to headless clients
    “exposes an RPC-like interface over WebSockets to our headless clients and runs the plugins”
    YouTube
    Unverified1 source· Talk
  • uses
    design verification screenshots submitted to the cloud
    “we have a design verification procedure where we submit a screenshot”
    YouTube
    Unverified1 source· Talk

Related talks