architecture.mdx (Creating Plugins - Architecture)

Summary:
Restyle of page, including changes to spelling, grammar, links, and structure (where relevant).

This diff includes a new version of the image 'flipper-communication-diagram.png'.
The old version has been renamed to 'flipper-communication-diagram.bak'

Reviewed By: aigoncharov

Differential Revision: D36628993

fbshipit-source-id: cb59785777926b4fb8b8bb3be2aa2439d3a580d0
This commit is contained in:
Kevin Strider
2022-05-25 03:26:55 -07:00
committed by Facebook GitHub Bot
parent 2d465c1bf9
commit ee006a961b
3 changed files with 13 additions and 6 deletions

View File

@@ -8,15 +8,22 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
Flipper is built to be a universal pluggable platform for development tools. Currently, Flipper focuses on Android and iOS development, but its design does not limit it to these platforms. Another way to think of Flipper is a more general-purpose implementation of Chrome DevTools.
### Overview
Flipper consists of a desktop interface built with javascript on top of Electron so that it can be packaged to run on any operating system.
This desktop app connects over a [tcp connection](establishing-a-connection.mdx) to applications running on simulators and connected devices. An application running on a device or simulator is what we refer to as a client.
Flipper consists of a desktop interface built with JavaScript on top of Electron so that it can be packaged to run on any operating system.
The connection is bi-directional, allowing the desktop to query information from the client as well as the client to push updates directly to the desktop.
This desktop app connects over a [TCP connection](establishing-a-connection.mdx) to applications running on simulators and connected devices. An application running on a device or simulator is called a 'client'.
By querying data and responding to pushing from the client, a Flipper plugin is able to visualize data, debug problems, and change the behavior of running applications. Flipper provides the platform to build these tools on top of and does not limit what kind of tools that may be.
There are two kinds of plugins in Flipper, client plugins and desktop plugins. Client plugins expose information as an API to desktop plugins whose responsibility it is to render this information in an easy-to-digest way. Client plugins are written once for each platform in the platform's native language. Desktop plugins are written only once in JavaScript using React and consume the APIs exposed by the client plugins.
The connection is bi-directional, allowing the desktop to query information from the client as well allowing the client to push updates directly to the desktop.
By querying data and responding to pushing from the client, a Flipper plugin is able to visualize data, debug problems, and change the behavior of running applications. Flipper provides the platform to build these tools and does not limit what kind of tools that may be.
There are two types of plugins in Flipper:
* **Client plugins** - expose information as an API to desktop plugins whose responsibility it is to render this information in an easy-to-digest way. Client plugins are written once for each platform in the platform's native language.
* **Desktop plugins** - written only once in JavaScript using React and consume the APIs exposed by the client plugins.
### Architecture - React Native
Simplified visualization of Flipper architecture, when used with React Native.
The following diagram shows a simplified visualization of the Flipper architecture when used with React Native.
<img alt="Flipper communication diagram" src={useBaseUrl("img/flipper-communication-diagram.png")} />

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 337 KiB