Micro-frontends are a new developing pattern where UI (Front-ends/User Interface) of the web application combines from independent small front-ends app which can be built using different technologies and different teams. Micro-frontends are used to break down monolithic web application into microservices. Micro-frontends approaches are used to avoid creating unstructured and difficult-to-maintain code, improve the structure of code and avoid coupling of the component.

The Path class is derived from the shape class and you have also created complex shapes and curves. These curves and shapes are described using Geometry objects.

There are four ways for implementing Micro-frontends architecture using Blazor

Method 1: Micro-apps with a shared session and parameters

Micro-app is an excellent approach when the project is large and complex. Using micro-app multiple apps can access shared sessions, parameters, and even style.

Sharing session and account or general information across different application makes user comfortable and safe because the user doesn't need to start a new session or give information when they need.

An example of this concept is GSuit (Google productive suit). GSuit provides different Google applications (YouTube, Gmail, Google Photo, Calendar, and So on) using the user's Google account. To do this using Blazor, every application is blazor project and they have shared session information.

 

Method 2: Routing

To implement micro-frontends architecture with Blazor, routing is the easiest way. To implement micro-frontends using routing, create a new project for each URL of the main menu of your project. Each project is accessible via a different route in the URL, and they are independent of each project.

An example of this concept is https://lupblazordemos.z13.web.core.windows.net/ where the menu of the application is loaded with different components depending on what is selected.

Method 3: Blazor as a component in an existing project

Blazor is a component in an existing project that is used when you already have a project in JavaScript (such as React.js, Angular, Vue.js, and so on). This method is used when the functionality of project requires high performance or other reason. This architecture is more complex and the main application can be the Blazor project.

An example of this concept is https://awesome-swirles-33a9a7.netlify.app/admin/compiler In this application, you will see the React application consuming Blazor project which is used to provide components to compile C# code into the browser.

Method 4: Shared components or a Razor class library

To use a shared component or a razor class library, add a folder with the name "Shared" and add a shared component or razor library to this folder that can be reused across the project into components or pages. This method is a very simple and good way to implement micro-frontends architecture using Blazor, this method split the UI (User Interface) into small and reusable pieces with a single responsibility.

To share components across different projects you can create a Razor library or NuGet package to share them with the community.

An example of this concept is the micro-frontend project which incorporates two shared components inside its page. The shared component is a combination of C# and HTML code. Shared components are referenced by filename and used [parameter] to specify which properties will be parameter when component calls.

@code {

   // Used to supply a parameter to the parent component

   [Parameter]

   public string CallComponent { get; set; }

}

Let's Start with an Example

Step 1:Create a Blazor assembly application.

Open Visual Studio 2019.

Go to file manager ->project.

Create a new Blazor Application with the "BlazorDemo” name and click on the Create button.

Step 2: Select project template.

Select the Blazor Web Assembly App template and click on the Create button.

Step 3:Add Razor Library project

Open Server Explorer

Right-click on the solution and go to Add->New project "Component" and "Component1".

Step 4:Configure App File.

Add configuration for loading component.

App.razor

Step 5: Add NavLink

Add NavLink in NavMenu.razor file

Step 6: Add Required Library in _Imports.razor file

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorDemo
@using BlazorDemo.Shared
@using Component1
@using Component
@using Microsoft.AspNetCore.Components.WebAssembly.Services

Step 7: Add Reference of Razor library in Blazor project.

Right-click on Blazor web assembly project go to add->Project Reference Add Reference of “Component” and “Component1” Razor library.

Step 8: Build and run Project.