A Review of Maui Blazor

• SDK • C#

One of the main advantages of Maui Blazor is that it is cross-platform. You can use the same code base to target Windows, Android, iOS, and macOS devices with native performance and look-and-feel. This means you don't have to learn different languages or frameworks for each platform, which can save you time and effort.

Maui Blazor is a newer technology that allows you to create hybrid apps that combine web and native UI elements using C# and Razor. In this blog post, I will share some of the benefits of using Maui Blazor for new developers and how you can get started with it in minutes.

DIY for Beginners

To get started with Maui Blazor, you can follow a simple guide that shows you how to build your first app using Visual Studio—found at the end of this article. With the basic Blazor application, you can create a basic app that displays a counter and a weather forecast using web components. You can also customize your app with native controls and platform features using C# and XAML.

XAML – Low Level Understanding

To use XAML, you create a file with the .xaml extension and write the XAML code to define the layout and appearance of your user interface. The XAML code is then parsed and used to create the visual elements of your application at runtime.

Here is an example of a simple XAML file that defines a button:

<Button Content="Click me!" />

This XAML code creates a button with the text “Click me!” on it. When the application is ran, the XAML code is parsed and a button is created and displayed to the user.

XAML is a language used to create the look and layout of an app’s user interface. It’s like a blueprint that tells the app what buttons, text, and other elements to show on the screen and where to put them. Developers write XAML code in a special file and when the app runs, it reads the code and creates the user interface based on the instructions in the XAML file. For the purposes of the rest of this article, you don’t need to fully understand XAML. However, I felt necessary to show a quick example like the one above to form a better understanding. And to demonstrate how easy it is to create things like a button.

Maui Blazor Introduction

I learned about Maui Blazor from a presentation given by Timothy Ingledue at the May 2023 Omaha Dotnet User Group meetup. He is an accomplished software engineer with over two decades of experience in the field. He specializes in the Microsoft and AWS cloud technology stacks. He demonstrated how easy and powerful Maui Blazor is for creating hybrid apps. And to avoid “tutorial rot,” you’re not going to want to miss this short and sweet tutorial over Balzor Maui. As mentioned in my previous posts, avoid lengthy complex coding tutorials, if possible, especially when first starting out.

Blazor vs. Maui Blazor

Over three years ago, I was introduced to an SDK via a Blazor application tutorial. I have been interested in Blazor ever since. But there is a distinction between Blazor and Maui Blazor. Blazor is like a set of building blocks that lets you make websites using C#. .Net Maui is another set of building blocks that lets you make apps for phones, tablets, and computers using C# and another special language called XAML (cross-platform). With .Net Maui, you can also use the Blazor building blocks to make apps that work like websites but can also do things that only apps can do. In other words, Blazor is for making websites and .Net Maui is for making apps, but you can also use Blazor with .Net Maui to make apps that work like websites.

But initially most of my exposure to software development was using C# on the back end. I like Blazor because it simplifies web development by using C# instead of JavaScript. Seeing Maui Blazor for the first time was exciting because it extends Blazor to native platforms.

Conclusion

Maui Blazor is great for new developers because it lets you use your existing C# and web skills to create hybrid apps for multiple platforms. You don't have to learn new languages or tools, and you can leverage the rich ecosystem. If you are a new software developer who wants to learn more about the full stack or how modern APIs work, you might be interested in Maui Blazor. Maui Blazor can help you see the whole stack because it combines web development with native development. You can use Razor components to create your user interface and interact with platform features and UI controls—low code development. You can also use C# and .NET libraries to access data and services from various sources, such as databases and Rest APIs.

If you want to try Maui Blazor yourself, you can check out Timothy's repo with step-by-step instructions: https://github.com/Muaadeeb/May2023UserGroupMaui. I will note that I did enjoy the AI created Lizard images in the presentation. Remember, everything you see is free. You can also find more resources and tutorials on the official .NET Maui documentation site: https://docs.microsoft.com/en-us/dotnet/maui/.

Reference: Ingledue, T. (2023). Maui Blazor: Build hybrid apps with web and native UI elements [Presentation]. Omaha Dotnet User Group Meetup.