AppShell

In this section, we’ll explain core concepts, functionalities, and significance of AppShell within the UI Protocol framework.

What is AppShell?

AppShell, a core component of the UI Protocol. It acts as a dynamic container within main applications, facilitating seamless interaction between micro and main frontend applications. AppShell is designed to handle functionalities like data sharing, user actions, and managing application state.

Key Functions

• Data Management: AppShell efficiently handles data flow between main and micro applications, including state management and real-time updates.
• User Interaction: It processes user actions within micro applications, ensuring that these actions are properly communicated to and reflected in the main application.
• Seamless Integration: AppShell makes it possible for micro applications to appear and operate as natural extensions of the main applications, enhancing the overall user experience.

How AppShell Works

AppShell operates by embedding itself within the main application, creating an environment where micro applications can be loaded, usually through iframes. It then establishes communication channels, using the postMessage API, between the micro and main applications. This setup allows for the efficient exchange of information and actions, maintaining a consistent state across different parts of the application.

We use the framebus  library, which allows you to easily send messages with a simple bus that runs between iframes.

Installation

AppShell is available as an NPM package published at @akinon/app-shell, which can be installed using the following command:

pnpm install @akinon/app-shell

For AppShell to work properly, it must be embedded within the main application. This can be done by wrapping your application components with the AppShellProvider component, which is exported from the @akinon/app-shell package.

import { AppShellProvider } from '@akinon/app-shell';
 
const App = () => {
  return (
    <AppShellProvider
      apps={yourMicroApps}
      navigation={yourNavigationObject}
      data={yourDataObject}
      actions={yourActionsObject}
    >
      {/* Your application components go here */}
    </AppShellProvider>
  );
};

AppShellProvider Props

• apps: The list of registered micro frontend applications.
• navigation: Navigation helper functions.
• data: Optional. Shared data available to all micro frontends.
• actions: Optional. Default actions that can be invoked by micro frontends.

For the detail of properties that can be passed to AppShellProvider, please refer to the API Reference page.