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 {
  searchParams?: Record<string, string>;
  shellBaseUrl?: string;
  [key: string]: any;
}

The shellBaseUrl key

shellBaseUrl is the one key the AppShell contributes by itself. Each micro frontend receives a copy of your data with the absolute base url of the shell added to it, so a client can turn its own paths into urls that live on the shell rather than inside the iframe — that is what makes a link openable in a new browser tab.

The value comes from the optional resolveUrl callback on the navigation prop, which the shell calls on every emit of the shared data: at the handshake of each app, for each rich-modal iframe, and again for every app whenever the data you pass changes. Implement it as described in Navigation.

⚠️

If you implement no resolveUrl, or it yields nothing, shellBaseUrl is left out of the emitted data altogether. The AppShell never falls back to the page origin: a base url guessed from the wrong origin would send users to a url that does not exist, which is worse than no link at all.

Because the value is per app, the object each micro frontend receives is not the object you passed as data — do not rely on identity between them.

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