.net MAUI Real World mobile App— February 2023
For the past 8 months I have built a real world application with .NET MAUI, here are the result and my thoughts about the MAUI-tool.
.NET MAUI is Microsoft’s latest cross-platform development tool. It is a further development of the existing Xamarin.Forms. With MAUI, you can develop apps for iPhone, Android, Windows, and iOS with a single codebase. MAUI had its official launch in May 2022.
The app, which is named WorkHorse, is available on the Play Store if you want to see the final result. Check out the MAUI-app in Play Store.
As my daily job requires .NET and C# expertise, and my brother-in-law happened to want an app for tracking work hours on different projects, it was a great excuse to play around with .NET MAUI. After well over half a year of development it is now in daily use.
Here, I will share some useful experiences that hopefully can help others make good use of their time if they are starting with MAUI. Or perhaps you are just curious about hands-on experience with the tool.
Android-development with MAUI
After a lot of testing and feedback from a handful of users, I would say I am pleased with the Android result. The XAML Grid system is perceived as a flexible tool for achieving more advanced placement solutions.
The Adobe XD design I made:
Then, I recreated a similar design in XAML:
On Android, I’m satisfied with the end result. I won’t claim to write best-practice XAML code (the design language) on the first try, but now the design has gone through troubleshooting and bug fixing based on a handful of different Android phones. In MAUI, all SVG files are compiled to PNG during build, so it wasn’t an option to use PNGs in the top bar design. I solved this using a combination of Grid and Paths to ensure the curves looked smooth on all screen sizes.
It’s worth mentioning that there were some serious challenges on certain Android phones. Using the built-in pop-ups to display “alert,” “prompt,” and “confirm” boxes turned out to crash the MAUI app on certain older Samsung and Motorola models. As of now, I have ended up creating my own pop-up system, which seems to be working well so far.
On iPhone/iOS, however…
Although I will mention some challenges related to creating an iPhone version of the MAUI app, it is worth noting that there may be other XAML coding techniques in MAUI that will make iOS development smoother than my experience. There are some real world apps out there built with MAUI that is working perfectly on all platforms. What I want you to know though, if you’re not just developing for Android and Windows, is to test the iPhone version of the MAUI app early on in the process on a Mac.
Debug on iPhone with Windows using Hot Restart, is it good?
For my part, I haven’t had a Mac available, and therefore I waited too long to test on iPhone. One of the first things I did to test with iPhone was to use the Hot Restart-system. Here, you can connect a physical iPhone via USB to Visual Studio 2022 on Windows. The most important experience I had here was to not trust what I saw. Currently, it is not a genuine iOS build that is given to the iPhone, but rather it is mostly inserted into a virtual iPhone container. When I built it on a real Mac, it were definitly differences.
To run the simulation Hot Restart-build on iPhone, you need to have a developer account with Apple. Additionally, I had to spend some time researching build issues that I thought were due to a Nuget package, but which turned out to be limitations related to Hot Restart functionality. Hot Restart is an impressive technology in many ways, but in my opinion, it is not ready for professional use as it currently stands. So, use a Mac if you’re going to test the MAUI app on iPhone.
Online Mac using Scaleway and Macincloud.com
In the next step, I tried scaleway.com, which offers inexpensive rental of Macs online, but in the solution I found, there was a lot of work involved in making all the necessary installations myself, unless I wanted to have a fixed subscription there. Only now in January 2023 did I start testing the app with the online tool macincloud.com. This was a better experience, but you can probably send a ticket to them right away to install .NET and MAUI installations on the server you have been assigned.
Android and iPhone design comparison
Let’s take a closer look at the physical Android and iPhone results. As we can see in comparison image 1, the main screen looks somewhat similar on both systems. However, there is obviously not the same setting in XAML to design round buttons for iPhone as for Android. The design doesn’t look as smooth when taking a screenshot of the emulator, but it gives a likely representation of how it will look in practice.
📷Screenshot from emulators showing a comparison of Android and iPhone designs.
In the image above, we can see that the FlexLayout system does not work the same on iPhone as on Android (dates with hourly display). The number of work hours is not visible on iPhone. I believe I read somewhere that Flex is not recommended to use in MAUI yet.
Shell Navigation issues on iPhone and iOS
(Update March 7.: This might be an issue that is caused somehow by my own code-setup! Because I made some simple tests in a hello world app, and the routing worked fine there. But it is still strange my app navigation works fine on android but not iOS. I will investigate this further) . So, we can see that there are several things to consider when designing more advanced layouts for multiple platforms. However, what seems to be my biggest drawback for not completing the iPhone version yet is that the navigation system doesn’t seem to be fully functional here yet. I have set up the pages with the shell navigation. Pushing pages worked fine, but unfortunately, it completely stops the app on iPhone and iOS when using “absolute routing,” such as await Shell.Current.GoToAsync(“//Dashboard/ProjectSessions”). This works perfectly fine on Android though.
What I would do if I could start over
If I were to start over, knowing the challenges mentioned above, I would definitely have tested the app on a Mac much earlier in the process. Both in terms of programming and design, so that I could have adjusted to correct workarounds/proper practices from the start. Considering that this app is created on a hobby basis, I would have considered writing it with a tool where users could test functionality in a browser without having to go through the whole Play Store and App Store developer process before the app even shows signs of being alive. I have previously written an app in Ionic with Vue, which had its advantages in this regard. At the same time, I experience that the MAUI-app provides a more “premium” and “native” experience.
If I want to use C# to create apps for web pages that can be converted to an app, Microsoft Blazor seems to be a very promising tool. You can create SPA’s with good offline compatibility (Blazor WebAssembly). It is also designed for easy implementation of Blazor in MAUI, with the Blazor hybrid (.NET MAUI Blazor). If one is motivated to learn Dart, Flutter also seems promising from what little I have seen of it.
Should we all go for “real” native development?
There are many opinions on cross-platform versus native app development. I’m not an expert on this, but the boring answer is probably: it depends. For advanced apps, or apps with specific functionality needs that cross-platform doesn’t cover, it would be natural to go for Java/Kotlin for Android and Swift for iOS. But for other apps, cross-platform can definitely be beneficial as I see it.
Summary
To sum up this post, it is fitting to quote .NET developer Tobias Moe Thorstensen’s comment from November 2022: “MAUI probably needs a bit more love”. Despite some “growing pains” and iPhone challenges, I am still glad to have created an app with MAUI.
I have been fortunate enough to receive direct help from some of the MAUI developers along the way, and they have been extremely friendly and helpful. Microsoft has impressively integrated a lot with native platforms, but this comes at a cost, as developers must closely monitor that all functionalities work on different devices and platforms.
Want to test out full stack MAUI-development with offline-online sync? Check out my MAUI full-stack toturial here. For more specific and in-depth content, my favorite place for MAUI-stuff is from Gerald Versluis’ YouTube.
Also take a look at my other dev-stuff on my webpage if you are interested.
