Client-side UI Composition Design Pattern for Microservices with Example...

Client-side UI Composition Design Pattern for Microservices with Examples for Beginners

In this video we will learn about Client-side UI Composition design pattern for microservices. This is the 7th design principle in Integration design patterns category for microservices. Client-Side Composition pattern combine Fragments on client-side. Client-Side Composition pattern uses HTML, CSS, and JavaScript to render Fragments at runtime. Client-Side Composition pattern is to display data from multiple services. Each team develops a client-side UI component, similar to AngularJS directive, that implements one section of the page for their service. A UI team is responsible implementing the page skeletons that build pages by composing multiple, service-specific UI components. let’s understand, what are Fragments? Fragments is an element that builds a page in Micro Frontends. Fragments are not just UI components, but rather elements which provide some functionality for the business domain. ** Usage of this Design Pattern ** 1. Use this pattern when you want different team to work on different UI fragments. 2. 2. use this pattern when you want different team can work on UI fragments in parallel. 3. 3. Use this pattern when you want your page should render at run time with dynamic data. ** Advantages of this Design Pattern ** 1. Independent UI Teams − Each UI team can work once a microservice contract is available without any need for all microservices availability. 2. Manageable UI development − UI being developed in components becomes manageable and efficient. 3. Easier Development − UI development becomes easier and maintainable. ** Chapter Timestamps ** 0:00 Welcome to Client-side UI Composition design pattern 0:47 Agenda of tutorial 1:57 Introduction of Client-side UI Composition design pattern 3:11 Real world examples of Client-side UI Composition design pattern 4:17 Usage of Client-side UI Composition design pattern 4:40 Advantages of Client-side UI Composition design pattern 5:17 Summary of Client-side UI Composition design pattern 6:01 Next video on Client-Side UI Composition design pattern for microservices #microservices #clientsideuicomposition #designpatterns ** CHECK OUT OUR OTHER VIDEOS ** Branch Microservices Design Pattern    • Branch Design Pat...   Difference between Monolithic and Microservice Architecture    • Difference betwee...   Spring boot project setup:    • Spring boot Proje...   Spring Boot Microservice with postgres database Project:    • Spring Boot Micro...   Prepare Docker file, Container and Build Image:    • Docker Tutorial f...   Deploy Docker Image AWS Elastic Container Service:    • Deploy Springboot...   Solid Principle Tutorial    • Solid Principles ...   ** CHECK OUR PLAYLISTS ** Microservice Architecture and Microservice Design Patterns Tutorial    • Microservice Arch...   Spring Boot Complete Tutorial    • Spring Boot Tutor...   Docker Containers Complete Tutorial    • Cloud & Container...   Solid Principles Tutorial    • Solid Principles ...   Java Design Pattern Complete Tutorial with Examples    • Java Design Patte...   ** ABOUT OUR CHANNEL ** CodeOneDigest is a youtube channel that produces videos on programming languages, cloud and container technologies, Software design principles, Java frameworks in English and Hindi languages. Dosto, CodeOneDigest youtube channel pe aapko programming languages, container technology, cloud computing, software engineering se related videos milenge. Check out our channel here:    / @codeonedigest   Don’t forget to subscribe! ** OUR WEBSITE ** https://codeonedigest.wordpress.com/ ** GET IN TOUCH ** Email us on codeonedigest@gmail.com FOLLOW US ON SOCIAL - LIKE, SHARE & SUBSCRIBE Get updates or reach out to Get updates on our Social Media Profiles! Subscribe: https://bit.ly/3NeWQ8U Youtube:    / @codeonedigest   Twitter: https://twitter.com/codeonedigest Facebook: https://www.facebook.com/codeonedigest Instagram: https://www.instagram.com/codeonedigest/ Linkedin: https://www.linkedin.com/in/codeone-d... Reddit: https://www.reddit.com/user/codeonedi... Github: https://github.com/codeonedigest Website: https://codeonedigest.wordpress.com/ Tumblr: https://www.tumblr.com/codeonedigest Pinterest: https://in.pinterest.com/codeonedigest/