DEV Community

Cover image for Introducing Micro Frontends in .NET Blazor WASM
Alexander Selorm Kubi
Alexander Selorm Kubi

Posted on • Updated on


Introducing Micro Frontends in .NET Blazor WASM

Table Of Contents

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:
Microservices with Monolith Frontend

Micro Frontend with Microservices:
Microservices with Monolith Frontend

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.

In-depth look at Micro Frontends

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.

Implement the Micro Frontend

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.

Top comments (6)

mteheran profile image
Miguel Teheran

waiting for next parts :)

xanderselorm profile image
Alexander Selorm Kubi • Edited

I'll publish it soon. 😊
Thank you for reading. ✌🏼

xanderselorm profile image
Alexander Selorm Kubi

Part two is currently available, and I'm working on the part 3

a_eid7 profile image

I'm afraid from learning blazor instead of react, i'm afraid from wasting time in blazor, i hear a lot about problems in slow in startup even after last version

xanderselorm profile image
Alexander Selorm Kubi

Oh okay. I think your fear is justifyable but that shouldn't be an issue.
Learning a framework or library should be based on the learner's experiences, motive, and requirements.

If you have a JS background and would like to continue programming in JS, go with React, otherwise go with any other framework that suits you, maybe Blazor.

nohorse profile image
Mark Davis

Take a look at Oqtane