Broadening the scope of dev tools plugins

Last year, we introduced a proof-of-concept for developing dev tools plugins for the Expo CLI. This initiative was particularly significant as it provided an alternative migration path away from Flipper (Flipper no longer has first-party support in React Native but there is not a plan yet for how to migrate away from Flipper plugins).

Over the past few months, our focus has been on refining the API to ensure that these dev tools plugins are both easy to use and develop. These dev tools plugins are available starting with Expo SDK 50.

We're excited to offer a selection of ready-to-use dev tools plugins, all housed in our dev-plugins repository. Thanks to the wealth of existing Flipper plugins and third-party dev tools, we've been able to adapt and migrate these resources into Expo dev tools plugins, eliminating the need for a complete rewrite. The repository includes:

• Apollo Client Dev Tool
• React Native Async Storage Dev Tool (Thank to jthoward64 for the great community work)
• React Navigation Dev Tool
• TanStack’s React Query Dev Tool
• TinyBase Dev Tool

Installing these plugins is straightforward. For instance, to integrate the Apollo Client Dev Tool into your project:

1. Add the package to your project with the command: npx expo install @dev-plugins/apollo-client.
2. Integrate the Apollo Client using the provided hook.

import { useApolloClientDevTools } from '@dev-plugins/apollo-client';

const client = new ApolloClient(...);

export default function App() {
  useApolloClientDevTools(client);

  return (
    <View>
      {/* ... */}
    </View>
  );
}

Exploring the core structure of dev tools reveals three essential components:

1. App Adapter: The helper code resides within your application and is responsible for inspecting specific states. For instance, the Apollo Client dev tool utilizes the client instance to examine request states within the client’s internal data structures.
2. Web UI: The user interface of the dev tool, typically a web application that is launched by Expo CLI, where you can inspect or perform operations.
3. Communication Message Bus: To facilitate bi-directional communication between the App Adapter and the Web UI, we use WebSocket, which is highly suitable for this purpose.

The most challenging aspect of migrating Flipper plugins to Expo dev tools was adapting the Web UI. Flipper offers a variety of sophisticated and specialized React hooks and UI components, all of which are based on web technologies. Acknowledging the vast and diverse nature of the web ecosystem, which extends well beyond the realms of React Native and Flipper, we are focused on broadening the scope of dev tools plugins UIs to be more accommodating and compatible with the wider web environment.

This approach allows developers to use any web technology to create a dev tool UI, not limited to Expo Web or React Web. To demonstrate this, we have developed this Vanilla JavaScript plugin as a proof-of-concept.

In web development, tools like React DevTools and Redux DevTools are indispensable if you're working with React or Redux. Similarly, our new offerings aim to bring such essential tools to a broader development context. Now, you can create your own dev tool plugin by running npx create-dev-plugin@latest or yarn create dev-plugin.

If you have any feedback or suggestions, we'd love to hear from you. Your input is invaluable as we continually strive to improve the developer experience.

A special thanks goes out to the creators of the existing Flipper plugins, whose work has been foundational in this area. We're excited to see the innovative dev tools plugins the community will create. The creativity and expertise of each individual are what drive this ecosystem forward.