Introduction to Micro-frontends with Blazor web assembly


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

For most of the project, frontends development is hard and remains largely monolithic just like backend before micro-service, this means that is hard to scale development and the team can't work simultaneously on the large and complex project instead of being free to build, deliver and choose own technical solution for the project.

Instead of working separately, developers are bounded to the same codebase of the project and forced to crowd in the same build pipeline. And hence it makes development inefficient and hard to scale. The idea of micro-frontends allows to the use of micro-service in the frontend.

Micro-frontends are used to breaks monolithic frontends application into smaller and more manageable pieces of the application.

Micro-frontends

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.

Methods for implementation of Micro-frontends with Blazor

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.

Trigger-in-Xamarin

Figure 1 Micro-app with shared session




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.

Trigger-in-Xamarin

Figure 2 Micro-app using routing


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.

Trigger-in-Xamarin

Figure 3 Micro-frontend architecture using Blazor as a component


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; }

}

Trigger-in-Xamarin

Figure 4 Micro-frontend architecture using a shared component


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.

Trigger-in-Xamarin

Figure 5 Create Blazor Application

Step 2: Select project template.

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

Trigger-in-Xamarin

Figure 6 Select project template

Note: .Net 5.0 Must required

Step 3:Add Razor Library project

Open Server Explorer

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

Trigger-in-Xamarin

Figure 7 Add Razor Library


Op zoek naar een vertrouwd ASP.Net-softwareontwikkelingsbedrijf ?

Uw zoekopdracht eindigt hier.


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.

Trigger-in-Xamarin

Figure 8 Add Reference

Step 8: Build and run Project.

Trigger-in-Xamarin

Figure 9 Output

Conclusion

In the above blog, we worked through how to implement micro-frontends in Blazor web assembly project with an example. 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 so that different team works with different technology on the same project.

Introduction to Micro-frontends with Blazor web assembly

For most of the project, frontends development is hard and remains largely monolithic just like backend before micro-service, this means that is hard to scale development and the team can't work simultaneously on the large and complex project instead of being free to build, deliver and choose own technical solution for the project.

Instead of working separately, developers are bounded to the same codebase of the project and forced to crowd in the same build pipeline. And hence it makes development inefficient and hard to scale. The idea of micro-frontends allows to the use of micro-service in the frontend.

Micro-frontends are used to breaks monolithic frontends application into smaller and more manageable pieces of the application.

Micro-frontends

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.

Methods for implementation of Micro-frontends with Blazor

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.

Trigger-in-Xamarin

Figure 1 Micro-app with shared session




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.

Trigger-in-Xamarin

Figure 2 Micro-app using routing


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.

Trigger-in-Xamarin

Figure 3 Micro-frontend architecture using Blazor as a component


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; }

}

Trigger-in-Xamarin

Figure 4 Micro-frontend architecture using a shared component


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.

Trigger-in-Xamarin

Figure 5 Create Blazor Application

Step 2: Select project template.

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

Trigger-in-Xamarin

Figure 6 Select project template

Note: .Net 5.0 Must required

Step 3:Add Razor Library project

Open Server Explorer

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

Trigger-in-Xamarin

Figure 7 Add Razor Library


Op zoek naar een vertrouwd ASP.Net-softwareontwikkelingsbedrijf ?

Uw zoekopdracht eindigt hier.


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.

Trigger-in-Xamarin

Figure 8 Add Reference

Step 8: Build and run Project.

Trigger-in-Xamarin

Figure 9 Output

Conclusion

In the above blog, we worked through how to implement micro-frontends in Blazor web assembly project with an example. 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 so that different team works with different technology on the same project.

  • Pin It
TOP