React Wednesdays – Flipper for React Native Debugging w/Zain Sajjad & Shannon Hicks

Flipper is an open-source tool and debugging platform that helps visualize, inspect & control apps simply and intuitively. Earlier this year, Flipper became a default experience for React Native (version 62). With Flipper, you can inspect the native layout, monitor the redux state, and test deep linking from a single tool. 

Zain Sajjad and Shannon Hicks joined us for the broadcast to talk about Flipper. Zain performed a demonstration of the Flipper platform and showed us how to use it to debug React Native apps. The demonstration starts at 5:50.

Flipper is a debugging platform with a robust plugin model. The Facebook open-source team provides the support and development of the Flipper platform. The broader development community provides plugins and features built on top of Flipper. 

This approach is an interesting one. It can be tough to leverage open-source development communities to build platforms because such platforms require broad agreement on strategy and implementation. At the same time, it is easier to leverage open-source developer communities to develop plugins and enhancements to a platform because plugins are more focused and often created to “scratch a particular itch” for a developer. I fully expect the Flipper ecosystem to evolve into a feature-rich environment with great tools to take the friction out of mobile development.

Flipper is a desktop application. It connects to your emulator instance easily. You interact with the Flipper desktop app, and it will control the code on your device.

Layout Inspection

Software developers can walk the layout tree with the Flipper layout inspector. There are two different views; one shows the layout tree for the Native UI on the mobile device, the other shows the React Native UI. Software developers will be able to work through tricky layout issues by having both the native and React Native UIs available. As an example, the native UI accessibility parameters are available for inspection in the native view.

Logging

Software developers will enjoy working with the logging console. It ships with Regex filtering, and also the ability to watch logs via expressions. The expression feature is helpful to trace, say, how many times a procedure ran.

Network Inspector

At the 13:32 mark, Zain showed the network inspector. The network inspection lists all network calls. Flipper captures each call request and response, then makes the contents of each available for display in the Flipper Network Pane. Images returned from network calls are also available for display.

Plugins and Environment

The Flipper Platform also contains a plugin management feature. With this feature, users can find plugins, install them, and update them as needed. There are many plugins already in the Flipper plugin repo, and it’s easy to find them with the plugin manager’s built-in search capability.

Flipper also can help ensure the development is up to specification with the Doctor functionality. Doctor validates the development environment configuration and provides help if a dependency is missing or out of date. Keeping a cross-platform development environment in sync is an entire workstream. It’s reassuring to see the support in Flipper for environment configs.

Support for Screen Captures – Still and Video

My favorite feature of the Flipper Platform for React Native is taking screen captures of the state of the emulator. This built-in capture functionality can take a single image frame or a video. The Flipper Platform has a built-in capability to save captures. This feature promises to save lots of time for Developers, Testers, and Users to share how the app works for them without requiring the use of additional software. It may seem like a small feature, but providing a capture-first model will help make screen captures a part of common development workflow.

Discussion on Upgrading React Native

At the 32:06 mark, we started a discussion about upgrading React Native. The Flipper Platform became a default experience with React Native .62. Naturally those development teams working on apps that are not yet on React Native .62 may be hesitant to upgrade. Shannon Hicks discussed his work on bringing their apps up into the later versions of React Native. He mentions that the upgrade process in later versions of React Native (post .60) has become straightforward. This news is reassuring for those developers who might be shy about upgrading because of the perceived workload.

Shannon also discussed a https://react-native-community.github.io/upgrade-helper/ upgrade tool tool provided by the React community that will show line by line comparisons of code changes between versions. Such a tool can take a lot of guesswork out of the upgrade process.

What Flipper Lacks

At 47:37 I asked Zain and Shannon for any ideas they had about lacking features in Flipper. Zain would like to see a very nice Redux debugger added to the product. As well, he would like to be able to keep multiple views visible at a time. For example, having the network and layout panes visible at the same time would prevent context switching pain from going back and forth.

Shannon would like to see network conditioning. Network conditioning is simulating the network latency and quality in the emulation stack. Network conditioning would help identify conditions that happen in places of poor network connectivity. I remember functionality like this in Chrome developer tools. Given the distributed nature of mobile apps, I imagine someone is already working on a network conditioning feature.