Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closes #139 #168

Merged
merged 3 commits into from
Dec 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 4
---

# Building Your Application
Expand Down
21 changes: 7 additions & 14 deletions docs/developer-documentation/concepts/concepts.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
---
sidebar_position: 1
sidebar_position: 2
---

# Concepts

We often find ourselves building applications that serve users in a variety of settings - from busy ports to remote fishing grounds. One group is commercial fishermen, tasked with harvesting and processing fish for quality and quantity. Their work takes them into the open sea, where internet connectivity can be unreliable or even non-existent.
RADFish developers build applications that serve users in a variety of settings. Many of our users are commercial fishermen who harvest and process fish. Their work takes them to busy ports and the open sea, where internet connectivity can be unreliable or even non-existent.

Imagine being a commercial fisherman on a vessel, sorting through catch and recording weights and species for quality control while waiting for critical data to sync with offices back on land.
Imagine being a commercial fisherman on a vessel in a remote area. You must sort through catch and record weights and species. You need your data to sync with offices back on land. You may have limited storage space on your devices.

**What does offline-first mean?**
Modern users expect apps to be responsive and reliable, even with limited internet connectivity. This is especially true for professionals such as commercial fishers. These users often operate in remote areas with unstable network access. To meet these expectations, developers can implement on-device storage to enable offline functionality. This increases user satisfaction and also ensures that critical tasks can be performed without interruption.

Offline-first is an approach to building web applications that prioritize functionality even without internet connectivity. This means designing the app to store data locally (on-device), so users can continue interacting with it seamlessly, even when out of range of a stable network.
Designing apps for these users present unique challenges. To meet these challenges, RADFish developers should be familiar with several concepts:

With Offline-First, your application:

1. **Stores data locally**: When the user interacts with the app, data is cached on the device, allowing for continued functionality offline.
2. **Synchronizes data automatically**: As soon as internet connectivity returns, the app synchronizes any pending changes with remote servers.
3. **Provides a seamless experience**: No matter whether online or offline, your users enjoy an uninterrupted experience.

**Service Workers: The Key to Offline-First**

