Skip to Content
UI ProtocolAppShellData Sharing

Data Sharing

Learn how to share data with micro frontend applications.

AppShell’s data sharing feature allows you to share your main applications data with other micro frontend applications.It provides a flexible and straightforward API to share data effectively, ensuring that each component within your ecosystem can work with application data easily. Data you share with micro applications is read-only. It can’t be modified by clients.

Overview

Data sharing within the AppShell is facilitated through a combination of React context and the Framebus library for cross-origin communication. This setup ensures that even micro frontends running in isolated iframes can receive shared data without any problems.

Distributing Shared Data

The AppShellProvider component is responsible for initializing and managing shared data. It uses the React context to hold the application’s state, including the shared data that needs to be accessible by micro frontends.

Initialization and Update Flow

  1. Initialization: Upon loading, AppShellProvider initializes the shared data, which can include user preferences, application settings, and other relevant state data.
  2. Update Flow: When shared data needs to be updated, AppShellProvider modifies the context state. This update is then propagated to all micro frontends that are subscribed to the context, ensuring they always have access to the latest data.

Usage

To share your application’s state with micro-applications, utilize the AppShellProvider component. This component takes a data prop, which is an object containing the state data to be shared.

import { AppShellProvider, type ApplicationData } from '@akinon/app-shell';
 
const App = () => {
  const data: ApplicationData = { user: 'Jane Doe', theme: 'dark' }; // Shared data
 
  return (
    <AppShellProvider
      apps={...}
      data={data}
      navigation={...}
      actions={...}
    >
      {/* Your application components go here */}
    </AppShellProvider>
  );
};
 
export default App;

Type

/**
 * A flexible data structure for storing application-wide shared
  data. This type is used to hold and distribute shared data across micro
  frontends, such as user preferences or session information.
 */
interface ApplicationData {
  [key: string]: any;
}

Best Practices for Data Sharing

  1. Selective data sharing

While AppShell allows for data sharing between the main application and micro-applications, it is essential to adopt a selective approach:

💡

Best Practice Alert: Avoid sharing the entire application state with micro-applications. Share only the necessary data that is vital for the micro-application’s functionality.

This practice not only enhances performance but also maintains data integrity and security across your application.

  1. Avoiding Data Duplication:

When sharing data with micro-applications, it is crucial to avoid data duplication. This means that do not hold the shared data in your micro application’s state. Instead, always refer to the shared data from the AppShell’s state.

  1. Only serialize-able data can be shared:

Only serialize-able data can be shared with micro-applications. This means that you cannot share functions, classes, or any other non-serialize-able data with micro-applications.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm 

Micro AppsActions