diff --git a/docs/developer-documentation/building-your-application/index.mdx b/docs/developer-documentation/building-your-application/index.mdx index bc4bada..c1853e7 100644 --- a/docs/developer-documentation/building-your-application/index.mdx +++ b/docs/developer-documentation/building-your-application/index.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 --- # Building Your Application diff --git a/docs/developer-documentation/concepts/concepts.md b/docs/developer-documentation/concepts/concepts.md index f3e714f..96b5b0d 100644 --- a/docs/developer-documentation/concepts/concepts.md +++ b/docs/developer-documentation/concepts/concepts.md @@ -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. \ No newline at end of file diff --git a/docs/developer-documentation/concepts/offline-first.md b/docs/developer-documentation/concepts/offline-first.md new file mode 100644 index 0000000..aa5b8c2 --- /dev/null +++ b/docs/developer-documentation/concepts/offline-first.md @@ -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. \ No newline at end of file diff --git a/docs/developer-documentation/concepts/on-device-storage.md b/docs/developer-documentation/concepts/on-device-storage.md index e393f9a..23a6522 100644 --- a/docs/developer-documentation/concepts/on-device-storage.md +++ b/docs/developer-documentation/concepts/on-device-storage.md @@ -1,36 +1,42 @@ --- -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 @@ -38,18 +44,7 @@ For more complex and large-scale storage needs, IndexedDB is a powerful alternat ### 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. \ No newline at end of file +- **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. diff --git a/docs/developer-documentation/examples-and-templates/examples-and-templates.md b/docs/developer-documentation/examples-and-templates/examples-and-templates.md index b8d8428..adbb9e6 100644 --- a/docs/developer-documentation/examples-and-templates/examples-and-templates.md +++ b/docs/developer-documentation/examples-and-templates/examples-and-templates.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- # Examples and Templates diff --git a/docs/developer-documentation/getting-started.md b/docs/developer-documentation/getting-started.md index 2f4d7d0..7c36cde 100644 --- a/docs/developer-documentation/getting-started.md +++ b/docs/developer-documentation/getting-started.md @@ -76,7 +76,8 @@ npx @nmfs-radfish/create-radfish-app --help npm test ``` Please visit [upgrading](./upgrading.md) for more information. -# Scripts + +## Scripts **`npm start`** @@ -84,4 +85,5 @@ This script starts the Vite development server. It runs the app locally with hot 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! diff --git a/docs/developer-documentation/libraries/index.mdx b/docs/developer-documentation/libraries/index.mdx index 4243581..21ec8b0 100644 --- a/docs/developer-documentation/libraries/index.mdx +++ b/docs/developer-documentation/libraries/index.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # Libraries diff --git a/docs/developer-documentation/technical-decision-log/index.mdx b/docs/developer-documentation/technical-decision-log/index.mdx index 19ce6c2..8c0c3f9 100644 --- a/docs/developer-documentation/technical-decision-log/index.mdx +++ b/docs/developer-documentation/technical-decision-log/index.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 --- # RADFish Technical Decision Log diff --git a/docs/developer-documentation/upgrading.md b/docs/developer-documentation/upgrading.md index ef723ac..9062354 100644 --- a/docs/developer-documentation/upgrading.md +++ b/docs/developer-documentation/upgrading.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 7 --- # Upgrading