microservices-client-side-ui-composition/README.md
Compose user interface from independently deployable microservices on the client side for greater flexibility and decoupling.
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
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.
Sequence diagram
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 Implementationpublic class ApiGateway {
private final Map<String, FrontendComponent> routes = new HashMap<>();
public void registerRoute(String path, FrontendComponent component) {
routes.put(path, component);
}
public String handleRequest(String path, Map<String, String> params) {
if (routes.containsKey(path)) {
return routes.get(path).fetchData(params);
} else {
return "404 Not Found";
}
}
}
FrontendComponent Interfacepublic interface FrontendComponent {
String fetchData(Map<String, String> params);
}
public class ProductComponent implements FrontendComponent {
@Override
public String fetchData(Map<String, String> params) {
return "Displaying Products: " + params.getOrDefault("category", "all");
}
}
public class CartComponent implements FrontendComponent {
@Override
public String fetchData(Map<String, String> params) {
return "Displaying Cart for User: " + params.getOrDefault("userId", "unknown");
}
}
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.
Benefits:
Trade-offs: