Microservice pattern: Client-side UI composition

[iluwatar]

Description:

The Client-Side UI Composition pattern is a design strategy used in microservices architectures to assemble the user interface on the client side. This pattern is particularly useful in complex applications where the UI is composed of multiple components, each served by different microservices. The key elements of this pattern include:

1. Micro Frontends: Each UI component is developed and deployed independently, often by different teams, ensuring modularity and flexibility.
2. API Gateway: Serves as a single entry point for the client, routing requests to the appropriate microservice.
3. Integration Layer: Manages the integration of various UI components into a cohesive user experience on the client side.
4. Asynchronous Data Fetching: Each component fetches its data asynchronously, often using techniques like AJAX or WebSockets.

References:

• Client-Side UI Composition pattern
• Project Contribution Guidelines
• Micro Frontends Architecture
• API Gateway Pattern
• Asynchronous JavaScript: AJAX and Fetch API

Acceptance Criteria:

1. Micro Frontends Implementation:

   • Create multiple independent frontend modules.
   • Ensure each module can be developed, tested, and deployed independently.

2. API Gateway Configuration:

   • Implement an API Gateway that routes client requests to the appropriate microservice.
   • Ensure secure and efficient routing.

3. Client-Side Integration Layer:

   • Develop an integration layer that dynamically assembles the UI components on the client side.
   • Ensure seamless communication between components.

4. Asynchronous Data Fetching:

   • Implement asynchronous data fetching for each UI component.
   • Ensure data is fetched and displayed in a non-blocking manner to enhance user experience.

5. Documentation and Testing:

   • Provide detailed documentation on how to set up and use the Client-Side UI Composition pattern.
   • Write comprehensive tests to ensure the integrity and functionality of the integrated UI.

[kavitha186]

Can i work on this . Please assign it to me

[kavitha186]

@iluwatar I'm using American Express One app framework and going to build a holocron module. Is that fine?

[iluwatar]

Yes, that should be fine

[stale]

This issue has been automatically marked as stale because it has not had recent activity. The issue will be unassigned if no further activity occurs. Thank you for your contributions.

[TarunVishwakarma1]

Hi There, I want to work on this, should I create a new project named - client-side-ui-composition ?
I didn't find any related code file for this in the current repo, So I'm guessing that new project has to be made.

Please guide me if I'm wrong or any particular idea you have in mind.

[iluwatar]

Yes, for the submodule name I would propose microservices-client-side-ui-composition.

[TarunVishwakarma1]

Sure, I'll get started right now. A little request can you add hacktober fest lable to this. Thanks.