Introduction to Blazor: A new era of web application

In recent times, Blazor has become a highly popular technology in the field of web application development. Due to its increasing popularity, we decided to explore its practical implementation. As a result, we created our first application based on Blazor. In this article, we aim to share our insights and discuss both the advantages and disadvantages of utilizing this technology.

What is Blazor?

Blazor is an open-source web framework developed by Microsoft that allows developers to build interactive web applications using C# instead of traditional web technologies like JavaScript. It enables developers to write code in C# that runs directly in the browser, eliminating the need for JavaScript interop or separate client-side and server-side codebases.

One of the main advantages of Blazor is that it allows developers to write both client-side and server-side code in C#. This enables them to build complete web applications using a single language, making code management, maintenance, and testing much easier. Additionally, Blazor follows a component-based programming model, which means that developers can create separate user interface components that can be reused in various parts of the application.

Setting up the development environment

The deployment environment was set up easily by using the built-in Visual Studio template with Blazor frontend. Since the API is in .NET Core, most of the configuration was standard, and only a few lines specific to Blazor needed to be added to program.cs.

Here are the added lines in program.cs:

‍

The second file that required changes was launchSettings.json. These changes allowed the API and Blazor to be hosted automatically on the same URL in the App service.

Here is the modified launchSettings.json:

‍

After making these changes and setting up the API, the app was ready for the first page.

The first application using Blazor

The application we were developing had a specific purpose in mind – to serve as a template application for future projects utilising the same technology. We aimed to create a robust foundation that could be easily customised and extended for various use cases.

Considering the diverse needs that may arise in different applications, we carefully selected the core functionalities that would be most commonly required. These included essential features such as user registration, login, and password recovery, which form the backbone of many web-based systems. Additionally, we incorporated simple user management capabilities and a role system.

Recognizing the importance of catering to a global audience, we implemented multilingual support within both the user interface and the content of the application. This ensures that users from different regions and language preferences can interact with the application seamlessly.

To achieve these goals, we drew inspiration from the successful Hutchinson project, which served as a reference for the API architecture of our application. To learn more about the project, please refer to the Case Study.  By leveraging proven design patterns and best practices, we aimed to create a solid and reliable foundation that would facilitate future development and maintenance efforts.

In addition, we utilised the Radzen component library to enhance our application’s user interface. By leveraging Radzen’s extensive collection of pre-built UI components, we were able to save development time and effort while ensuring a visually appealing and intuitive user experience. The customizable options and responsive design features of Radzen further contributed to creating a polished and user-friendly interface.

‍

In summary, our application will serve as a versatile template, encompassing fundamental features required by most projects, while also prioritising internationalisation through multilingual support. By adopting an architecture inspired by the Hutchinson project, we ensured that our application followed established patterns and principles, setting the stage for efficient development and the ability to adapt to diverse project requirements.

First impressions – pros & cons

When it comes to the positives, there are several advantages of using Blazor:

• Everything is written in C#, making it easy to work with and maintain.
• The framework is intuitive and follows a Razor-based approach, which simplifies development.
• At times, the structure and concepts resemble those of Angular, providing familiarity for developers.
• Blazor performs efficiently, ensuring fast and responsive application behavior.

However, there are a few drawbacks worth considering:

• Limited documentation available for Blazor, which can make it challenging to find specific guidance or solutions.
• Due to its relative novelty, there are fewer online resources and community discussions available for troubleshooting.
• Being a relatively new framework, Blazor may require more exploratory approaches for standard problem-solving, as established solutions may not yet be widely adopted.
• Debugging and simultaneous change detection may not always work seamlessly, leading to occasional difficulties in identifying and fixing issues.

Blazor: Revolutionizing web app development

Despite these challenges, the benefits of using Blazor, such as its C# integration, intuitive nature, and fast performance, outweigh the limitations, making it a valuable component library for enhancing the overall application development process.

Blazor represents a significant shift in web application development, offering developers the power to create sophisticated and responsive applications using their existing C# skills. Whether you are a seasoned .NET developer or new to the ecosystem, Blazor opens up exciting opportunities and sets a new standard for web application development.