Introduction
What if we could create native mobile apps and desktop apps using .NET C# and XAML from a single code base? How cool would that be? Yes, now we can create native Android, iOS, macOS, and Windows applications from a single code base. This is possible using .NET’s new feature called Multi-platform App UI (MAUI). In this article, we will discuss more MAUI, by the end of this article you will get some basic ideas about MAUI and how to get started.
Table of Contents
- What is MAUI
- MAUI vs Xamarin Forms
- Similarities between MAUI and Xamarin Forms
- Who can use MAUI Framework
- MAUI Architecture
- Features of MAUI
- IDEs for Developing MAUI
- MAUI for Web Applications
- Getting Started with MAUI
- Building Sample Application
- MAUI Project Structure
- Conclusion
What is MAUI
As stated before, MAUI means Multi-Platform App UI which is an open-source cross-platform framework. We can develop and build native Android, iOS, macOS, and Windows applications from a single code base using MAUI.
MAUI is an evolution of Xamarin.Forms, which extended from Mobile to Desktop application. If you are already worked on Xamarin.Forms, you can easily relate .NET MAUI.
Fig. 1 MAUI (Image Credit Microsoft)
MAUI vs Xamarin Forms
The evolution of Xamarin forms will be integrated into the single. NET. With .NET 6, the native application development becomes a part of. NET. Single MAUI project is for all platforms is the most important advantage.
Similarities between MAUI and Xamarin Forms
- We still can use XAML and C# to develop the applications
- We can choose MVVM, Reactive UI, Model-View-Update
- We can build Android, iOS, macOS, Windows desktop applications using the MAUI framework.
- If you already have experience with Xamarin, you can easily relate to MAUI.
Who can use MAUI Framework
- Developers who want to build cross-platform applications using C# and XAML from a single code base.
- Across platforms to share the same UI layouts and designs, which saves more time in design implementations.
- Across the platforms, to apply the same business logic, code, and testing.
MAUI Architecture
In a .NET MAUI app, we write code that primarily interacts with,
- The .NET MAUI API first (marked as 1 in the image Fig.2).
- Then the .NET MAUI directly consumes the native platform APIs (marked as 3 in the image Fig.2).
- App code may directly exercise platform APIs if required (marked as 2 in the image in the image Fig.2).
Fig.2 Architecture of MAUI (Image credits Microsoft)
.NET MAUI apps compiled into native app packages,
- Android apps built using .NET MAUI compile from C# into an intermediate language (IL) which is then just-in-time (JIT) compiled to a native assembly when the app launches.
- iOS apps built using .NET MAUI are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.
- macOS apps built using .NET MAUI use Mac Catalyst, a solution from Apple that brings your iOS app built with UI Kit to the desktop, and augments it with additional App Kit and platform APIs as required.
- Windows apps built using .NET MAUI use Windows UI Library (WinUI) 3 to create native apps that can target the Windows desktop and the Universal Windows Platform (UWP).
Features of MAUI
.NET MAUI provides cross-platform APIs for native device features. Here are some good features provided by MAUI,
- Access to sensors, such as the accelerometer, compass, and gyroscope on devices.
- Ability to check the device’s network connectivity state, and detect changes.
- Provide information about the device the app is running on.
- Copy and paste text to the system clipboard, between apps.
- Pick single or multiple files from the device.
- Store data securely as key/value pairs.
- Utilize built-in text-to-speech engines to read text from the device.
- Initiate browser-based authentication flows that listen for a callback to a specific app registered URL.
- .NET MAUI includes support for .NET hot reload
IDEs for Developing MAUI Application
- Visual Studio
- Visual Studio Code
Using these two IDEs, we can build native Android, iOS, macOS, and Windows applications using MAUI. Just coding is all we need, then choosing Visual Studio Code is a wise option.
MAUI for Web Applications
There is an option to integrate the Blazor application into MAUI using WebView.
Getting Started with MAUI
Installing MAUI
At the time of writing this article, we have to follow the below-mentioned steps. These will be changing as new releases of Visual Studio and .NET MAUI are released.
- Framework – .NET 6 Preview 6 with .NET MAUI
- Platform SDKs – Android, iOS, macOS, tvOS, and Mac Catalyst
- IDE – Visual Studio 2022 preview with the workloads Desktop and Mobile
Fig.3 Workloads required for MAUI using Visual Studio 2022 Preview
Install MAUI workloads using .NET CLI,
Install Missing Components,
Check,
If any tools and SDKs required by .NET MAUI are missing, maui-check will install them. The example below shows the output generated if the tools and SDKs required by .NET MAUI are already installed,
A new dotnet workload install a command is available for installing the mobile workloads. Install MAUI Workloads in another way.
On Windows, in an Administrator command prompt,
And then install the below-listed workloads one by one as well,
Building Sample Application
In this example, we are going to create an MAUI application using Visual Studio 2022. First, let's create a new application by running the below command in the Command Prompt,
Now open Visual Studio 2022 and open the created project from Open a project or solution and browse the project.
Fig.4 Browse our newly created MAUI project
We have to wait for a while to load the dependencies.
MAUI Project Structure
The below image shows the project structure of the MAUI application.
Fig.5 Project Structure of MAUI Application
We will discuss each file in this project in our next article (refer here).
Run the MAUI Application
To run the MAUI Application, we need either an Emulator or Local Android device connected with our system for mobile application. To run our application on a local Android device, we have to enable the developer settings.
Fig. 6 To run MAUI Application from VS click the start button
- In the Visual Studio toolbar, press the Start button to launch the app in your chosen Android emulator or Android Local Device.
- In the running app press, the CLICK ME button several times and observe that the count of the number of button clicks is incremented.
Fig 7. Running MAUI Application
In my next article, we will discuss how to run the MAUI application by using installing it into an Android phone.
Some useful MAUI GitHub resources
No comments:
Post a Comment