mirror of
https://github.com/tiennm99/java-design-patterns.git
synced 2026-05-14 06:58:54 +00:00
docs: update client-side ui composition
This commit is contained in:
Ilkka Seppälä
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Microservices API Gateway Pattern in Java: Simplifying Service Access with a Unified Endpoint"
|
||||
shortTitle: Microservice API Gateway
|
||||
shortTitle: Microservices API Gateway
|
||||
description: "Learn how the API Gateway pattern simplifies client-side development, enhances security, and optimizes communication in microservices architecture. Explore examples, benefits, and best practices."
|
||||
category: Integration
|
||||
language: en
|
||||
|
||||
+1
@@ -45,6 +45,7 @@ public class ImageClientImpl implements ImageClient {
|
||||
*/
|
||||
@Override
|
||||
public String getImagePath() {
|
||||
|
||||
var httpClient = HttpClient.newHttpClient();
|
||||
var httpGet =
|
||||
HttpRequest.newBuilder().GET().uri(URI.create("http://localhost:50005/image-path")).build();
|
||||
|
||||
@@ -1,44 +1,53 @@
|
||||
---
|
||||
title: "Client-Side UI Composition Pattern: Assembling Modular UIs in Microservices Architecture"
|
||||
shortTitle: Client-Side UI Composition Pattern
|
||||
title: "Microservices Client-Side UI Composition Pattern In Java: Assembling Modular UIs in Microservices Architecture"
|
||||
shortTitle: Microservices Client-Side UI Composition
|
||||
description: "Learn how the Client-Side UI Composition pattern allows the assembly of modular UIs on the client side, enabling independent teams to develop, deploy, and scale UI components in a microservices architecture. Discover the benefits, implementation examples, and best practices."
|
||||
category: Structural
|
||||
category: Architectural
|
||||
language: en
|
||||
tag:
|
||||
- Asynchronous
|
||||
- Client-server
|
||||
- Cloud distributed
|
||||
- Composition
|
||||
- Decoupling
|
||||
- Integration
|
||||
- Microservices
|
||||
- Modularity
|
||||
- Scalability
|
||||
- Web development
|
||||
---
|
||||
|
||||
## **Intent of Client-Side UI Composition Design Pattern**
|
||||
## Intent of Client-Side UI Composition Design Pattern
|
||||
|
||||
The Client-Side UI Composition Pattern allows the assembly of UIs on the client side by composing independent UI components (Micro Frontends). Each component is developed, tested, and deployed independently by separate teams, ensuring flexibility and scalability in microservices architecture.
|
||||
Compose user interface from independently deployable microservices on the client side for greater flexibility and decoupling.
|
||||
|
||||
---
|
||||
## Also Known As
|
||||
|
||||
## **Also Known As**
|
||||
* UI Aggregator
|
||||
* Frontend-Driven Composition
|
||||
|
||||
- Micro Frontends
|
||||
- Modular UI Assembly
|
||||
- Client-Side Integration
|
||||
## Detailed Explanation of Client-Side UI Composition Pattern with Real-World Examples
|
||||
|
||||
---
|
||||
Real-world Example
|
||||
|
||||
## **Detailed Explanation of Client-Side UI Composition Pattern with Real-World Examples**
|
||||
|
||||
### **Real-world Example**
|
||||
> In a SaaS dashboard, a client-side composition pattern enables various independent modules like “Billing,” “Reports,” and “Account Settings” to be developed and deployed by separate teams. These modules are composed into a unified interface for the user, with each module independently fetching data from its respective microservice.
|
||||
|
||||
### **In Plain Words**
|
||||
In Plain Words
|
||||
|
||||
> The Client-Side UI Composition pattern breaks down the user interface into smaller, independent parts that can be developed, maintained, and scaled separately by different teams.
|
||||
|
||||
### **Wikipedia says**
|
||||
>UI composition refers to the practice of building a user interface from modular components, each responsible for fetching its own data and rendering its own content. This approach enables faster development cycles, easier maintenance, and better scalability in large systems.
|
||||
---
|
||||
Wikipedia says
|
||||
|
||||
## **Programmatic Example of Client-Side UI Composition in JavaScript**
|
||||
> UI composition refers to the practice of building a user interface from modular components, each responsible for fetching its own data and rendering its own content. This approach enables faster development cycles, easier maintenance, and better scalability in large systems.
|
||||
|
||||
In this example, an e-commerce platform composes its frontend by integrating three independent modules: **CartService**, **ProductService**, and **OrderService**. Each module is served by a microservice and fetched on the client side through an API Gateway.
|
||||
Sequence diagram
|
||||
|
||||
`ApiGateway` Implementation
|
||||
|
||||
|
||||
## Programmatic Example of Client-Side UI Composition in Java
|
||||
|
||||
This example composes an e-commerce frontend by integrating three independent modules. Each module is served by a microservice and fetched on the client side through an API Gateway.
|
||||
|
||||
### `ApiGateway` Implementation
|
||||
|
||||
```java
|
||||
public class ApiGateway {
|
||||
@@ -60,13 +69,16 @@ public class ApiGateway {
|
||||
|
||||
```
|
||||
|
||||
`FrontendComponent` Implementation
|
||||
### `FrontendComponent` Interface
|
||||
|
||||
```java
|
||||
public interface FrontendComponent {
|
||||
String fetchData(Map<String, String> params);
|
||||
}
|
||||
```
|
||||
## Example components
|
||||
|
||||
### Example Components
|
||||
|
||||
```java
|
||||
public class ProductComponent implements FrontendComponent {
|
||||
@Override
|
||||
@@ -82,50 +94,53 @@ public class CartComponent implements FrontendComponent {
|
||||
}
|
||||
}
|
||||
```
|
||||
This approach dynamically assembles different UI components based on the route provided in the client-side request. Each component fetches its data asynchronously and renders it within the main interface.
|
||||
|
||||
---
|
||||
This approach dynamically assembles UI components based on the route in the client-side request. Each component fetches its data asynchronously and renders it within the main interface.
|
||||
|
||||
## **When to Use the Client-Side UI Composition Pattern**
|
||||
## When to Use the Client-Side UI Composition Pattern
|
||||
|
||||
- When you have a microservices architecture where multiple teams develop different parts of the frontend.
|
||||
- When you need to scale and deploy different UI modules independently.
|
||||
- When you want to integrate multiple data sources or services into a cohesive frontend.
|
||||
* When each microservice must present its own UI components
|
||||
* When frequent independent deployments of UI features are required
|
||||
* When teams own end-to-end functionality, including front-end modules
|
||||
* When Java-based backends provide separate APIs for direct UI consumption
|
||||
|
||||
---
|
||||
|
||||
## **Client-Side UI Composition Pattern JavaScript Tutorials**
|
||||
## Client-Side UI Composition Pattern Tutorials
|
||||
|
||||
- [Micro Frontends in Action (O'Reilly)](https://www.oreilly.com/library/view/micro-frontends-in/9781617296873/)
|
||||
- [Micro Frontends with React (ThoughtWorks)](https://www.thoughtworks.com/insights/articles/building-micro-frontends-using-react)
|
||||
- [API Gateway in Microservices (Spring Cloud)](https://spring.io/guides/gs/gateway/)
|
||||
|
||||
---
|
||||
## Real-World Applications of Client-Side UI Composition Pattern in Java
|
||||
|
||||
## **Benefits and Trade-offs of Client-Side UI Composition Pattern**
|
||||
* Large-scale e-commerce portals with microservices powering modular pages
|
||||
* SaaS platforms requiring rapid iteration of front-end features
|
||||
* Java-based microservice architectures using frameworks like Spring Boot for modular UI components
|
||||
|
||||
### **Benefits**:
|
||||
- **Modularity**: Each UI component is independent and can be developed by separate teams.
|
||||
- **Scalability**: Micro Frontends allow for independent deployment and scaling of each component.
|
||||
- **Flexibility**: Teams can choose different technologies to build components, offering flexibility in development.
|
||||
- **Asynchronous Data Fetching**: Components can load data individually, improving performance.
|
||||
## Benefits and Trade-offs of Client-Side UI Composition Pattern
|
||||
|
||||
### **Trade-offs**:
|
||||
- **Increased Complexity**: Managing multiple micro frontends can increase overall system complexity.
|
||||
- **Client-Side Performance**: Depending on the number of micro frontends, it may introduce a performance overhead due to multiple asynchronous requests.
|
||||
- **Integration Overhead**: Client-side integration logic can become complex as the number of components grows.
|
||||
Benefits:
|
||||
|
||||
---
|
||||
* Facilitates independent deployment cycles for UI features
|
||||
* Reduces overall coupling and fosters autonomy among teams
|
||||
* Enables polyglot front-end development
|
||||
|
||||
## **Related Design Patterns**
|
||||
Trade-offs:
|
||||
|
||||
- [Microservices API Gateway Pattern](https://java-design-patterns.com/patterns/microservices-api-gateway/) – API Gateway serves as a routing mechanism for client-side UI requests.
|
||||
- [Backend for Frontend (BFF)](https://microservices.io/patterns/apigateway.html) – BFF pattern helps build custom backends for different UI experiences.
|
||||
* Increases client complexity for rendering and data aggregation
|
||||
* Can cause performance challenges with multiple service calls
|
||||
* Demands consistent UX guidelines across diverse microservices
|
||||
|
||||
---
|
||||
## Related Design Patterns
|
||||
|
||||
## **References and Credits**
|
||||
* Backend for Frontend (BFF): Provides custom endpoints for specific UIs
|
||||
* Micro Frontends: Splits the front-end into smaller, individually deployable fragments
|
||||
* [Microservices API Gateway Pattern](https://java-design-patterns.com/patterns/microservices-api-gateway/): API Gateway serves as a routing mechanism for client-side UI requests.
|
||||
|
||||
- [Micro Frontends Architecture (Microfrontends.org)](https://micro-frontends.org/)
|
||||
- [Building Microservices with Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)
|
||||
- [Client-Side UI Composition (Microservices.io)](https://microservices.io/patterns/client-side-ui-composition.html)
|
||||
## References and Credits
|
||||
|
||||
* [Building Microservices](https://amzn.to/3UACtrU)
|
||||
* [Building Microservices with Micro Frontends (Martin Fowler)](https://martinfowler.com/articles/micro-frontends.html)
|
||||
* [Client-Side UI Composition (Microservices.io)](https://microservices.io/patterns/client-side-ui-composition.html)
|
||||
* [Cloud Native Java: Designing Resilient Systems with Spring Boot, Spring Cloud, and Cloud Foundry](https://amzn.to/44vDTat)
|
||||
* [Micro Frontends Architecture (Microfrontends.org)](https://micro-frontends.org/)
|
||||
* [Microservices Patterns: With examples in Java](https://amzn.to/3UyWD5O)
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Reference in New Issue
Block a user