Mudblazor for Blazor

There are two methods in software design. One is to make the program so simple, there are obviously no errors. The other is to make it so complicated, there are no obvious errors. - Tony Hoare

A software framework is a concrete or conceptual platform where common code with generic functionality can be selectively specialized or overridden by developers simplifying programming. Frameworks are libraries with a well-defined Application Program Interface (API) reusable anywhere within the software under development.

Introduction

.NET has had various templating frameworks since its inception in the early 2000's. From the likes of Windows Presentation Foundation (WPF), Windows Forms(WF), ASP.NET Core MVC, Razor Pages to Blazor and now .NET MAUI.
Microsoft offers a way to choose an ASP.NET Core web UI for developers to find the right user interface(UI) to use for their solution. The focus however is on Blazor and in particular for webAssembly.

WebAssembly

Shortened to Wasm, it is a binary instruction format for a stack-based virtual machine. Enables interoperability of programming languages, leading to deployment on the web for client and server applications.

Advantages

• Efficient and fast using common hardware capabilities on a wide range of platforms

• Open and debuggable designed to be pretty-printed in a textual format(on the web) for debugging, testing, experimenting, optimizing, educating and writing programs by hand.

• Memory-safe in sandboxed execution environment usually inside existing JavaScript virtual machines. When embedded in the web, WebAssembly enforces the same-origin and permissions security policies of the browser.

• WebAssembly is designed to maintain the versionless, feature-tested, and backwards-compatible nature of the web. WebAssembly modules call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. It also supports non-web embeddings.

Blazor

It is framework for building interactive client-side web UI.
Blazor apps are component based. Just like many JavaScript frameworks making the transition from them to Blazor easy. Blazor was initiated in 2018.

Advantages

• Write code in C# instead of JavaScript.
• Leverage the existing .NET ecosystem of .NET libraries.
• Share app logic across server and client.
• Benefit from .NET's performance, reliability, and security.
• Stay productive cross platform Windows, Linux, or macOS.
• Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

Mudblazor

Just like any framework in JavaScript, it is never enough as a developer wants more advanced features which the different communities create. This makes software development easier as common tasks like authentication, state management to mention a few become a standard for the given framework. React JS has NextJS, Remix, Gatsby to mention a few, Vue has NuxtJS et al. So Blazor has MudBlazor which that extends its capabilities by adding functionalities that go beyond the display layer, which React is limited to.

Prerequisites

• System that compiles and runs the .NET Framework
• .NET SDK. The main version MudBlazor is using (LTS version).
• A code editor, Jet Brains Rider, Visual Studio or VS Code.

This set up of Mudblazor either from scratch or in an existing Blazor project should get you started.

Demo Project

For a Demo project, I created a UI showing SpaceX launches upto date. At the time of writing it was in .NET 6.

SpaceX API

Space Exploration Technologies Corp. (doing business as SpaceX) is an American spacecraft manufacturer, space launch provider, and a satellite communications corporation headquartered in Hawthorne, California. Founded in 2002 by Elon Musk, to reduce space transportation costs to enable the colonization of Mars. It manufactures the Falcon 9 and Falcon Heavy launch vehicles, several rocket engines, Cargo Dragon, crew spacecraft, and Starlink communications satellites.

Demo

The live demo can be found here.

The information gotten from a SpaceX REST API
One is able to see a list of MudBlazor cards showing the name and image for a mission with card actions showing a learn more button and another to show the video launch on YouTube if it exists. So many components were used which are common in various JavaScript frameworks showing the ease to use.

Github repo

The source code can be found here.

Future

The future is certainly bright in terms of improvements of the performance of Blazor as seen in the blog post.