I’ve been away from real UI projects for a while. Recently, I needed to create some simple UIs for several projects to pump data into databases. While almost everyone at Medialesson loves Angular, I wanted to explore something different and revisit my roots. That’s why I chose Blazor as my “new” UI framework of the month. I was surprised at how easy it is to get started with it.

Years ago, I also realized that I’m not particularly talented at building nice UIs, so I wanted to keep the design simple and use existing controls and themes. I’m happy I discovered that Fluent is quite easy to use for decent design, and it brings a lot of good UI controls, like my favorite data grid.

In this post, I want to lay out the base for my upcoming posts about how to build data-driven apps with Blazor and Fluent.

Agenda

  • Why I Like Blazor and Fluent?
  • What is Blazor?
  • What is Fluent 2?
  • The First Application

Why I Like Blazor and Fluent

My top (incomplete and still growing) highlights in Blazor are:

  • Pure C#, with no real need for JavaScript/TypeScript, though it’s possible to use them.
  • Real components that can be structured in libraries for reuse.
  • Reuse of almost any other C#/.NET features, like Entity Framework and Dependency Injection.
  • Older code still works seamlessly.
  • Controls, controls, and even more controls.

But before I begin coding in the next posts, I want to highlight some essentials about Blazor and the Fluent design.

What is Blazor?

Blazor is a …

  • Web Framework: Blazor is a web framework developed by Microsoft that allows developers to build interactive web applications using C# instead of JavaScript.

And it brings …

  • .NET Integration: It is part of the ASP.NET Core framework, enabling full-stack web development with .NET, sharing code between server and client.

  • Web Assembly Support: Blazor Web Assembly (WASM) runs client-side in the browser via Web Assembly, allowing for near-native performance and offline capabilities.

  • Component-Based Architecture: Blazor uses a component-based architecture, where UI components are built as reusable pieces of code that can include markup and logic.

  • SignalR Integration: Blazor Server uses SignalR for real-time web functionality, maintaining a constant connection between the client and server to handle user interactions and UI updates.

More information about Blazor: https://blazor.net/

What is Fluent 2?

Fluent is a …

  • Design System: Microsoft Fluent 2 is a design system that provides a comprehensive set of design guidelines, components, and tools to create cohesive, accessible, and high-quality user interfaces.

And it brings …

  • Cross-Platform: Fluent 2 is designed to work across multiple platforms, including web, mobile, and desktop, ensuring a consistent user experience across different devices and applications.

  • Modern Aesthetics: It focuses on modern design principles such as simplicity, clarity, and efficiency, with an emphasis on clean lines, intuitive layouts, and vibrant yet harmonious color schemes.

  • Accessibility: Fluent 2 prioritizes accessibility, providing guidelines and components that help developers create inclusive applications that are usable by people with various disabilities.

  • Customization and Flexibility: The system is highly customizable, allowing developers to tailor the design components to match their brand identity while maintaining a coherent overall look and feel.

More information about Fluent 2: https://blazor.net/

Getting Started

I work with the latest version of the .NET Core SDK: https://dotnet.microsoft.com/en-us/download.

I always use a mix of Visual Studio and Visual Studio Code for editing code. Visual Studio Code is more straightforward and shows all files, while Visual Studio has a richer editing UI but hides some of the dirty secrets.

I assume you have the Web Development package installed when using Visual Studio.

The Fluent UI features are not part of the default installation of Visual Studio or the .NET SDKs. They are maintained separately on GitHub: https://github.com/microsoft/fluentui-blazor. Fortunately, there are project templates for dotnet, which can be used with the dotnet CLI and/or Visual Studio.

You can also manually add them to existing projects with the package manager.

dotnet add package Microsoft.Fast.Components.FluentUI

But honestly, you need to add some more files, links, etc., to your project. The complete documentation on how to add Fluent to an existing Blazor app can be found here.

For now, I prefer to start fresh on a greenfield project.

To check if you have the project templates already installed:

# list installed templates
dotnet new list

If you can’t find them in the list, install them from the cli with:

# install blazor fluent templates
dotnet new install Microsoft.FluentUI.AspNetCore.Templates

Create Your First Blazor Fluent App

Create a new project with dotnet cli and start it with:

dotnet new fluentblazor -n ConcertDatabase
cd ConcertDatabase
dotnet run

Create a new project in Visual Studio:

Templates in Visual Studio

Hit F5 in Visual Studio or click the web-link in the cli and you will see the beautiful sample web app

Templates in Visual Studio

UI Controls

When you are interest in what kind of controls come with Fluent for Blazor, take a look at: https://www.fluentui-blazor.net/. That’s where I got my inspirations and sample codes from

FluentUI Blazor Components

What’s next

In this blog post I demonstrate how to build a data driven application with Blazor and Fluent.

🤟Stay tuned.