RFC: Decoupling Flipper from React Native core

[huntie]

Outlines our intent to no longer include Flipper's native integration in React Native 0.74, and to replace Flipper's JS debugging experience in React Native 0.73 with an equivalent one-click debugging flow leveraging Chrome DevTools.

View the rendered RFC

[acoates-ms]

Looks good from a react-native-windows perspective.

[thymikee]

Good from RN CLI point of view. Since we're essentially losing all the non-js debugging tools working out-of-the-box with Flipper, I'd put emphasis on how to integrate Flipper again to one's codebase. I believe this part is missing in the RFC – what would be the actions that a user needs to take to integrate Flipper after e.g. installing this new package.

[usrbowe]

Does this only include Hermes, or this option can be also enabled for JSC (via some proxy server).
Although the JSC likely does not expose Network requests as compared to Hermes.

Also this got me thinking for extensibility option. Would we be able to install custom chrome extensions? Like leverage existing React DevTools or some of state management library DevTools?
Feels like now we heading direction, where we have two separate DevTools (Chrome DevTools and Flipper). So might cause a bit of friction to switch between those depending on the need.
We could technically have also lighter version of Flipper integration, which would only work for JS realm of RN, then we can initiate the connection via js-flipper.

[zoontek]

Looks great! Do you have an idea on how will it play with RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD?

[kneth]

@huntie @cortinico As a library maintainer, the Realm team has a few comments:

• We've been very pleased with the transition to running JavaScript on device when debugging and attaching via the Chrome DevTools Protocol, for apps running Hermes.
• So much so, we've removed support for debugging apps using Realm, via the legacy Chrome debugger (which ran JS code in the browser).
• We've invested in plugins for Flipper to browse the Realm database in a running app on device.
• Of course we're a bit sad that we have sunk cost invested in a product which is no longer enabled by default. And we don't expect to be prioritising work on this until we see the future of Flipper materialising. We do however hope to see Flipper getting revived in some shape or form in the future.
• What's vital to us, is that execution of JavaScript stays on device as that's a prerequisite for a performant debugging experience for an app using Realm.

[huntie]

@kneth @usrbowe

JSC debugging, on-device debugging

• JSC debugging is something we're reviewing ahead of 0.73, but is independent from this proposal (which focuses on Hermes+Flipper → Hermes+DevTools).
• The last action around this is removing JSC remote debugging in the Dev Menu (again for 0.73).
  • Remove remote debugging from dev menu facebook/react-native#36754
  • Debugging via this method had become broken, and we will be investigating what we can do to re-enable this capability.

What's vital to us, is that execution of JavaScript stays on device

• Certainly, we're aligned with this — our hope is for all JavaScript execution and debugging to be on device, for all supported JavaScript engines.
  • This will absolutely be the case for Hermes, which is our default and recommended JavaScript engine.

On the future of Flipper and custom plugins

We do however hope to see Flipper getting revived in some shape or form in the future.

• The Flipper team will continue maintaining Flipper as a tool, but will not explicitly support React Native use cases.
  • Without the default React Native integration, Flipper setup will remain identical to the manual setup currently in the Realm docs. Users can still be directed to this for use cases where a Flipper plugin is needed.
• Flipper can coexist with our new default debugging setup, however we are seeking an interested partner to maintain this integration for the community beyond 0.73. New debugging investments from the React Native team will be centred on our Chrome DevTools workflow.

Would we be able to install custom chrome extensions? Like leverage existing React DevTools or some of state management library DevTools?

• This will be a medium term gap that is only supported by Flipper today.
  • As stated, this RFC is not the end state for React Native debugging — we acknowledge that plugins are an important need for users (e.g. previously filled by react-native-debugger). For these use cases, opting into Flipper will remain necessary.
  • We would like a future iteration of our Chrome DevTools Protocol-based experience to support plugins for debugging JavaScript concepts (particularly for state management libraries such as Relay), but cannot commit to this happening within 2023.
  • ⬆️ Hopefully, we can share some more news in the coming months.
• React DevTools specifically will be included as a one-click workflow for 0.73 (as a standalone window).

[kneth]

@huntie Thank you for the comments, and addressing our concerns. We are happy to see that you also believe that debugging on device is here to stay (and we don't need to maintain a poor shadow implementation of Realm). Of course it will be ideal to support both JSC and Hermes, but for now it is fine to push users in the direction of Hermes.

[huntie]

Update: Amended timelines

Just pushed an edit following some of this feedback and our internal discussions.

• We're now aiming for a slower timeline. We will deprecate the Flipper integration in 0.73 (remaining on by default), and will remove it in 0.74. This allows more time for the community to be aware of these changes and adapt to the new tooling.
• Replacing the Dev Menu actions with non-Flipper replacement flows remains targeted for 0.73.

Note: React Native release dates are not official — just my best guess.

[cortinico]

LGTM

[Pranav-yadav]

We're now aiming for a slower timeline. We will deprecate the Flipper integration in 0.73 (remaining on by default), and will remove it in 0.74. This allows more time for the community to be aware of these changes and adapt to the new tooling.
Replacing the Dev Menu actions with non-Flipper replacement flows remains targeted for 0.73.

@huntie could you please also change the PR desc to add ⬆️.

Not much but the PR link previews are somewhat misleading ;)

[jbrodriguez]

is there a proposal for a network tab ? being able to look at network requests is in many cases critical for troubleshooting

[huntie]

@jbrodriguez Debugging via the Network tab in Chrome DevTools is definitely in our long term plans! We are likely to begin working on this in 2024 (no promises on when this ships, though!). We will be prefacing this work with some necessary foundational improvements to how we implement CDP in React Native.

We will be sharing more of our debugging plans publicly in future. Until then, here's a couple of links:

• [Talk] DevX improvements in 0.73 and a preview of future debugging features: https://youtu.be/-rCRgbsJumk?si=Tf903PUCH3zWUBRV&t=753
• [Discussions] Public notes from the Debugging Working Group (monthly meeting held between React Native partners): https://github.com/react-native-community/developer-experience-wg/discussions/categories/debugging