To achieve offline-first functionality, developers use Service Workers - scripts that run in the background of web applications, allowing for network requests and data caching without requiring user interaction. By leveraging Service Workers, you can build robust and resilient web applications that remain functional even when faced with internet connectivity issues.
* [Offline-First](https://nmfs-radfish.github.io/radfish/developer-documentation/concepts/offline-first) design prioritizes functionalatity even without internet connectivity.
* [On-Device Storage](https://nmfs-radfish.github.io/radfish/developer-documentation/concepts/on-device-storage) is storing data directly on a user's device, without relying on internet connectivity.
16 changes: 16 additions & 0 deletions docs/developer-documentation/concepts/offline-first.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
sidebar_position: 2
---
#Offline-First

Offline-first design prioritizes web app functionality even without internet connectivity. This means building the app so users can interact with it uninterrupted, even without a stable network.

With offline-first, your application:

- **Stores data locally.** When the user interacts with the app, data is cached on the device.
- **Synchronizes data automatically.** When internet connectivity returns, the app synchronizes any pending changes with remote servers.
- **Provides a seamless experience.** Whether they're online or offline, users enjoy an uninterrupted experience.

##Service Workers: The Key to Offline-First

To achieve offline-first functionality, developers use Service Workers. Service Workers are scripts that run in the background of web applications. They allow network requests and data caching without requiring user interaction. Service Workers help build web applications that function even with internet connectivity issues.
57 changes: 26 additions & 31 deletions docs/developer-documentation/concepts/on-device-storage.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,50 @@
---
sidebar_position: 1
sidebar_position: 3
---

# On-Device Storage
In today's world, users expect web applications to be responsive and reliable, even in situations where internet connectivity is limited or unavailable. This is especially true for professionals such as commercial fishers, who often operate in remote areas with unstable network access. To meet these expectations, developers can implement effective on-device storage strategies that enable offline functionality.
On-device storage is the practice of storing data directly on a user's device, allowing web applications to function independently of network connectivity. This approach is critical for several reasons:

## The Importance of On-Device Storage
- **Uninterrupted User Experience.** Users can use the application without disruption, regardless of their connectivity status.
- **Data Availability.** Essential data remains accessible. Users can perform tasks and access information when they need it most.
- **Improved Performance.** Faster data retrieval and smoother performance by reducing network requests.

On-device storage is the practice of storing data directly on a user's device, allowing web applications to function independently of network connectivity. This approach is critical for several reasons:
## Implementing On-Device Storage in your application

- **Uninterrupted User Experience:** Users can continue to interact with the application without any disruptions, regardless of their connectivity status.
- **Data Availability:** Essential data remains accessible, enabling users to perform tasks and access information when they need it most.
- **Improved Performance:** By reducing the reliance on network requests, on-device storage can lead to faster data retrieval and smoother application performance.
When integrating on-device storage into your application, consider these best practices:

- **Determine Data Requirements.** Assess the types and volumes of data your application needs to store. Choose the storage mechanism that best fits these requirements.
- **Plan for Synchronization.** Make sure your application can synchronize data with remote servers when connectivity is restored. This includes handling potential conflicts and ensuring data consistency.
- **Optimize for Performance.** Use asynchronous operations where possible to avoid blocking the main thread and degrading the user experience.
- **Ensure Data Security.** Implement appropriate security measures to protect stored data, including encryption and secure access controls.

## Types of On-Device Storage

There are various on-device storage mechanisms available in modern web development, each suited to different types of data and use cases. Two prominent options are LocalStorage and IndexedDB.
There are various on-device storage mechanisms available in modern web development. Each is best for different types of data and use cases. Two prominent options are **LocalStorage** and **IndexedDB**.

### LocalStorage

LocalStorage is a simple and synchronous storage system built into web browsers. It allows for the storage of key-value pairs and is designed to persist data even after the browser is closed. This makes LocalStorage a convenient choice for storing small amounts of data, such as user preferences, session information, or basic application state.
LocalStorage is a simple and synchronous storage system built into web browsers. It stores key-value pairs and is designed to persist data even after the browser is closed. LocalStorage is good for storing small amounts of data, such as user preferences, session information, or basic application state.

#### Benefits of LocalStorage:

- **Simplicity:** The API is easy to use, making it accessible for quick implementation.
Persistence: Data remains available across sessions, ensuring continuity.
Wide Browser Support: LocalStorage is supported by all major browsers, ensuring broad compatibility.
Limitations of LocalStorage:
- **Simplicity.** The API is easy to use, for quick implementation.
- **Persistence.** Data remains available across sessions, ensuring continuity.
- **Wide Browser Support.** LocalStorage is supported by all major browsers, ensuring broad compatibility.

#### Limitations of LocalStorage:

- **Storage Capacity:** Typically limited to around 5MB, which may not be sufficient for all applications.
String-Only Storage: Only string data types can be stored, necessitating the serialization of more complex data structures.
Synchronous Nature: Operations are blocking, which can impact performance for larger datasets.
- **Storage Capacity.** Typically limited to around 5MB, which may not be sufficient for all applications.
- **String-Only Storage.** Only string data types can be stored. More complex data structures need serialization.
- **Synchronous Nature.** Operations are blocking, which can impact performance for larger datasets.

### IndexedDB

For more complex and large-scale storage needs, IndexedDB is a powerful alternative. IndexedDB is an asynchronous, low-level API designed to store significant amounts of structured data, including files and blobs. It supports transactions, allowing for reliable data handling and advanced querying capabilities.

### Benefits of IndexedDB:

- **Large Storage Capacity:** Capable of storing much larger datasets compared to LocalStorage.
- **Complex Data Structures:** Supports a variety of data types, including objects and arrays, without requiring serialization.
- **Asynchronous Operations:** Non-blocking operations enhance performance, especially with large volumes of data.
Advanced Querying: Provides robust indexing and querying capabilities for efficient data retrieval.

### Implementing On-Device Storage in your application

When integrating on-device storage into your application, consider the following best practices:

- **Determine Data Requirements:** Assess the types and volumes of data your application needs to store. Choose the storage mechanism that best fits these requirements.
- **Plan for Synchronization:** Ensure that your application can seamlessly synchronize data with remote servers when connectivity is restored. This includes handling potential conflicts and ensuring data consistency.
- **Optimize for Performance:** Use asynchronous operations where possible to avoid blocking the main thread and degrading the user experience.
- **Ensure Data Security:** Implement appropriate security measures to protect stored data, including encryption and secure access controls.

By leveraging on-device storage effectively, developers can create robust web applications that provide a seamless and reliable user experience, regardless of network conditions. This not only enhances user satisfaction but also ensures that critical tasks can be performed without interruption, whether on a remote fishing vessel or in any other challenging environment.
- **Large Storage Capacity.** Capable of storing much larger datasets compared to LocalStorage.
- **Complex Data Structures.** Supports a variety of data types, including objects and arrays, without requiring serialization.
- **Asynchronous Operations.** Non-blocking operations enhance performance, especially with large volumes of data.
- **Advanced Querying.** Provides robust indexing and querying capabilities for efficient data retrieval.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 2
sidebar_position: 3
---

# Examples and Templates
Expand Down
4 changes: 3 additions & 1 deletion docs/developer-documentation/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,14 @@ npx @nmfs-radfish/create-radfish-app --help
npm test
```
Please visit [upgrading](./upgrading.md) for more information.
# Scripts

## Scripts

**`npm start`**

This script starts the Vite development server. It runs the app locally with hot module reloading, allowing for fast development and instant updates as you make changes. Open [http://localhost:3000](http://localhost:3000/) to view it in the browser.

See [Available Scripts](./building-your-application/available-scripts) for full list of commands.

## Next steps
Now that you are up and running, see the [Components & Usage](./building-your-application/patterns/components.md) section to start building out your first pages!
2 changes: 1 addition & 1 deletion docs/developer-documentation/libraries/index.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 4
sidebar_position: 5
---

# Libraries
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 5
sidebar_position: 6
---

# RADFish Technical Decision Log
Expand Down
2 changes: 1 addition & 1 deletion docs/developer-documentation/upgrading.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 5
sidebar_position: 7
---

# Upgrading
Expand Down
Loading