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 https://youtu.be/2oRisNjHAs4
Difference between Monolithic and Microservice Architecture https://youtu.be/AkLxyMUyGg0
Spring boot project setup: https://youtu.be/bsgA20eJKxs
Spring Boot Microservice with postgres database Project: https://youtu.be/iw4wO9gEb50
Prepare Docker file, Container and Build Image: https://youtu.be/g_pdTzjnuso
Deploy Docker Image AWS Elastic Container Service: https://youtu.be/ZlR5onuwZzw
Solid Principle Tutorial https://youtu.be/7d4ZrBfXweE

** CHECK OUR PLAYLISTS **
Microservice Architecture and Microservice Design Patterns Tutorial https://youtube.com/playlist?list=PL2NZAYdLkYvgY74JFZMuluTJy-J_A_8NA
Spring Boot Complete Tutorial https://youtube.com/playlist?list=PL2NZAYdLkYvg_VlNmszrb-Um0wRx5yGDF
Docker Containers Complete Tutorial
https://youtube.com/playlist?list=PL2NZAYdLkYvhZQo2VTVCSug_zVjekNodi
Solid Principles Tutorial https://youtube.com/playlist?list=PL2NZAYdLkYvgB_35bYUnqP1p6v6P2Yb4-
Java Design Pattern Complete Tutorial with Examples https://youtube.com/playlist?list=PL2NZAYdLkYvglL0xl-4tgBAribrcjeuNH


** 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:
https://www.youtube.com/channel/UC9V0QYsWKz_OD2uooCtEtRg
Don’t forget to subscribe!

** OUR WEBSITE **
https://codeonedigest.wordpress.com/

** GET IN TOUCH **
Email us on [email protected]

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: https://www.youtube.com/channel/UC9V0QYsWKz_OD2uooCtEtRg
Twitter: https://twitter.com/codeonedigest
Facebook: https://www.facebook.com/codeonedigest
Instagram: https://www.instagram.com/codeonedigest/
Linkedin: https://www.linkedin.com/in/codeone-digest-10b418255/
Reddit: https://www.reddit.com/user/codeonedigest
Github: https://github.com/codeonedigest
Website: https://codeonedigest.wordpress.com/
Tumblr: https://www.tumblr.com/codeonedigest
Pinterest: https://in.pinterest.com/codeonedigest/