Flipper 2021 Roadmap Update

Over the last year, the Flipper adoption in the open source community has doubled, and for many React Native developers Flipper has become the default debugging tool. As the community continues to grow, we believe it’s important to share updates about our plans.

<!--truncate-->

A short look back

During the first half of 2021, we have introduced support for connecting to physical iOS devices by leveraging idb. We have also introduced the Sandy plugin architecture, which simplifies the creation of plugins and provides a richer set of UI components by adopting Ant Design. The new architecture is strongly typed, easily unit testable and allows us to process and render data much faster, which has (at Facebook at least) significantly increased the up-time of Flipper. The underlying mechanism has been open sourced as the flipper-data-source package. And last but not least, we introduced dark mode support.

What is ahead?

Our focus for Flipper for Q4 2021 is to remove friction and make it easier to onboard new targets. This is because, in many instances, Flipper isn't used just to debug mobile apps, but also to debug many of our other products, such as native and Electron-based desktop applications, and devices like Oculus, Portal or feature phones.

Looking ahead, we plan to:

• Move away from RSocket. RSocket is a protocol that served us well for encrypted communication between Flipper and clients. However, especially in the React Native world, the dependencies it brings has been a continuous source of build issues with any new iOS update. We are now testing internally a version of Flipper that uses secured WebSocket connections instead. The resulting simplified dependency chain should prevent a lot of current and future build issues.
• Introduce a headless Flipper version. The Flipper team is currently investing in decoupling all network, OS and device interaction logic from the Flipper front end. This will make it possible to run Flipper as a headless service, and embed the UI in any web-based stack. By default Flipper will remain an Electron app, but this change introduces a lot of new possibilities: It will be possible to run Flipper headless on CI systems to collect data during test runs. It will be possible to embed the Flipper UI inside IDEs to reduce context switching. To achieve this, the Flipper code base will be split into many smaller packages.
• Improve the Flipper marketplace. We are working on an improved Flipper plugin marketplace, to help promote plugins, and create a better understanding of what plugins do, and how they are supported.
• Create a reference WebSocket implementation. For Native mobile apps and React Native, there are standard packages to register plugins and connect to the Flipper desktop application. Although several WebSocket implementations exist to do the same for web apps, we don't have a standardized SDK and example project for integrating web applications with Flipper. By changing this we'll hope to make it easy for front-end engineers to leverage Flipper.
• Add support for React Native Windows. 'nough said.

Flipper needs you!

Flipper is maintained by a small team at Facebook, yet serving over a hundred plugins and dozens of different targets. Our team's goal is to support Flipper as a plugin-based platform for which we maintain the infrastructure. We don't typically invest in individual plugins, but we do love plugin improvements. For example, the support for mocking network requests (on Android) was entirely contributed by the community (thanks James Harmon!). As was Protobuf support (thanks Harold Martin!).

For that reason, we've marked many requests in the issue tracker as PR Welcome. Contributing changes should be as simple as cloning the repository and running yarn && yarn start in the desktop/ folder.

Investing in debugging tools, both generic ones or just for specific apps, will benefit iteration speed. And we hope Flipper will make it as hassle free as possible to create your debugging tools. For an overview of Flipper for React Native, and why and how to build your own plugins, we recommend checking out the Flipper: The Extensible DevTool Platform for React Native talk.

Happy debugging!