From 17b8999aa632ee217a4f4452a628ae9d33251ac2 Mon Sep 17 00:00:00 2001 From: Tarun Vishwakarma Date: Sun, 13 Oct 2024 22:45:32 +0530 Subject: [PATCH 1/5] Added Microservices client side ui composition to the repo. Added ClientSideCompositionTest, ApiGateway, ClientSideIntegrator, FrontendComponent, CartFrontend, ProductFrontend, updated pom.xml, ReadME.md. --- .../ReadME.md | 143 ++++++++++++++++++ .../pom.xml | 63 ++++++++ .../clientsideuicomposition/ApiGateway.java | 48 ++++++ .../clientsideuicomposition/CartFrontend.java | 22 +++ .../ClientSideIntegrator.java | 37 +++++ .../FrontendComponent.java | 37 +++++ .../ProductFrontend.java | 22 +++ .../ClientSideCompositionTest.java | 46 ++++++ pom.xml | 1 + 9 files changed, 419 insertions(+) create mode 100644 microservices-client-side-ui-composition/ReadME.md create mode 100644 microservices-client-side-ui-composition/pom.xml create mode 100644 microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java create mode 100644 microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java create mode 100644 microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java create mode 100644 microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java create mode 100644 microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java create mode 100644 microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java diff --git a/microservices-client-side-ui-composition/ReadME.md b/microservices-client-side-ui-composition/ReadME.md new file mode 100644 index 000000000000..fd657c5564e9 --- /dev/null +++ b/microservices-client-side-ui-composition/ReadME.md @@ -0,0 +1,143 @@ + +# Client-Side UI Composition Pattern: Assembling Modular UIs in Microservices Architecture + +### **shortTitle**: 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**: User Interface + +### **Language**: JavaScript, HTML, CSS + +### **Tag**: +- Micro Frontends +- API Gateway +- Asynchronous Data Fetching +- UI Integration +- Microservices Architecture +- Scalability + +--- + +## **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. + +--- + +## **Also Known As** + +- Micro Frontends +- Modular UI Assembly +- Client-Side Integration + +--- + +## **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** +> 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. +--- + +## **Programmatic Example of Client-Side UI Composition in JavaScript** + +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. + +`ApiGateway` Implementation + +```java +public class ApiGateway { + + private final Map routes = new HashMap<>(); + + public void registerRoute(String path, FrontendComponent component) { + routes.put(path, component); + } + + public String handleRequest(String path, Map params) { + if (routes.containsKey(path)) { + return routes.get(path).fetchData(params); + } else { + return "404 Not Found"; + } + } +} + +``` + +`FrontendComponent` Implementation +```java +public interface FrontendComponent { + String fetchData(Map params); +} +``` +## Example components +```java +public class ProductComponent implements FrontendComponent { + @Override + public String fetchData(Map params) { + return "Displaying Products: " + params.getOrDefault("category", "all"); + } +} + +public class CartComponent implements FrontendComponent { + @Override + public String fetchData(Map params) { + return "Displaying Cart for User: " + params.getOrDefault("userId", "unknown"); + } +} +``` +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. + +--- + +## **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. + +--- + +## **Client-Side UI Composition Pattern JavaScript 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/) + +--- + +## **Benefits and Trade-offs of Client-Side UI Composition Pattern** + +### **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. + +### **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. + +--- + +## **Related Design Patterns** + +- [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. + +--- + +## **References and Credits** + +- [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) diff --git a/microservices-client-side-ui-composition/pom.xml b/microservices-client-side-ui-composition/pom.xml new file mode 100644 index 000000000000..4592483746b1 --- /dev/null +++ b/microservices-client-side-ui-composition/pom.xml @@ -0,0 +1,63 @@ + + + + + 4.0.0 + + com.iluwatar + java-design-patterns + 1.26.0-SNAPSHOT + + + microservices-client-side-ui-composition + + + + org.junit.jupiter + junit-jupiter-engine + test + + + + org.projectlombok + lombok + 1.18.34 + provided + + + + + + 23 + 23 + UTF-8 + + + \ No newline at end of file diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java new file mode 100644 index 000000000000..ea4592aac5ce --- /dev/null +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java @@ -0,0 +1,48 @@ +package com.iluwatar.clientsideuicomposition; + +import java.util.HashMap; +import java.util.Map; + +/** + * ApiGateway class acts as a dynamic routing mechanism that forwards client requests + * to the appropriate frontend components based on dynamically registered routes. + * + * This allows for flexible, runtime-defined routing without hardcoding specific paths. + */ +public class ApiGateway { + + // A map to store routes dynamically, where the key is the path and the value is the associated FrontendComponent + private final Map routes = new HashMap<>(); + + /** + * Registers a route dynamically at runtime. + * + * @param path the path to access the component (e.g., "/products") + * @param component the frontend component to be accessed at the given path + */ + public void registerRoute(String path, FrontendComponent component) { + routes.put(path, component); + } + + /** + * Handles a client request by routing it to the appropriate frontend component. + * + * This method dynamically handles parameters passed with the request, which + * allows the frontend components to respond based on those parameters. + * + * @param path the path for which the request is made (e.g., "/products", "/cart") + * @param params a map of parameters that might influence the data fetching logic + * (e.g., filters, userId, categories, etc.) + * @return the data fetched from the appropriate component or "404 Not Found" + * if the path is not registered + */ + public String handleRequest(String path, Map params) { + if (routes.containsKey(path)) { + // Fetch data dynamically based on the provided parameters + return routes.get(path).fetchData(params); + } else { + // Return a 404 error if the path is not registered + return "404 Not Found"; + } + } +} diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java new file mode 100644 index 000000000000..db2a01fb215d --- /dev/null +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java @@ -0,0 +1,22 @@ +package com.iluwatar.clientsideuicomposition; + +import java.util.Map; + +/** + * CartFrontend is a concrete implementation of FrontendComponent + * that simulates fetching shopping cart data based on the user. + */ +public class CartFrontend extends FrontendComponent { + + /** + * Fetches the current state of the shopping cart based on dynamic parameters like user ID. + * + * @param params parameters that influence the cart data, e.g., "userId" + * @return a string representing the items in the shopping cart for a given user + */ + @Override + protected String getData(Map params) { + String userId = params.getOrDefault("userId", "anonymous"); + return "Shopping Cart for user '" + userId + "': [Item 1, Item 2]"; + } +} diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java new file mode 100644 index 000000000000..08e3ff5f77c6 --- /dev/null +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java @@ -0,0 +1,37 @@ +package com.iluwatar.clientsideuicomposition; + +import lombok.extern.slf4j.Slf4j; +import java.util.Map; + +/** + * ClientSideIntegrator class simulates the client-side integration layer that + * dynamically assembles various frontend components into a cohesive user interface. + */ +@Slf4j +public class ClientSideIntegrator { + + private final ApiGateway apiGateway; + + /** + * Constructor that accepts an instance of ApiGateway to handle dynamic routing. + * + * @param apiGateway the gateway that routes requests to different frontend components + */ + public ClientSideIntegrator(ApiGateway apiGateway) { + this.apiGateway = apiGateway; + } + + /** + * Composes the user interface dynamically by fetching data from different frontend components + * based on provided parameters. + * + * @param path the route of the frontend component + * @param params a map of dynamic parameters to influence the data fetching + */ + public void composeUI(String path, Map params) { + // Fetch data dynamically based on the route and parameters + String data = apiGateway.handleRequest(path, params); + LOGGER.info("Composed UI Component for path '{}':", path); + LOGGER.info(data); + } +} diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java new file mode 100644 index 000000000000..17abc01eeb7d --- /dev/null +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java @@ -0,0 +1,37 @@ +package com.iluwatar.clientsideuicomposition; + +import java.util.Map; +import java.util.Random; + +/** + * FrontendComponent is an abstract class representing an independent frontend + * component that fetches data dynamically based on the provided parameters. + */ +public abstract class FrontendComponent { + + /** + * Simulates asynchronous data fetching by introducing a random delay and + * then fetching the data based on dynamic input. + * + * @param params a map of parameters that may affect the data fetching logic + * @return the data fetched by the frontend component + */ + public String fetchData(Map params) { + try { + // Simulate delay in fetching data (e.g., network latency) + Thread.sleep(new Random().nextInt(1000)); + } catch (InterruptedException e) { + Thread.currentThread().interrupt(); + } + // Fetch and return the data based on the given parameters + return getData(params); + } + + /** + * Abstract method to be implemented by subclasses to return data based on parameters. + * + * @param params a map of parameters that may affect the data fetching logic + * @return the data for this specific component + */ + protected abstract String getData(Map params); +} diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java new file mode 100644 index 000000000000..6cb5ee9ec53a --- /dev/null +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java @@ -0,0 +1,22 @@ +package com.iluwatar.clientsideuicomposition; + +import java.util.Map; + +/** + * ProductFrontend is a concrete implementation of FrontendComponent + * that simulates fetching dynamic product data. + */ +public class ProductFrontend extends FrontendComponent { + + /** + * Fetches a list of products based on dynamic parameters such as category. + * + * @param params parameters that influence the data fetched, e.g., "category" + * @return a string representing a filtered list of products + */ + @Override + protected String getData(Map params) { + String category = params.getOrDefault("category", "all"); + return "Product List for category '" + category + "': [Product 1, Product 2, Product 3]"; + } +} diff --git a/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java b/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java new file mode 100644 index 000000000000..f339cbd71b27 --- /dev/null +++ b/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java @@ -0,0 +1,46 @@ +package com.iluwatar.clientsideuicomposition; + +import org.junit.jupiter.api.Test; + +import java.util.HashMap; +import java.util.Map; + +import static org.junit.jupiter.api.Assertions.assertTrue; + +/** + * ClientSideCompositionTest contains unit tests to validate dynamic route registration and UI composition. + */ +class ClientSideCompositionTest { + + /** + * Tests dynamic registration of frontend components and dynamic composition of UI. + */ + @Test + void testClientSideUIComposition() { + // Create API Gateway and dynamically register frontend components + ApiGateway apiGateway = new ApiGateway(); + apiGateway.registerRoute("/products", new ProductFrontend()); + apiGateway.registerRoute("/cart", new CartFrontend()); + + // Create the Client-Side Integrator + ClientSideIntegrator integrator = new ClientSideIntegrator(apiGateway); + + // Dynamically pass parameters for data fetching + Map productParams = new HashMap<>(); + productParams.put("category", "electronics"); + + // Compose UI for products and cart with dynamic params + integrator.composeUI("/products", productParams); + + Map cartParams = new HashMap<>(); + cartParams.put("userId", "user123"); + integrator.composeUI("/cart", cartParams); + + // Validate the dynamically fetched data + String productData = apiGateway.handleRequest("/products", productParams); + String cartData = apiGateway.handleRequest("/cart", cartParams); + + assertTrue(productData.contains("Product List for category 'electronics'")); + assertTrue(cartData.contains("Shopping Cart for user 'user123'")); + } +} diff --git a/pom.xml b/pom.xml index 743c8ea30122..6e64b6a1d491 100644 --- a/pom.xml +++ b/pom.xml @@ -217,6 +217,7 @@ virtual-proxy function-composition microservices-distributed-tracing + microservices-client-side-ui-composition From 8fe2ea9c3b197e8f71ac278d958989a9736d4910 Mon Sep 17 00:00:00 2001 From: Tarun Vishwakarma Date: Sun, 13 Oct 2024 23:28:16 +0530 Subject: [PATCH 2/5] Improved some checkstyle changes. --- .../clientsideuicomposition/ApiGateway.java | 16 +++++++++------- .../clientsideuicomposition/CartFrontend.java | 6 ++++-- .../ClientSideIntegrator.java | 19 +++++++++++-------- .../FrontendComponent.java | 3 ++- .../ProductFrontend.java | 4 +++- .../ClientSideCompositionTest.java | 4 ++-- 6 files changed, 31 insertions(+), 21 deletions(-) diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java index ea4592aac5ce..e8888cb19a92 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ApiGateway.java @@ -4,14 +4,16 @@ import java.util.Map; /** - * ApiGateway class acts as a dynamic routing mechanism that forwards client requests - * to the appropriate frontend components based on dynamically registered routes. + * ApiGateway class acts as a dynamic routing mechanism that forwards client + * requests to the appropriate frontend components based on dynamically + * registered routes. * - * This allows for flexible, runtime-defined routing without hardcoding specific paths. + *

