Nowadays, a multiservice application is a common approach from the Backend point of view. How about the Frontend? There is something similar also for the Frontend. It is called or architecture. Composite UI Micro Frontend Read the article to the end where I will tell you how to use Composite UI in Angular ! First of all, let me explain the differences between a and a architecture: Monolith Composite Monolith Architecture: From the Monolith architecture point of view, the UI is one application developed using one programming language (Angular, React, etc...). This is a good approach for a small team. The application will be easy to understand, develop and maintain. Composite Architecture: A composite architecture is based on UI microservices. By comparing with architecture, the first one is a more complex approach. Composite Monolith This architecture is used in bigger teams working with different UI technologies. Every team is developing one UI MicroService and all of these will be integrated into the Base/Main page. Advantages of using Composite architecture: Working with different technologies - for example, one team may develop the “UI MicroService 1” using Angular and another team may develop the “UI MicroService 2” using React JS Scaling up to multiple teams Fast development Disadvantages of using Composite architecture: Integration in Base page Communication between UI MicroServices Missing core functionalities (for example the routing is not working properly in Angular) CSS - the style is kept in the “Base page” which means it is hard to test the modifications for each UI MicroServices. Is the future of development? Maybe yes, but I will recommend using it since I encountered a lot of issues and the development became really hard from my point of view. Composite UI only if it is necesary How to use ? are the answer. Composite UI in Angular Angular elements

Different

Monolith vs Composite UI - Future of UI Development?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

142 Stories To Learn About Angular

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

142 Stories To Learn About Angular

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps