From 8db555b25922586d83980cf3cbee12197bb3059e Mon Sep 17 00:00:00 2001 From: Pritesh Nandgaonkar Date: Tue, 31 Jul 2018 10:27:42 -0700 Subject: [PATCH] Replace sonar with flipper in docs Summary: Replaces sonar with flipper in the docs of a website Reviewed By: passy Differential Revision: D9046564 fbshipit-source-id: 55d03d787489406571ea0b4ac0adbc0daaa95cd4 --- docs/communicating.md | 2 +- docs/create-table-plugin.md | 2 +- docs/error-handling.md | 12 ++++++------ docs/establishing-a-connection.md | 4 ++-- docs/getting-started.md | 24 ++++++++++++------------ docs/jssetup.md | 12 ++++++------ docs/layout-plugin.md | 8 ++++---- docs/logs-plugin.md | 2 +- docs/network-plugin.md | 4 ++-- docs/sandbox-plugin.md | 4 ++-- docs/send-data.md | 6 +++--- docs/shared-preferences-plugin.md | 2 +- docs/stetho.md | 6 +++--- docs/styling-components.md | 6 +++--- docs/ui-components.md | 10 +++++----- docs/unterstanding-sonar.md | 8 ++++---- 16 files changed, 56 insertions(+), 56 deletions(-) diff --git a/docs/communicating.md b/docs/communicating.md index d0f19b63f..ecb56854c 100644 --- a/docs/communicating.md +++ b/docs/communicating.md @@ -37,7 +37,7 @@ this.client.send('methodName', DATA); ## Subscriptions -A client is not only able to respond to method calls but also push data directly to the Sonar desktop app. With the subscribe API your plugin can subscribe to there pushes from the client. Pass the name of the method and the API it is part of as well as a callback function to start a subscription. Any time the client sends a push matching this method the callback will be called with any attached data as a javascript object. +A client is not only able to respond to method calls but also push data directly to the Flipper desktop app. With the subscribe API your plugin can subscribe to there pushes from the client. Pass the name of the method and the API it is part of as well as a callback function to start a subscription. Any time the client sends a push matching this method the callback will be called with any attached data as a javascript object. ```javascript this.client.subscribe('methodName', data => { diff --git a/docs/create-table-plugin.md b/docs/create-table-plugin.md index 323955e09..57b80d96f 100644 --- a/docs/create-table-plugin.md +++ b/docs/create-table-plugin.md @@ -4,7 +4,7 @@ title: Create Table Plugin sidebar_label: Create Table Plugin --- -A very common kind of Sonar plugin is a plugin which fetches some structured data from the device and presents it in a table. +A very common kind of Flipper plugin is a plugin which fetches some structured data from the device and presents it in a table. To make building these kinds of plugins as easy as possible we have created an abstraction we call `createTablePlugin`. This is a function which manages the complexities of building a table plugin but still allows you to customize many things to suite your needs. diff --git a/docs/error-handling.md b/docs/error-handling.md index 12a5f9725..7dc93b8cc 100644 --- a/docs/error-handling.md +++ b/docs/error-handling.md @@ -4,11 +4,11 @@ title: Error Handling sidebar_label: Error Handling --- -Errors in Sonar plugins should be hidden from the user while providing actionable data to the plugin developer. +Errors in Flipper plugins should be hidden from the user while providing actionable data to the plugin developer. ## Android -To gracefully handle errors in Sonar we provide the `ErrorReportingRunnable` class. This is a custom runnable which catches all exceptions, stopping them from crashing the application and reporting them to the plugin developer. +To gracefully handle errors in Flipper we provide the `ErrorReportingRunnable` class. This is a custom runnable which catches all exceptions, stopping them from crashing the application and reporting them to the plugin developer. ```java new ErrorReportingRunnable(mConnection) { @@ -19,14 +19,14 @@ new ErrorReportingRunnable(mConnection) { }.run(); ``` -Executing this block of code will always finish without error but may transfer any silences error to the Sonar desktop app. During plugin development these java stack traces are surfaced in the chrome dev console. In production the errors are instead sent to and a task is assigned so that you can quickly deploy a fix. +Executing this block of code will always finish without error but may transfer any silences error to the Flipper desktop app. During plugin development these java stack traces are surfaced in the chrome dev console. In production the errors are instead sent to and a task is assigned so that you can quickly deploy a fix. Always use `ErrorReportingRunnable` for error handling instead of `try`/`catch` or even worse letting errors crash the app. With ErrorReportingRunnable you won't block anyone and you won't hide any stack traces. ## C++ -To gracefully handle errors in Sonar we perform all transactions inside of a try block which catches all exceptions, stopping them from crashing the application and reporting them to the plugin developer. This includes your own customs implementations of `SonarPlugin::didConnect()` and `SonarConnection::send()` and `::receive()`! +To gracefully handle errors in Flipper we perform all transactions inside of a try block which catches all exceptions, stopping them from crashing the application and reporting them to the plugin developer. This includes your own customs implementations of `SonarPlugin::didConnect()` and `SonarConnection::send()` and `::receive()`! -That means you can safely throw exceptions in your plugin code. The exception messages will be sent to the Sonar desktop app. During plugin development the exception messages are surfaced in the Chrome dev console. +That means you can safely throw exceptions in your plugin code. The exception messages will be sent to the Flipper desktop app. During plugin development the exception messages are surfaced in the Chrome dev console. -If your plugin performs asynchronous work in which exceptions are thrown, these exceptions will not be caught by the Sonar infrastructure. You should handle them appropriately. +If your plugin performs asynchronous work in which exceptions are thrown, these exceptions will not be caught by the Flipper infrastructure. You should handle them appropriately. diff --git a/docs/establishing-a-connection.md b/docs/establishing-a-connection.md index 9a1108e17..58559b6b6 100644 --- a/docs/establishing-a-connection.md +++ b/docs/establishing-a-connection.md @@ -4,12 +4,12 @@ Below is an outline of how a connection is established between an app with with ## Transport Protocol -Sonar uses [RSocket](http://rsocket.io/) to communicate between the desktop and mobile apps. RSocket allows for bi-directional communication. +Flipper uses [RSocket](http://rsocket.io/) to communicate between the desktop and mobile apps. RSocket allows for bi-directional communication. ## Client-Server relationship When the desktop app starts up, it opens a secure socket on port 8088. -Any mobile app with the sonar SDK installed will continually attempt to connect to this port on localhost to establish a connection with the desktop app. +Any mobile app with the Flipper SDK installed will continually attempt to connect to this port on localhost to establish a connection with the desktop app. ## Certificate Exchange diff --git a/docs/getting-started.md b/docs/getting-started.md index 1d03f2fe4..937e36744 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -4,20 +4,20 @@ title: Getting Started sidebar_label: Getting Started --- -Sonar helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Sonar consists of two parts: +Flipper helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Flipper consists of two parts: * The desktop app for macOS * The native mobile SDKs for Android and iOS -To use Sonar, you need to add the mobile SDK to your app. +To use Flipper, you need to add the mobile SDK to your app. ## Setup ### Desktop app -The desktop part of Sonar doesn't need any particular setup. Simply [download the latest build](https://www.facebook.com/sonar/public/mac) of our app and launch it. The desktop app is available for macOS and requires a working installation of the Android/iOS development tools on your system. +The desktop part of Flipper doesn't need any particular setup. Simply [download the latest build](https://www.facebook.com/sonar/public/mac) of our app and launch it. The desktop app is available for macOS and requires a working installation of the Android/iOS development tools on your system. -Once you start Sonar and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Sonar. To see app specific data, you need to integrate our native SDKs with your app. +Once you start Flipper and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Flipper. To see app specific data, you need to integrate our native SDKs with your app. ![Logs plugin](/docs/assets/initial.png) @@ -30,7 +30,7 @@ Add the following permissions to your AndroidManifest.xml. The SDK needs these t ``` -Sonar is distributed via JCenter. Add dependencies to your `build.gradle` file. +Flipper is distributed via JCenter. Add dependencies to your `build.gradle` file. ``` repositories { @@ -42,7 +42,7 @@ dependencies { } ``` -Now you can initialize Sonar in your Application's `onCreate`-method like this: +Now you can initialize Flipper in your Application's `onCreate`-method like this: ```java public class MyApplication extends Application { @@ -63,7 +63,7 @@ public class MyApplication extends Application { ### Setup your iOS app -To integrate with an iOS app, you can use [CocoaPods](https://cocoapods.org). Add the mobile Sonar SDK and its dependencies to your `Podfile`: +To integrate with an iOS app, you can use [CocoaPods](https://cocoapods.org). Add the mobile Flipper SDK and its dependencies to your `Podfile`: ```ruby project 'MyApp.xcodeproj' @@ -89,7 +89,7 @@ target 'MyApp' do end ``` -and install the dependencies by running `pod install`. When you open the Xcode workspace file for your app, you now can import and initialize Sonar in your AppDelegate. +and install the dependencies by running `pod install`. When you open the Xcode workspace file for your app, you now can import and initialize Flipper in your AppDelegate. ```objective-c #import @@ -109,12 +109,12 @@ and install the dependencies by running `pod install`. When you open the Xcode w ```
-* We haven't released the dependency to CocoaPods yet, here is the [issue](https://github.com/facebook/Sonar/issues/132) by which you can track. +* We haven't released the dependency to CocoaPods yet, here is the [issue](https://github.com/facebook/flipper/issues/132) by which you can track. * If you do not use CocoaPods as a dependency management tool then currently there is no way to integrate SonarKit other than manually including all the dependencies and building it. -* For Android, Sonar works with both emulators and physical devices connected through USB. However on iOS, we don't yet support physical devices. -* The Sonar layout and network plugins aren't supported in Swift projects since they include C++ dependencies. We're working on supporting these plugins for Swift apps. You can join the discussion on the [issues page](https://github.com/facebook/Sonar/issues). +* For Android, Flipper works with both emulators and physical devices connected through USB. However on iOS, we don't yet support physical devices. +* The Flipper layout and network plugins aren't supported in Swift projects since they include C++ dependencies. We're working on supporting these plugins for Swift apps. You can join the discussion on the [issues page](https://github.com/facebook/flipper/issues).
## Ready for takeoff -Finally, you need to add plugins to your Sonar client. See [Network Plugin](network-plugin.md) and [Layout Inspector Plugin](layout-plugin.md) for information on how to add them. +Finally, you need to add plugins to your Flipper client. See [Network Plugin](network-plugin.md) and [Layout Inspector Plugin](layout-plugin.md) for information on how to add them. diff --git a/docs/jssetup.md b/docs/jssetup.md index c104a72e9..277e047cf 100644 --- a/docs/jssetup.md +++ b/docs/jssetup.md @@ -30,15 +30,15 @@ export default class extends SonarPlugin { } ``` -Learn more on how to use [Sonar's UI components](ui-components.md). +Learn more on how to use [Flipper's UI components](ui-components.md). ### Dynamically loading plugins -Once a plugin is created, Sonar can load it from its folder. The path from where the plugins are loaded is specified in `~/.sonar/config.json`. Add the parent folder of your plugin to `pluginPaths` and start Sonar. +Once a plugin is created, Flipper can load it from its folder. The path from where the plugins are loaded is specified in `~/.sonar/config.json`. Add the parent folder of your plugin to `pluginPaths` and start Flipper. ### npm dependencies -If you need any dependencies in your plugin, you can install them using `yarn add`. The Sonar UI components exported from `sonar`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin. +If you need any dependencies in your plugin, you can install them using `yarn add`. The Flipper UI components exported from `sonar`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin. ### ES6, babel-transforms and bundling @@ -46,13 +46,13 @@ Our plugin-loader is capable of all ES6 goodness, flow annotations and JSX and a ## Working on the core -If you only want to work on a plugin, you don't need to run the development build of Sonar, but you can use the production release. However, if you want to contribute to Sonar's core, add additional UI components, or do anything outside the scope of a single plugins this is how you run the development version of Sonar. +If you only want to work on a plugin, you don't need to run the development build of Flipper, but you can use the production release. However, if you want to contribute to Flipper's core, add additional UI components, or do anything outside the scope of a single plugins this is how you run the development version of Flipper. Make sure you have a recent version of node.js and yarn installed on your system (node ≥ 8, yarn ≥ 1.5). Then run the following commands: ``` -git clone https://github.com/facebook/Sonar.git -cd Sonar +git clone https://github.com/facebook/flipper.git +cd flipper yarn yarn start ``` diff --git a/docs/layout-plugin.md b/docs/layout-plugin.md index 58d847bc8..9a0d0c2e3 100644 --- a/docs/layout-plugin.md +++ b/docs/layout-plugin.md @@ -3,17 +3,17 @@ id: layout-plugin title: Layout Inspector --- -The Layout Inspector in Sonar is useful for a ton of different debugging scenarios. First of all you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product. +The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product. The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well! We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks. -If you hover over a view or component in Sonar we will highlight the corresponding item in your app! This is perfect for debugging the bounds of your views and making sure you have the correct visual padding. +If you hover over a view or component in Flipper we will highlight the corresponding item in your app! This is perfect for debugging the bounds of your views and making sure you have the correct visual padding. ![Layout plugin](/docs/assets/layout.png) ## Setup -To use the layout inspector plugin, you need to add the plugin to your Sonar client instance. +To use the layout inspector plugin, you need to add the plugin to your Flipper client instance. ### Android @@ -47,7 +47,7 @@ Enable target mode by clicking on the crosshairs icon. Now, you can touch any vi The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which is time-consuming and should not be necessary. -Add the following tag to your view to skip it from Sonar's view picker. The view will still be shown in the layout hierarchy, but it will not be selected while using the view picker. +Add the following tag to your view to skip it from Flipper's view picker. The view will still be shown in the layout hierarchy, but it will not be selected while using the view picker. ```java view.setTag("sonar_skip_view_traversal", true); diff --git a/docs/logs-plugin.md b/docs/logs-plugin.md index 0a1460c49..fab574680 100644 --- a/docs/logs-plugin.md +++ b/docs/logs-plugin.md @@ -15,4 +15,4 @@ The search bar can be used to search for logs and filter for certain types. From The expression watcher in the sidebar can be used to watch for certain logs to happen and count how often the occur. An expression can be a simple string, or a regular expression which is matched against the logs. -When the notify checkbox is enabled, Sonar will send notifications once the log is happening. This let's you know when the watcher triggered, even if Sonar is in the background. +When the notify checkbox is enabled, Flipper will send notifications once the log is happening. This let's you know when the watcher triggered, even if Flipper is in the background. diff --git a/docs/network-plugin.md b/docs/network-plugin.md index 196786365..d19f12b84 100644 --- a/docs/network-plugin.md +++ b/docs/network-plugin.md @@ -9,7 +9,7 @@ Use the Network inspector to inspect outgoing network traffic our apps. You can ## Setup -To use the network plugin, you need to add the plugin to your Sonar client instance. +To use the network plugin, you need to add the plugin to your Flipper client instance. ### Android @@ -32,7 +32,7 @@ new OkHttpClient.Builder() .build(); ``` -As interceptors can modify the request and response, add the Sonar interceptor after all others to get an accurate view of the network traffic. +As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic. ### iOS diff --git a/docs/sandbox-plugin.md b/docs/sandbox-plugin.md index 1c2023c95..1eca1fb03 100644 --- a/docs/sandbox-plugin.md +++ b/docs/sandbox-plugin.md @@ -4,11 +4,11 @@ title: Sandbox --- The Sandbox plugin is useful for developers that had to test changes of their apps by pointing them to some Sandbox environment. Through this plugin and a few lines of code in the client, -the app can get a callback and get the value that the user has input through Sonar. At this point, the developer can plugin its logic to save this setting in its app. +the app can get a callback and get the value that the user has input through Flipper. At this point, the developer can plugin its logic to save this setting in its app. ## Setup -To use the sandbox plugin, you need to add the plugin to your Sonar client instance. +To use the sandbox plugin, you need to add the plugin to your Flipper client instance. ### Android diff --git a/docs/send-data.md b/docs/send-data.md index 5308dfcd9..c8dd65fc5 100644 --- a/docs/send-data.md +++ b/docs/send-data.md @@ -4,9 +4,9 @@ title: Sending Data to Plugins sidebar_label: Send Data --- -It is often useful to get an instance of a sonar plugin to send data to it. Sonar makes this simple with built in support. +It is often useful to get an instance of a flipper plugin to send data to it. Flipper makes this simple with built in support. -Plugins should be treated as singleton instances as there can only be one `SonarClient` and each `SonarClient` can only have one instance of a certain plugin. The Sonar API makes this simple by offering a way to get the current client and query it for plugins. +Plugins should be treated as singleton instances as there can only be one `SonarClient` and each `SonarClient` can only have one instance of a certain plugin. The Flipper API makes this simple by offering a way to get the current client and query it for plugins. Plugins are identified by the string that their identifier method returns, in this example, "MySonarPlugin": @@ -47,4 +47,4 @@ myPlugin = client.getPlugin("MySonarPlugin"); myPlugin->sendData(myData); ``` -Here, `sendData` is an example of a method that might be implemented by the sonar plugin. +Here, `sendData` is an example of a method that might be implemented by the flipper plugin. diff --git a/docs/shared-preferences-plugin.md b/docs/shared-preferences-plugin.md index 87e176607..28e775837 100644 --- a/docs/shared-preferences-plugin.md +++ b/docs/shared-preferences-plugin.md @@ -22,4 +22,4 @@ client.addPlugin( ## Usage -All changes to the given shared preference file will automatically appear in Sonar. You may also edit the values in Sonar and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter. +All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter. diff --git a/docs/stetho.md b/docs/stetho.md index 2e406d7bb..e355316ac 100644 --- a/docs/stetho.md +++ b/docs/stetho.md @@ -4,8 +4,8 @@ title: Stetho Guidance sidebar_label: Stetho Guidance --- -In 2015, we introduced [Stetho](http://facebook.github.io/stetho/), an Android debugging bridge built on top of Chrome dev tools. While it was a valuable tool to us and many members of the community, we felt that it limited us in what we could do with it. Stetho is Android-only and while Chrome dev tools gave us a nice foundation to build upon, they also limited us in what we could build. Stetho is an Android tool and Chrome dev tools is built for web developers. This means we can only provide a good experience for the intersection of those two development environments, which was very limiting. With Sonar being built as a standalone app, we can do more things, like handling adb connections and supporting iOS, which wasn't easily achievable with stetho. +In 2015, we introduced [Stetho](http://facebook.github.io/stetho/), an Android debugging bridge built on top of Chrome dev tools. While it was a valuable tool to us and many members of the community, we felt that it limited us in what we could do with it. Stetho is Android-only and while Chrome dev tools gave us a nice foundation to build upon, they also limited us in what we could build. Stetho is an Android tool and Chrome dev tools is built for web developers. This means we can only provide a good experience for the intersection of those two development environments, which was very limiting. With Flipper being built as a standalone app, we can do more things, like handling adb connections and supporting iOS, which wasn't easily achievable with stetho. -This is why we built Sonar. We wanted to create a platform that gives us all the flexibility we need to build more advanced features and support for iOS. One of Sonar's core concepts is its extensibility using [plugins](create-plugin.md). Plugins are written in react and we provide a set of ready-to-use UI components that allows developers to build great plugin UIs with a few lines of code. +This is why we built Flipper. We wanted to create a platform that gives us all the flexibility we need to build more advanced features and support for iOS. One of Flipper's core concepts is its extensibility using [plugins](create-plugin.md). Plugins are written in react and we provide a set of ready-to-use UI components that allows developers to build great plugin UIs with a few lines of code. -While offering many new features, Sonar also already covers most of the features provided by Stetho. This includes network and layout inspection and an advanced log viewer. We are committed to continuously improving Sonar with new features and plugins, however we are aware that not all stetho features are currently supported by Sonar. If you are using a particular feature of Stetho which isn't supported by Sonar, we are more than happy to hear about your use-case. Stetho will continue to work and we are not abandoning it so you can choose the tool that fits your needs best. We are confident that Sonar will work well for most use-cases and are more than happy to accept contributions from the open-source community adding new features. +While offering many new features, Flipper also already covers most of the features provided by Stetho. This includes network and layout inspection and an advanced log viewer. We are committed to continuously improving Flipper with new features and plugins, however we are aware that not all stetho features are currently supported by Flipper. If you are using a particular feature of Stetho which isn't supported by Flipper, we are more than happy to hear about your use-case. Stetho will continue to work and we are not abandoning it so you can choose the tool that fits your needs best. We are confident that Flipper will work well for most use-cases and are more than happy to accept contributions from the open-source community adding new features. diff --git a/docs/styling-components.md b/docs/styling-components.md index cd404bca6..9bbebd18d 100644 --- a/docs/styling-components.md +++ b/docs/styling-components.md @@ -28,9 +28,9 @@ But you can use any other HTML-tags like this: styled.customHTMLTag('canvas', { ... }); ``` -## Extending Sonar Components +## Extending Flipper Components -It's very common for components to require customizing Sonar's components in some way. For example changing colors, alignment, or wrapping behavior. There is a `extends` method on all styled components which allows adding or overwriting existing style rules. +It's very common for components to require customizing Flipper's components in some way. For example changing colors, alignment, or wrapping behavior. There is a `extends` method on all styled components which allows adding or overwriting existing style rules. For these use cases when a styled component is only used within the context of a single component we encourage declaring it as a inner static instance. This makes it clear where the component is used and avoids polluting the global namespace. @@ -72,4 +72,4 @@ Pseudo-classes can be used like this: ## Colors -The colors module contains all standard colors used by Sonar. All the available colors are defined in `src/ui/components/colors.js` with comments about suggested usage of them. And we strongly encourage to use them. +The colors module contains all standard colors used by Flipper. All the available colors are defined in `src/ui/components/colors.js` with comments about suggested usage of them. And we strongly encourage to use them. diff --git a/docs/ui-components.md b/docs/ui-components.md index b121d5cd1..17a6b777f 100644 --- a/docs/ui-components.md +++ b/docs/ui-components.md @@ -4,11 +4,11 @@ title: UI Components sidebar_label: UI Components --- -Sonar has a lot of built in React components to build UIs. You can find all of these in [`src/ui/components`](https://github.com/facebook/Sonar/tree/master/src/ui/components) and can import them directly using `import {Button} from 'sonar'`. +Flipper has a lot of built in React components to build UIs. You can find all of these in [`src/ui/components`](https://github.com/facebook/Flipper/tree/master/src/ui/components) and can import them directly using `import {Button} from 'sonar'`. ## FlexBox -In Sonar we make heavy use of flexbox for layout. FlexBox is layout system on the web which has been specifically design for building application like UIs. Sonar provides two flexbox components `FlexRow` and `FlexColumn`. These are flexbox components with some sane defaults such as automatically scrolling content that overflows. +In Flipper we make heavy use of flexbox for layout. FlexBox is layout system on the web which has been specifically design for building application like UIs. Flipper provides two flexbox components `FlexRow` and `FlexColumn`. These are flexbox components with some sane defaults such as automatically scrolling content that overflows. ```javascript import { FlexRow, FlexColumn } from 'sonar'; @@ -48,12 +48,12 @@ const Title = Text.extends({ color: colors.red, }); -Sonar Subtitle; +Flipper Subtitle; ``` ## Buttons -Sonar comes with a couple of button styles built in! As always you can style then further using the styled module but we expect the pre-defined buttons to fit most UIs. +Flipper comes with a couple of button styles built in! As always you can style then further using the styled module but we expect the pre-defined buttons to fit most UIs. ```javascript import {Button} from 'sonar'; @@ -103,7 +103,7 @@ export default class MySonarPlugin extends SonarPlugin { ## Panel -Panels are a way to section data, and make it collapsible. They are often used in sidebars. Just give the Panel a heading and some content and it makes sure that it displays in the same style as the rest of Sonar. +Panels are a way to section data, and make it collapsible. They are often used in sidebars. Just give the Panel a heading and some content and it makes sure that it displays in the same style as the rest of Flipper. ```javascript import { diff --git a/docs/unterstanding-sonar.md b/docs/unterstanding-sonar.md index 36af832b4..c8e2244d5 100644 --- a/docs/unterstanding-sonar.md +++ b/docs/unterstanding-sonar.md @@ -1,13 +1,13 @@ --- id: understand -title: Understanding Sonar -sidebar_label: Understanding Sonar +title: Understanding Flipper +sidebar_label: Understanding Flipper --- -The Sonar desktop app and the mobile native SDK establish an [rsocket](http://rsocket.io) connection which is used to send data to and from the device. Sonar does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop. +The Flipper desktop app and the mobile native SDK establish an [rsocket](http://rsocket.io) connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop. ## Plugins -Sonar itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Sonar with a couple of built-in all-purpose plugins, but we encourage you to build your own. +Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [create a plugin](create-plugin.md). The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.