Micro Frontend Guide: Technical Integrations Sr. Software Engineer

How can you support the development of separate UIs while maintaining a cohesive, consistent user experience?

Shared style guide, design system, and CSS

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.

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 (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.

Micro Frontend specific CSS

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.

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:

• Manually prefixed CSS classes with a unique string such as your web app’s name
• Bundle tools like Webpack to suffix all CSS classes or data attribution with a unique hash
• CSS modules or SASS modules
• CSS in JavaScript libraries that come with the built-in scoped CSS feature
• Shadow DOM with style isolation

Regardless of the styling technique you use, the goal is to ensure that each Micro Frontend has the autonomy it needs to style its UI and only allow desirable styles to be applied as intended without impacting other Micro Frontend.

What’s next?

In this article, we covered a number of technical considerations with illustrated examples to help you design and develop your Micro Frontend architecture.

It is important to remind yourself that there isn’t just one approach to implement a Micro Frontend, rather, there are many ways to accomplish the same goal with different trade-offs. Below is a table of acceptance criteria that serves as a good reference for you to help evaluate your own approach.

Read More HERE