Cross-platform mobile application development based on .NET MAUI with Visual Studio Code

Since 2010, mobile application development has become a very popular direction. Technically, we have experienced native application development, H5-based Web App, mixed-mode mobile application development, and cross-platform mobile application development. In addition to being a cross-platform application, .NET is also a platform for cross-application scenarios. .NET's mobile application solutions were initially based on Mono, from MonoTouch, to MonoDroid, to Xamarin, a cross-platform mobile application solution, and now integrated into .NET 6's MAUI. With .NET MAUI, you can quickly build iOS/Android/Windows/MacOS/Linux applications with native performance through one code and one project.

MAUI environment for Visual Studio Code install

The official now basically recommends the latest preview version of Visual Studio 2022 for development on the Windows platform, and the macOS Visual Studio support MAUI is not ready! I remember that at the 2020 Build conference, Microsoft showed development on Visual Studio Code, and I was looking forward to it, but there was no following. In fact, .NET cross-platform development components on Visual Studio Code already exist, through open source projects. To develop MAUI with Visual Studio Code, follow these steps:

1 .NET 6 environment install

Follow this link https://dotnet.microsoft.com/en-us/download install the latest .NET 6

2 MAUI environment install

Regardless of whether you are on Windows/macoOS, it is recommended to use maui-check ( https://github.com/Redth/dotnet-maui-check ) to install the environment required by MAUI, which includes Android SDK/iOS SDK and other related configuration check

Install maui-check from the command line

dotnet tool install -g Redth.Net.Maui.Check

Execute maui-check in the terminal

maui-check

As shown in the figure below, maui-check will scan the environment you depend on in your system, such as JDK, Android SDK, Xcode, Visual Studio, .NET SDK and MAUI-related packages. If it is missing, it will prompt you to install it.

3 Install Comet with .NET Tools

Comet is a front-end implementation framework for .NET based on the MVU design pattern, you can apply it to Windows, Android, iOS, macOS, Blazor application development. You can learn more from https://github.com/dotnet/comet .

is MVU?

MVU (Model-View=Update) is a functional reactive programming, architectural design pattern. UI is immutable in MVU. So every time you want to update a property, you have to rebuild your UI. Immutability is a feature of functional programming. The functional programming paradigm is supported since C# 9.0. Both UI and business are written in the same language (eg C#). Data flow is unidirectional. It is great for hot reloading of applications. You don't need to learn XAML to develop UI, but develop complete applications in one language. The following code completes the page and logic construction through descriptive expressions

public class MyPage : View {

    readonly State<int> clickCount = new State<int> (1);

    public MyPage() {
        Body = () => new VStack {
            new Text (() => $"Click Count: {clickCount}"),
            new Button("Update Text", () => {
                clickCount.Value++;
            }
        };
    }
} 

4 Install Comet for Visual Studio Code component

Manage your MAUI projects via Visual Studio Code

1 Create a MAUI project from the command line

mkdir mauidemo
cd mauidemo
dotnet new comet

2 Try to run the project via command line

dotnet build mauidemo -t:Run -f net6.0-android
dotnet build mauidemo -t:Run -f net6.0-ios

The results are as follows:

3 Open the project with Visual Studio Code

After opening, the Comet component will detect your MAUI project, we can see the lower left corner

You can click to select the relevant operating environment

4 Select iOS/Android to run and debug directly in Visual Studio Code

After opening, the Comet component will detect your MAUI project, we can see the lower left corner, the system will detect the relevant environment, and you can select the device you want to run

Set a breakpoint to see

Notice:

1. The Comet for .NET Mobile component is still under development, and Visual Studio Code cannot successfully load Android devices on the MAUI Preview 13 version, so the examples are mainly iOS.
2. In the Windows environment, if you want to debug iOS programs, you still have to use Visual Studio and macOS as a link. For details, you can click on this link https://docs.microsoft.com/zh-cn/xamarin/ios/get-started /installation/windows/connecting-to-mac/ to learn

HotReload as a supplement to

As mentioned earlier, the project created by Comet is based on the MVU model, and the interface and business are done in a functional way. At this time, HotReload is very important. You can edit what you get, and it is also a supplement to Visual Studio Code to develop MAUI applications. Next, I will introduce it.

1 Reloadify install

Reloadify 3000 is a .NET component that supports HotReload and has been built into Comet's MAUI project. The installation script is as follows:

dotnet tool install --global Reloadify

2 set

Enter the project and enter the following command

iOS
reloadify mauiappdemo.csproj -t ios

Android
reloadify mauiappdemo.csproj -t android

After that, you can write code under Visual Studio Code to synchronize your code in the simulator, and realize the HotReload function of what you write.

Finally, let me show you the MAUI Demo I completed with Visual Studio Code

Outlook

It is worth looking forward to developing MAUI applications through Visual Studio Code, and it also broadens the development scenarios for MAUI. Combining with Hot Reload will make cross-platform application development more efficient. I expect the official version to be better integrated with the official version of MAUI.