Overview

Introduction

The UI Protocol is at the heart of Akinon’s frontend architecture, designed to enhance communication and data exchange between micro and main frontend applications. This overview provides a clear understanding of the UI Protocol’s role, components, and benefits within the Akinon ecosystem, laying the groundwork for further exploration of its functionalities and implementation.

Components of the UI Protocol

AppShell and AppClient Libraries

The UI Protocol includes two primary libraries: AppShell and AppClient, which build on the postMessage API to meet the unique needs of our frontend applications.

AppShell

Located within the main applications, AppShell is crucial for managing data sharing, user actions, and other essential logic. It ensures that micro applications can integrate smoothly with the main applications, providing a unified user experience.

AppClient

AppClient allows micro applications to communicate effectively with AppShell, standardizing data exchange and user interactions across the application ecosystem.

Clarifying Main and Micro Frontend Applications

Main Applications

Main applications, such as Omnitron and Seller Center, are the primary user interfaces in the Akinon ecosystem, offering extensive functionalities. Main(host) applications integrate with @akinon/app-shell library to manage data sharing and user interactions with micro applications.

Micro Frontend Applications

Micro frontend applications, including Marketplace Dashboard and Integrator, are specialized tools designed for seamless integration into main applications, typically embedded via iframes.

There are 2 types of micro applications:

• fullpage: These applications are displayed as full pages within their main applications.
• plugin: These applications are embedded as plugin components within their main applications via pre-defined placeholders.

Fullpage Applications

Fullpage applications occupy the entire viewport and provide complete user interfaces inside the main applications. These applications function independently and are not confined to a specific section of a webpage. If your micro frontend is a fullpage application, you’ll need to integrate the @akinon/app-client library. Examples for this type of applications are Marketplace Dashboard or Integrator project.

Plugin Applications

Plugin applications, are smaller components or widgets that are embedded within a specific section of a webpage or application. They provide specific functionality or content within a larger context. If your micro frontend is a plugin application, you’ll also need to integrate the @akinon/app-client library.

Other Application Types

There are some frontend applications within Akinon ecosystem that are not considered as micro applications. These applications are not integrated with @akinon/app-client library and they are not embedded within main applications via iframes. Basically they are standalone applications.

Advantages of Using the UI Protocol

The UI Protocol provides several benefits:

• Modularity: Supports the development of modular applications, which simplifies maintenance and updates.
• Consistency: Maintains a consistent approach to data sharing and communication throughout the application ecosystem.
• Scalability: Enhances the integration of micro and main applications, improving the development workflow and speeding up project timelines.
• Security: Offers a secure method for data exchange and communication between applications.
• Simplicity: Reduces the complexity of integrating applications, easing the onboarding of new developers and maintenance of existing systems.