Micro Frontend Deep Dive - with ASP.NET Core MVC
Welcome to the second part of my Micro Frontend article series.In the previous article, I introduced the concept of Micro Frontends, with a detailed overview of how this new approach seeks to address the issue of monolithic frontend architecture by approaching front-end development on similar lines as the back-end process.
Now that we understand what Micro Frontends are and how to lay the groundwork for their implementation, In this post I will explore micro-frontend design with ASP.NET Core and MVC. Below will be a rundown on the top 5 frameworks we can use to build our Micro Frontend architecture.
General Implementation Approaches
Micro-frontend strategies and patterns have emerged to break the monolith and promise independent, frictionless, end-to-end control of feature code. A Micro-frontend design decomposes our application into smaller isomorphic functions rather than writing large interconnected front-end UIs. Here is a quick run-down of the general implementation approaches – each come with their own tradeoffs.
Composition UI – Microservices contain backend and frontend display logic, returning html and JS/CSS dependency references to the consumer.
Multiple single-page apps – Fully independent microsites living at different URLs.
Integration at the Code Level – A more traditional approach that uses a shared code or an “app shell” with componentized, team owned functionalities added to pages.
Top 5 Micro Frontend Frameworks
A ton of client-side code has been thrown into our frontend layers creating monoliths, which are often maintained by a different team. Front ends have become increasingly more complex, interdependent and highly coupled to whatever Angular-React-Ember-Vue framework was cool when it was built.
1. ASP.NET Core MVC
Using a ASP.NET Core MVC frontend, we can leverage framework features to support code-level integrated micro-frontends.
View Components
If we need a way to bundle up bits of UI and related behind-the-scenes logic, chances are we’re looking for View Components in ASP.NET Core MVC.
View Components don’t use model binding and depend only on the data we provide, making it an ideal choice for rendering logic like shopping carts, content lists, or any componentized feature. View Components support parameters and have a backing class making them suitable for complex functionalities. They share the same separation-of-concerns and testability benefits found between view and controllers. Additionally, View Components can be externalized, loaded from a class library, packaged via NuGet and shared across multiple applications making them an excellent ownership boundary for feature teams.
These characteristics allow feature teams to independently manage microservices and their frontends by deploying parameterized View Components for consuming applications.
Invoking View Components is easy within an MVC view. Tag Helpers provide a HTML-friendly experience with Intellisense support.
_ViewImports.cshtml
2. Bit
Bit is a product-ready solution for building Micro Frontends, which also makes it one of the most popular frameworks there is. It allows us to create and manage frontends through independent components. The Bit homepage in itself is a homage to how independent components must be seamlessly integrated to create a homogenous product.
3. Module Federation
Module Federation is a JavaScript architecture that lets us develop multiple separate builds without any codependency. These are developed and deployed independently. They come together to form a single application.
4. Piral
Piral is the go-to tool for anyone looking to use Micro Frontends to build portal applications. With the help of decoupled modules known as Pilets, it allows us to create a modular frontend app which is expanded at runtime. A pilet is developed independently and ships with all necessary assets for Micro Frontend development, including the code.
5.Podium
Podium is a tool for ‘server-side composition of Micro Frontends’. It helps teams develop and serve different components of a web application in isolation, treating each part as a complete app on its own. These isolated parts, known as Podlets, can be developed either with the node.js Podium library or any technology stack of the developer’s choice.
Summary
Microservice architectures have created new challenges in unexpected places. If you’re just starting out, it helps to analyze their use cases in depth before zeroing in on the right frameworks for a large-scale project. As Technical Specialist (.Net Core), I have gone through by ASP.NET Core MVC View Components and it provides a mechanism for teams to isolate and manage frontend feature code, clearly define ownership and enhance agility. Regardless of your implementation strategy, breaking down Frontend monoliths into independently testable and deployable features will continue to be an emerging trend.
References
View components in ASP.NET Core
supporting-micro-frontends-with-asp-net-core-mvc
Micro Frontends – Revolutionizing Front-end Development with Microservices
How We Build MicroThe Strengths and Benefits of Micro Frontends Frontends
The Strengths and Benefits of Micro Frontends