{"id":42504,"date":"2021-08-24T00:00:00","date_gmt":"2021-08-24T00:00:00","guid":{"rendered":"https:\/\/www.trendmicro.com\/en_us\/devops\/21\/h\/micro-frontend-guide-technical-integrations.html"},"modified":"2021-08-24T00:00:00","modified_gmt":"2021-08-24T00:00:00","slug":"micro-frontend-guide-technical-integrations-sr-software-engineer","status":"publish","type":"post","link":"https:\/\/www.threatshub.org\/blog\/micro-frontend-guide-technical-integrations-sr-software-engineer\/","title":{"rendered":"Micro Frontend Guide: Technical Integrations Sr. Software Engineer"},"content":{"rendered":"

<\/p>\n

<\/div>\n

How can you support the development of separate UIs while maintaining a cohesive, consistent user experience?<\/span><\/p>\n

Shared style guide, design system, and CSS<\/b><\/p>\n

To ensure there is a consistent look and feel across the user interfaces from different service teams, the standardized UX design system (Figure 3) is highly recommended. This will help promote code reuse and reduce the chance of duplicated work at the UI component level.<\/p>\n

If there is a need to share the same style at the global level, then you can use global CSS classes, or CSS custom properties<\/a>\u202f(aka CSS variables). However, sharing CSS globally can introduce risks to the class collision, because there is no module system, name spacing, or encapsulation. This problem can be exacerbated with a Micro Frontend setup because CSS can be written by different teams at various times in separate repositories, making it hard to track down.<\/p>\n

Micro Frontend specific CSS<\/span><\/p>\n

While Micro Frontends could share the same style guide and design system to create a cohesive UX, the non-sharable styling and its implementation is done with CSS that is specific or scoped to each Micro Frontend. This ensure class names of styling rules do not collide between Micro Frontends.<\/p>\n

Scoping CSS to the Micro Frontend, in other words, an encapsulation technique to have the CSS only apply to one Micro Frontend or UI component, can be accomplished with variety of approaches and tools, including:<\/p>\n