Introducing Micro Frontends in .NET Blazor WASM

Table Of Contents

• What are Micro Frontends?
• Why Micro Frontends?
• Micro Frontends vs Monolithic Frontends
• A Detailed look at a Micro Frontend
• How a Micro Frontend Looks Like
• Conclusion

Blazor is fast becoming one of the most loved web development frameworks out there to both c# and non-c# developers due to its robustness and its reliance on the powerful c# language and the .NET framework as a whole.
This makes building a scalable and secure web application (either client or server) a breeze to all who know how to program in c#.

On top of this, it makes use of web assembly for its client-side application called Blazor Wasm. If you're new to Blazor and you'd like to read more on it, see: What is Blazor?

Now, to the main subject...

What are Micro Frontends?

Micro Frontends can be defined as an architectural style where independently deliverable frontend applications are composed into a greater whole by teams.
The basic idea is to extend the idea of microservices to the frontend development through which a system can be divided into teams that own end-to-end systems and independently deliver frontend applications to compose into a greater whole.

Some of the key benefits that we've seen from micro frontends are:

• Small development scope,
• Smaller, more cohesive and maintainable codebases,
• More scalable organizations with decoupled, autonomous teams,
• The ability to upgrade, update, or even rewrite parts of the frontend in a more incremental fashion than was previously possible.

But..., Why Micro Frontends?

The current trend of frontend development is to build a feature-rich and powerful browser application which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows into a Frontend Monolith, and this gets more difficult to maintain.

• Good frontend development is hard.
• Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder.
• Implementing other languages or frameworks into your application? Don’t even think about it.

These are all real problems that can all negatively affect your ability to efficiently deliver high quality user experiences to your customers through your frontends.

Micro Frontends vs Monolithic Frontends

Monolith Frontend with Microservices:

Micro Frontend with Microservices:

A Detailed look at a Micro Frontend

Each Micro Frontend usually in a project:

• Is run by a cross-functional team (from the UI/UX guy through the DevOps guy),
• Ships its own UI,
• Stores its own data,
• Has its own technology stack,
• Is assigned a particular task/feature/mission.

How a Micro Frontend Looks Like?

There are many approaches that could reasonably be called micro frontends, and there is a natural architecture that emerges across all these approaches.

To start with, there is a single container application (app shell), which:

• Renders common page elements such as headers and footers,
• Addresses cross-cutting concerns like authentication and navigation,
• Brings the various micro frontend components together onto a page and tells each micro frontend when and where to render itself.

And that's it for today!

In following parts of this series about Micro Frontends in .NET Blazor WASM, I'll explore the implementation details, and how we can use other web development frameworks as a micro frontend, using .NET Blazor WASM as the App Shell/Container.