ios.mdx (Creating Plugins - Building an iOS Plugin)

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

Reviewed By: aigoncharov

Differential Revision: D36377198

fbshipit-source-id: 99179c9c8132be51e13d9f8ab7d9f84f35b601bf

docs/tutorial/ios.mdx

@@ -6,33 +6,34 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 <img alt="iOS Tutorial App" src={useBaseUrl("img/ios-tutorial-app.png")} />
 
-For the purpose of the tutorial, we will assume you already have an existing iOS application in
-which you have a feed or list of items. As the Flipper team, we obviously concern ourselves mostly
-with sea mammals, so this is what our app displays. The actual display logic is not what's interesting
-here, but how we can make this data available in our Flipper desktop app.
+For the purpose of the tutorial, it's assumed you already have an existing iOS application in which you have a feed or list of items.
 
-You can find the source code of the project [on GitHub](https://github.com/facebook/flipper/tree/c55bebd1be545c63dde93e143dd5c341dc2fd20b/iOS/Tutorial/Tutorial).
+Part of what makes Flipper so useful is allowing users to inspect the internals of their app. This part of the tutorial is concerned with how to make data available to the Flipper desktop app, which, for the sake of this tutorial, is called 'Sea-mammals' (an app based on sea mammals).
 
-## Creating a Plugin
+:::note
+You can find the source code for this tutorial on [GitHub](https://github.com/facebook/flipper/tree/c55bebd1be545c63dde93e143dd5c341dc2fd20b/iOS/Tutorial/Tutorial).
+:::
+
+## Creating a plugin
 
 <FbInternalOnly>
+
 <div class="warning">
-[FB-Only] Depending the options selected during scaffolding (see intro), some of the following code might already have been generated by `scarf`. 
+[FB-Only] Depending on the options selected during scaffolding (see the [introduction](intro.mdx) page), some of the following code might already have been generated by `scarf`.
 </div>
+
 </FbInternalOnly>
 
-On iOS, a Flipper plugin is a class that implements the
-[`FlipperPlugin`](https://github.com/facebook/flipper/blob/main/iOS/FlipperKit/FlipperPlugin.h)
-interface.
+On iOS, a Flipper plugin is a class that implements the [FlipperPlugin](https://github.com/facebook/flipper/blob/main/iOS/FlipperKit/FlipperPlugin.h) interface.
 
-The interface is rather small and only comprises four methods:
+The interface consists of four methods:
 
-- `(NSString *)identifier`: Specify a unique string so the JavaScript side knows where to talk to. This must match the name attribute in the `package.json` we will look into later in this tutorial.
-- `(void)didConnect:(id<FlipperConnection>)connection`: This method is called when the desktop client connects and is ready to receive or send data.
-- `(void)didDisconnect`: We're sure you can figure this one out.
-- `(BOOL)runInBackground`: Unless this is true, only the currently selected plugin in the Flipper UI can communicate with the device. Its an optional method which you can override. Default value used is `false`.
+* `(NSString *)identifier` - specify a unique string so the JavaScript side knows where to talk to. This must match the name attribute in the `package.json`, which is examined later in the tutorial.
+* `(void)didConnect:(id<FlipperConnection>)connection` - this method is called when the desktop client connects and is ready to receive or send data.
+* `(void)didDisconnect` - sets connection to nil.
+* `(BOOL)runInBackground` - unless this is true, only the currently selected plugin in the Flipper UI can communicate with the device. Its an optional method which you can override. The default value used is `false`.
 
-Let's implement these methods for our sealife app:
+The following code shows the implementation of these methods for the Sea-mammals app:
 
 ```swift
 import Foundation
@@ -47,7 +48,7 @@ class SeaMammalsPlugin: NSObject, FlipperPlugin {
   }
 
   func identifier() -> String! {
-    return "sea-mammals"
+    return "Sea-mammals"
   }
 
   func didConnect(_ connection: FlipperConnection!) {
@@ -63,20 +64,17 @@ class SeaMammalsPlugin: NSObject, FlipperPlugin {
 }
 ```
 
-The two interesting bits here are `didConnect` and `connection.send`. `connection.send` sends a message
-to the desktop app and is identified with the name "newRow".
+There are two items of interest here: `didConnect` and `connection.send`, which sends a message to the desktop app and is identified with the name `newRow`.
 
-For our sample app, we're dealing with a static data source. However, in real
-life, you will likely dynamically receive new data as the user interacts with
-the app. So while we just send all the data we have at once in `didConnect`,
-you would normally set up a listener here to instead call `connection.send("newRow", params)` as new data
-arrives. `params` are nothing but a dictionary which contains the data which you want to send over the wire to the desktop app.
+For the Sea-mammals app, there is a static data source. However, in real life, you'll likely dynamically receive new data as the user interacts with the app. So, while in the Sea-mammals app, the data is sent all at once with `didConnect`, in real life, you'd set up a listener to call `connection.send("newRow", params)` as the dynamic data arrives.
 
-## Registering your Plugin
+:::note
+In the above code, the `withParams` are just dictionary that contains the data that Sea-mammals sends over the wire to the desktop app.
+:::
 
-Now all you need to do is let Flipper know about your new plugin. You do this
-by calling `add` on your `FlipperClient`, which is normally created
-at application startup.
+## Registering your plugin
+
+Now all you need to do is let Flipper know about your new plugin. You do this by calling `add` on your `FlipperClient`, which is normally created at application startup:
 
 ```swift
 let client = FlipperClient.shared()
@@ -85,8 +83,7 @@ client?.add(SeaMammalsPlugin(MarineMammal.defaultList))
 client?.start()
 ```
 
-## What next
+## Next step
 
-When starting your application now, Flipper will tell the desktop application
-about the plugin it supports, including "sea-mammals" and will look for a
-corresponding JavaScript plugin by that name. Before building it's JavaScript counterpart, first lets build a Flipper Plugin in Android.
+When starting your application, Flipper tells the desktop application about the plugin it supports (including 'Sea-mammals'), looks for a corresponding JavaScript plugin by that name.
+Before building it's JavaScript counterpart, the next step in the tutorial is [Building a Plugin in Android](android.mdx).