This allows for flexible, runtime-defined routing without hardcoding specific paths. */ public class ApiGateway { - // A map to store routes dynamically, where the key is the path and the value is the associated FrontendComponent + // A map to store routes dynamically, where the key is the path and the value + // is the associated FrontendComponent private final Map routes = new HashMap<>(); /** @@ -27,14 +29,14 @@ public void registerRoute(String path, FrontendComponent component) { /** * Handles a client request by routing it to the appropriate frontend component. * - * This method dynamically handles parameters passed with the request, which + *

This method dynamically handles parameters passed with the request, which * allows the frontend components to respond based on those parameters. * * @param path the path for which the request is made (e.g., "/products", "/cart") * @param params a map of parameters that might influence the data fetching logic * (e.g., filters, userId, categories, etc.) - * @return the data fetched from the appropriate component or "404 Not Found" - * if the path is not registered + * @return the data fetched from the appropriate component or "404 Not Found" + * if the path is not registered */ public String handleRequest(String path, Map params) { if (routes.containsKey(path)) { diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java index db2a01fb215d..95131073ae4b 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/CartFrontend.java @@ -9,10 +9,12 @@ public class CartFrontend extends FrontendComponent { /** - * Fetches the current state of the shopping cart based on dynamic parameters like user ID. + * Fetches the current state of the shopping cart based on dynamic parameters + * like user ID. * * @param params parameters that influence the cart data, e.g., "userId" - * @return a string representing the items in the shopping cart for a given user + * @return a string representing the items in the shopping cart for a given + * user */ @Override protected String getData(Map params) { diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java index 08e3ff5f77c6..96ff3282d702 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ClientSideIntegrator.java @@ -1,11 +1,12 @@ package com.iluwatar.clientsideuicomposition; -import lombok.extern.slf4j.Slf4j; import java.util.Map; +import lombok.extern.slf4j.Slf4j; /** * ClientSideIntegrator class simulates the client-side integration layer that - * dynamically assembles various frontend components into a cohesive user interface. + * dynamically assembles various frontend components into a cohesive user + * interface. */ @Slf4j public class ClientSideIntegrator { @@ -13,25 +14,27 @@ public class ClientSideIntegrator { private final ApiGateway apiGateway; /** - * Constructor that accepts an instance of ApiGateway to handle dynamic routing. + * Constructor that accepts an instance of ApiGateway to handle dynamic + * routing. * - * @param apiGateway the gateway that routes requests to different frontend components + * @param apiGateway the gateway that routes requests to different frontend + * components */ public ClientSideIntegrator(ApiGateway apiGateway) { this.apiGateway = apiGateway; } /** - * Composes the user interface dynamically by fetching data from different frontend components - * based on provided parameters. + * Composes the user interface dynamically by fetching data from different + * frontend components based on provided parameters. * * @param path the route of the frontend component * @param params a map of dynamic parameters to influence the data fetching */ - public void composeUI(String path, Map params) { + public void composeUi(String path, Map params) { // Fetch data dynamically based on the route and parameters String data = apiGateway.handleRequest(path, params); - LOGGER.info("Composed UI Component for path '{}':", path); + LOGGER.info("Composed UI Component for path '" + path + "':"); LOGGER.info(data); } } diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java index 17abc01eeb7d..6ba35699ccc1 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java @@ -28,7 +28,8 @@ public String fetchData(Map params) { } /** - * Abstract method to be implemented by subclasses to return data based on parameters. + * Abstract method to be implemented by subclasses to return data based on + * parameters. * * @param params a map of parameters that may affect the data fetching logic * @return the data for this specific component diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java index 6cb5ee9ec53a..ce49034d7194 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/ProductFrontend.java @@ -17,6 +17,8 @@ public class ProductFrontend extends FrontendComponent { @Override protected String getData(Map params) { String category = params.getOrDefault("category", "all"); - return "Product List for category '" + category + "': [Product 1, Product 2, Product 3]"; + return "Product List for category '" + + category + + "': [Product 1, Product 2, Product 3]"; } } diff --git a/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java b/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java index f339cbd71b27..dda136d0fd77 100644 --- a/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java +++ b/microservices-client-side-ui-composition/src/test/java/com/iluwatar/clientsideuicomposition/ClientSideCompositionTest.java @@ -30,11 +30,11 @@ void testClientSideUIComposition() { productParams.put("category", "electronics"); // Compose UI for products and cart with dynamic params - integrator.composeUI("/products", productParams); + integrator.composeUi("/products", productParams); Map cartParams = new HashMap<>(); cartParams.put("userId", "user123"); - integrator.composeUI("/cart", cartParams); + integrator.composeUi("/cart", cartParams); // Validate the dynamically fetched data String productData = apiGateway.handleRequest("/products", productParams); From fcaf4d5c8ea4121f7b99418e5af484e6f9599895 Mon Sep 17 00:00:00 2001 From: Tarun Vishwakarma Date: Mon, 14 Oct 2024 00:35:59 +0530 Subject: [PATCH 3/5] Added Random variable to re-use the random instead of creating it everytime in FrontendComponent. --- .../iluwatar/clientsideuicomposition/FrontendComponent.java | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java index 6ba35699ccc1..69572ce7c399 100644 --- a/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java +++ b/microservices-client-side-ui-composition/src/main/java/com/iluwatar/clientsideuicomposition/FrontendComponent.java @@ -9,6 +9,8 @@ */ public abstract class FrontendComponent { + public static final Random random = new Random(); + /** * Simulates asynchronous data fetching by introducing a random delay and * then fetching the data based on dynamic input. @@ -19,7 +21,7 @@ public abstract class FrontendComponent { public String fetchData(Map params) { try { // Simulate delay in fetching data (e.g., network latency) - Thread.sleep(new Random().nextInt(1000)); + Thread.sleep(random.nextInt(1000)); } catch (InterruptedException e) { Thread.currentThread().interrupt(); } From f7d7b285cede54f420fb7b8b6d32838572cee49b Mon Sep 17 00:00:00 2001 From: Tarun Vishwakarma Date: Tue, 5 Nov 2024 21:53:18 +0530 Subject: [PATCH 4/5] changed the Pom.xml and upadted the ReadME.md --- .../ReadME.md | 1 - .../etc/client-side-ui-composition.urm.puml | 31 +++++++++++++++++++ .../pom.xml | 13 -------- 3 files changed, 31 insertions(+), 14 deletions(-) create mode 100644 microservices-client-side-ui-composition/etc/client-side-ui-composition.urm.puml diff --git a/microservices-client-side-ui-composition/ReadME.md b/microservices-client-side-ui-composition/ReadME.md index fd657c5564e9..ed134f5b74c6 100644 --- a/microservices-client-side-ui-composition/ReadME.md +++ b/microservices-client-side-ui-composition/ReadME.md @@ -1,4 +1,3 @@ - # Client-Side UI Composition Pattern: Assembling Modular UIs in Microservices Architecture ### **shortTitle**: Client-Side UI Composition diff --git a/microservices-client-side-ui-composition/etc/client-side-ui-composition.urm.puml b/microservices-client-side-ui-composition/etc/client-side-ui-composition.urm.puml new file mode 100644 index 000000000000..ef88e9c22ac7 --- /dev/null +++ b/microservices-client-side-ui-composition/etc/client-side-ui-composition.urm.puml @@ -0,0 +1,31 @@ +@startuml client_side_ui_composition_updated +skinparam classAttributeIconSize 0 + +class ApiGateway { + +registerRoute(path: String, component: FrontendComponent) + +handleRequest(path: String, params: Map): String +} + +class FrontendComponent { + +fetchData(params: Map): String + #getData(params: Map): String +} + +class ProductFrontend { + +getData(params: Map): String +} + +class CartFrontend { + +getData(params: Map): String +} + +class ClientSideIntegrator { + +composeUI(path: String, params: Map) +} + +ApiGateway --> FrontendComponent +FrontendComponent <|-- ProductFrontend +FrontendComponent <|-- CartFrontend +ClientSideIntegrator --> ApiGateway + +@enduml diff --git a/microservices-client-side-ui-composition/pom.xml b/microservices-client-side-ui-composition/pom.xml index 4592483746b1..b30a86007cfb 100644 --- a/microservices-client-side-ui-composition/pom.xml +++ b/microservices-client-side-ui-composition/pom.xml @@ -44,20 +44,7 @@ junit-jupiter-engine test - - - org.projectlombok - lombok - 1.18.34 - provided - - - 23 - 23 - UTF-8 - - \ No newline at end of file From 280d90ed206a7261f1fc45c923b91bd253b265f8 Mon Sep 17 00:00:00 2001 From: Tarun Vishwakarma Date: Mon, 18 Nov 2024 23:05:20 +0530 Subject: [PATCH 5/5] Changes in the README.md File as per requirement, name of the file changed from ReadME.md to README.md --- .../ReadME.md | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/microservices-client-side-ui-composition/ReadME.md b/microservices-client-side-ui-composition/ReadME.md index ed134f5b74c6..c11b7990308c 100644 --- a/microservices-client-side-ui-composition/ReadME.md +++ b/microservices-client-side-ui-composition/ReadME.md @@ -1,22 +1,16 @@ -# Client-Side UI Composition Pattern: Assembling Modular UIs in Microservices Architecture - -### **shortTitle**: 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**: User Interface - -### **Language**: JavaScript, HTML, CSS - -### **Tag**: -- Micro Frontends -- API Gateway -- Asynchronous Data Fetching -- UI Integration -- Microservices Architecture -- Scalability - +--- +title: "Client-Side UI Composition Pattern: Assembling Modular UIs in Microservices Architecture" +shortTitle: Client-Side UI Composition Pattern +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: User Interface +language: en +tag: + - Micro Frontends + - API Gateway + - Asynchronous Data Fetching + - UI Integration + - Microservices Architecture + - Scalability --- ## **Intent of Client-Side UI Composition Design Pattern**