docs: Improve developer documentation (#88)

* docs: Add persistent store section heading

* docs: Document interaction frontend<->backend

* docs: Mention Element Plus component library

1 files changed, 63 insertions, 0 deletions

diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index a003aa89..c6e8301e 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -60,6 +60,69 @@ Note that you can adjust the behaviour of Tauri windows in `tauri.conf.json`, e.
 
 ## Docs
 
+### Frontend styling
+
+For Vue components FlightCore uses the [Element Plus](https://element-plus.org/) library. A list of available components can be found [here](https://element-plus.org/en-US/component/button.html).
+
+### Interacting between frontend and backend
+
+The main way the frontend calls the backend is via the `invoke()` function provided by Tauri.
+
+So assuming you have a backend function
+
+```Rust
+fn my_func(some_string: String, some_int: u32) {}
+```
+
+You can call it from the frontend with:
+
+```Typescript
+await invoke("my_func", { someString: "Hello, World!", someInt: random_int })
+```
+
+Note the change between `snake_case` and `camelCase` in the function argument names. This is imposed by Tauri.
+
+For returning values after the function call using the `Result<T, E>` type in Rust is recommended.
+
+This means you'll have a function
+
+```Rust
+fn other_func() -> Result<u32, String> {}
+```
+
+which returns `Result<u32, String>`
+
+Now in the frontend when calling it you can for example
+
+```Typescript
+await invoke("other_func")
+  .then((message) => {
+    // Success
+    console.log(`Call returned: ${message}`)
+  })
+  .catch((error) => {
+    // Error
+    console.log(error)
+  });
+```
+
+but also
+
+```Typescript
+// Store return in `result` on success
+let result = await invoke("other_func")
+  .catch((error) => {
+    // Error
+    console.log(error)
+  });
+```
+
+For more info, see the Tauri docs: https://tauri.app/v1/guides/features/command/
+
+For periodic calls between backend and frontend you can use events. See the Tauri docs here: https://tauri.app/v1/guides/features/events/
+
+### Persistent store
+
 In regards to storing persistent data, FlightCore uses [`tauri-plugin-store`](https://github.com/tauri-apps/tauri-plugin-store). It's a key-value store accessed in frontend to load and store small amounts of data.
 
 The goal is to store as little data in there as possible and instead get the necessary info on app launch.