-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
45 changed files
with
2,426 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| name: 'Comment on stale issues and PRs' | ||
| on: | ||
| schedule: | ||
| - cron: '30 1 * * *' | ||
|
|
||
| jobs: | ||
| stale: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/stale@v9 | ||
| with: | ||
| stale-issue-message: 'This issue is stale because it has been open 60 days with no activity.' | ||
| stale-pr-message: 'This PR is stale because it has been open 60 days with no activity.' | ||
| close-issue-message: 'This issue was closed because it has been stalled for too long with no activity.' | ||
| close-pr-message: 'This PR was closed because it has been stalled for too long with no activity.' | ||
| days-before-issue-stale: 60 | ||
| days-before-pr-stale: 60 | ||
| days-before-issue-close: -1 | ||
| days-before-pr-close: -1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| --- | ||
| 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** | ||
|
|
||
| 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<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` Implementation | ||
| ```java | ||
| public interface FrontendComponent { | ||
| String fetchData(Map<String, String> params); | ||
| } | ||
| ``` | ||
| ## Example components | ||
| ```java | ||
| 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 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) |
31 changes: 31 additions & 0 deletions
31
microservices-client-side-ui-composition/etc/client-side-ui-composition.urm.puml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, String>): String | ||
| } | ||
|
|
||
| class FrontendComponent { | ||
| +fetchData(params: Map<String, String>): String | ||
| #getData(params: Map<String, String>): String | ||
| } | ||
|
|
||
| class ProductFrontend { | ||
| +getData(params: Map<String, String>): String | ||
| } | ||
|
|
||
| class CartFrontend { | ||
| +getData(params: Map<String, String>): String | ||
| } | ||
|
|
||
| class ClientSideIntegrator { | ||
| +composeUI(path: String, params: Map<String, String>) | ||
| } | ||
|
|
||
| ApiGateway --> FrontendComponent | ||
| FrontendComponent <|-- ProductFrontend | ||
| FrontendComponent <|-- CartFrontend | ||
| ClientSideIntegrator --> ApiGateway | ||
|
|
||
| @enduml |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <!-- | ||
| This project is licensed under the MIT license. Module model-view-viewmodel is using ZK framework licensed under LGPL (see lgpl-3.0.txt). | ||
| The MIT License | ||
| Copyright © 2014-2022 Ilkka Seppälä | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in | ||
| all copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| THE SOFTWARE. | ||
| --> | ||
|
|
||
| <project xmlns="http://maven.apache.org/POM/4.0.0" | ||
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | ||
| xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> | ||
| <modelVersion>4.0.0</modelVersion> | ||
| <parent> | ||
| <groupId>com.iluwatar</groupId> | ||
| <artifactId>java-design-patterns</artifactId> | ||
| <version>1.26.0-SNAPSHOT</version> | ||
| </parent> | ||
|
|
||
| <artifactId>microservices-client-side-ui-composition</artifactId> | ||
|
|
||
| <dependencies> | ||
| <dependency> | ||
| <groupId>org.junit.jupiter</groupId> | ||
| <artifactId>junit-jupiter-engine</artifactId> | ||
| <scope>test</scope> | ||
| </dependency> | ||
|
|
||
| </dependencies> | ||
|
|
||
| </project> |
Oops, something went wrong.