search

iluwatar / java-design-patterns

Design patterns implemented in Java
https://java-design-patterns.com
Other
90.06k stars 26.61k forks source link

Microservice pattern: Client-side UI composition #2698

Open iluwatar opened 1 year ago

iluwatar commented 1 year ago

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:

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 commented 10 months ago

Can i work on this . Please assign it to me

kavitha186 commented 8 months ago

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

iluwatar commented 8 months ago

Yes, that should be fine

stale[bot] commented 6 months ago

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 commented 1 month ago

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 commented 1 month ago

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

TarunVishwakarma1 commented 1 month ago

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