> Markdown version of [/videos/567-microfrontends-with-blazor-welcome-to-the-party?t=0](https://www.wearedevelopers.com/videos/567-microfrontends-with-blazor-welcome-to-the-party?t=0). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Microfrontends with Blazor: Welcome to the Party!

Are monolithic frontends slowing your release train? Learn to build, scale, and dynamically load autonomous microfrontends using Blazor WebAssembly.

- **Speakers:** Florian Rappl
- **Event:** WeAreDevelopers LIVE
- **Published:** April 18, 2023
- **Duration:** 58:32
- **URL:** https://www.wearedevelopers.com/videos/567-microfrontends-with-blazor-welcome-to-the-party

## Summary

The evolution of backend architectures into microservices successfully decentralized development, but frontends often remain monolithic bottlenecks hindered by single release trains and rigid dependencies. To resolve this, microfrontends extend the microservice philosophy to the browser. By dividing the user interface into an overarching "app shell" and autonomous modules, teams can independently develop, deploy, and scale their frontend features. However, developers must avoid creating "hidden monoliths" by ensuring loose coupling between modules—strong dependencies and feature overlaps quickly negate the benefits of a distributed architecture.

Implementing microfrontends with Blazor WebAssembly offers multiple architectural paths. A pure Blazor approach utilizes razor class libraries to aggregate modules into a single C# application, which is ideal for dedicated .NET teams but suffers from recompilation requirements and challenging lazy loading capabilities. Alternatively, a distributed approach allows a javascript-based app shell to dynamically integrate Blazor modules alongside other technologies. This hybrid strategy significantly improves initial load times by lazily loading the Blazor payload only when required, while leveraging web components for a consistent, framework-agnostic design system. However, this demands careful orchestration and a disciplined "less is more" mindset to prevent performance degradation from loading too many disparate frameworks.

To manage the complexity of dynamic composition, tools like the piral framework provide a robust orchestration layer. By utilizing a feed service to deliver module configurations via JSON, piral enables the app shell to assemble microfrontends on the fly. This architecture allows teams to maintain completely independent development lifecycles, enabling isolated features—such as a Blazor-built module injected into a React app—to be deployed, rolled back, or conditionally toggled without disrupting the broader user experience.

**Keywords:** microfrontend architecture, blazor wasm, razor class libraries, piral framework, frontend monolith bottleneck, distributed web applications, feature overlap avoidance, lazy loading wasm, javascript app shell, framework-agnostic web components, dynamic frontend composition, pilets module system, loose frontend coupling, hidden monolith antipattern

## Chapters

1. **Analyzing backend microservice architecture benefits and team autonomy** (00:00) — Scaling backend services around business capabilities empowers autonomous full-stack engineering teams to manage their own deployments.
1. **Navigating frontend development bottlenecks within monolithic team structures** (02:24) — Centralized frontend deployment processes often create blockers despite decoupled backend services across large-scale portals.
1. **Evolving web applications towards decoupled backend and frontend architectures** (05:57) — Separating frontend user experiences from backend data enables specialized and highly reusable internal APIs.
1. **Designing plugin-based micro frontend architectures to prevent feature overlap** (10:08) — Structuring applications with domain-driven plugin modules prevents dangerous hidden monolith dependencies across separated views.
1. **Implementing pure Blazor micro frontends using Razor class libraries** (18:41) — Referencing modular class libraries allows product teams to build modular frontend topologies entirely in C-sharp.
1. **Combining JavaScript frameworks and Blazor for flexible application shells** (25:01) — Integrating fast server-side rendered JavaScript shells mitigates lazy-loaded Blazor assembly initializations perfectly.
1. **Managing decentralized micro frontend modules with the Piral framework** (30:10) — Utilizing dynamic feed services orchestrates independent web modules into a single unified browser experience.
1. **Extending an existing JavaScript application shell with Blazor components** (37:03) — Injecting isolated Razor components into dynamic JavaScript portals demonstrates robust and highly effective technology mixing.
1. **Summarizing architecture options for Blazor micro frontends and application planning** (45:31) — Examining target audiences and product team expertise is critical when adopting new hybrid frontend topologies.
1. **Tracing early programming experiences and web development career progression** (47:51) — Transitioning from early console hacking into professional scalable web engineering establishes a natural coding intuition.
1. **Evaluating framework choices and migration strategies for legacy monoliths** (50:14) — Applying strangler concepts to monolithic web portals allows teams to incrementally adopt flexible UI structures.
1. **Assessing protocol unification challenges and standardization in internet of things** (56:10) — Fragmented communication languages continue to complicate broad network interoperability across modern connected hardware devices.

## Related Moments

- [Unifying frontend and backend development with ASP.NET Core Blazor](https://www.wearedevelopers.com/videos/699-blazor-the-new-spa-framework-for-everyone-who-hates-javascript) (from "Blazor – the new SPA Framework for everyone who hates JavaScript")
- [Introduction to micro frontends and platform architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")
- [Introduction to micro frontend architecture](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Introduction to micro frontends and architectural consequences](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Introduction to Blazor for seamless web development](https://www.wearedevelopers.com/videos/1564-blazor-unleashed-the-future-of-net-web-development) (from "Blazor Unleashed: The Future of .NET Web Development")
- [Implementing application frontends with modular service architectures](https://www.wearedevelopers.com/videos/200-agile-work-at-cariad-creating-a-customer-web-application-for-controlling-the-vehicle) (from "Agile work at CARIAD – Creating a customer web application for controlling the vehicle ")

## Related Articles

- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Staff Frontend Software Engineer](https://www.wearedevelopers.com/jobs/48370-staff-frontend-software-engineer) at **Bitdrift**
- [Software Engineer, Fullstack](https://www.wearedevelopers.com/jobs/48415-software-engineer-fullstack) at **Sciforium**
- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/3047993-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**