Leveraging Microsoft Blazor to Build Client Side Web Applications

Prerequisites

• Install dotnet core 3 SDK latest version
• Install Blazor templates by executing the following command on the command-line: dotnet new -i Microsoft.AspNetCore.Blazor.Templates
• Install Visual Studio 2019 or higher, enabling the component bundles related to ASP.NET & Web Development and the Blazor extension from the Visual Studio Marketplace

Introduction

Microsoft released the stable release (3.0.0) of the dotnet core 3 framework on September 2019. This version of the framework brought amazing features including support for C# 8 and Blazor framework. For the full list of features released, please visit this Microsoft’s announcement.

Blazor is a programming framework that allows you to build web applications using client-side or server-side paradigms.
You can build your Blazor app using client-side template and running it as WebAssembly code. WebAssembly allows it to access the full functionality of the browser via Javascript interop. The code is compiled and encoded in a size and load-time-efficient binary format.

Also, you can build your Blazor app using server-side template, and your application will host Blazor components that will handle UI real-time interactions over a SignalR connection between the client and the server. This option enables you to build interactive UI in your application without the need to write custom Javascript code to handle it.

Blazor provides you an extensive set of features, such as:

• Runs in sandboxed environment and it is memory-safe, achieving performance close to native applications
• Blazor supports all critical features for Single Page Applications such as dependency injection, routing and components
• Developers can use their dotnet and C# knowledge to build the application
• Blazor applications (client-side) can be deployed and run on machines without dotnet framework installed, since the web app package contains all the framework’s dlls required to run the application
• Built-in Intellisense and tolling available in your IDE, for a richer development experience
• Support for latest versions of major browsers used (Chrome, Firefox, Microsoft Edge, Opera and Safari), and also it allows you to run the application in older versions that do not support WebAssembly, by using asm.js
  
  And this is just the beginning, because Microsoft plans to extend the support of Blazor to also support Progressive Web Apps (PWAs). More information in this blog.

Create New Project

Once you install the prerequisites mentioned above, you should be able to create a new Blazor project in Visual Studio by performing the following steps:

• Open Visual Studio
• Choose Create a new project option

• Search for Blazor in the top search box
• If you have an option available for Blazor App template, choose that option, otherwise choose the ASP.NET Core Web Application and then Blazor (client-side) - Check image below

• Choose create to finalize the creation of the project

Once you have created your Blazor app (client-side) project, you should have a project structure similar to the structure in the image below. It is important to notice that your Pages and Layouts are actually Razor components, since Blazor enables you to run Razor components and .NET code in your Blazor app.

The image below shows the configuration of the Host Builder to run your application. As you can see, we are creating the Host Builder from the *BlazorWebAssemblyHost* to generate a *webAssemblyHostBuilder*, and then we enable the BlazorStartup.

The image below shows the Startup class, where you have two methods: Configure and ConfigureServices.
ConfigureServices method allows you to configure the app’s services. A service represents a reusable component that provides app functionality. Services are registered in this method and then consumed across the app via dependency injection (DI) or ApplicationServices.
The Configure method allows you to create and configure your application’s request processing pipeline.

Also, the image below shows an example of a Razor component (Counter.razor) that allows you to use HTML and Javascript as usual in a client-side web app, but also allows you to use .NET code directly in your pages and leverage all benefits of using a high-level and Object-Oriented-Programming (OOP) language. Another useful feature is the ability to declare component’s parameters, so the parent component calling this child component can specify those parameters as well.

Publish your Blazor app

When comes to publish your application, Visual Studio enables you to create different publish profiles to allow you to publish your app to different locations. You have also built-in integration with Azure, that allows you to publish/deploy your app directly to your Azure resources, such as Azure Storage Static Website or Azure App Service - Web App, as you can see in the image below.

For scenarios you want to publish your applications and run them in Production environments, i would recommend you to host your applications in Azure, so you can leverage its service to ensure a high performant, secure and reliable web app. Also, you can use some of the amazing Serverless options, such as Azure Storage Static Website, in case you are considering to create client-side Blazor Apps, and have all the benefits mentioned before with a low cost.

In context of this demo, i am choose the Folder target to publish this demo app, so i can should you what is the final result. After choosing the Folder option and choosing the destination folder to publish the app, the publish process will run and once it is finished, you should have a result similar to the image below. As you can see in the images below, it generates all the html, static resources (javascript files, css files, etc.) and the required blazor framework files and dotnet core and libraries dlls required to run your application.

Conclusion

To summarize, in this post we can see how Blazor can help us build client-side web applications, allowing dotnet developers to use their existing knowledge of dotnet framework and C#, to build these applications and without being required to learn different frameworks or programming languages.

I would like to make a note about one important detail when you are considering the client-side Blazor App. As you noticed, all the dlls are exported in your app’s package, and consequently they are downloaded by the user’s browser anytime the user tries to access your app. So, it is important to mind about the amount of libraries and packages you install in your app, since as less packages you use, as faster you app gets. Of course, this process of download the dlls only happen in the first request, since then the dlls get cached. But this is the reality for each of the users accessing your application.

Also, i can see this becoming in future an important competitor against Angular, Reach, Vue, and other frameworks to build client-side web applications. There is stil many ways Microsoft can improve this framework, but step-by-step i think they will get there. One of the major benefits of Blazor, in comparison with other options available, when we talk about progression, is the ability to have Microsoft aligned with the community to ensure that the work being done is following the quality standards well-defined and ensuring good delivers, and this is a major issue nowadays in several open-source communities, specially when you decide to use third-party frameworks and libraries in your application, and then you realise that the time you saved of implementing your own framework or library, you end-up spending it fixing bugs and testing properly the library or framework.

So, i definitely recommend you to have a look to this framework and explore it, since i can see huge potential on this in the near future when we talk about building client-side web applications.