Sands of MAUI: Issue #133

Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together the latest .NET MAUI content relevant to developers.

A particle of sand—tiny and innocuous. But put a lot of sand particles together and we have something big—a force to reckon with. It is the smallest grains of sand that often add up to form massive beaches, dunes and deserts.

.NET developers are excited with the reality of .NET Multi-platform App UI (.NET MAUI)—the evolution of modern .NET cross-platform developer technology stack. With stable tooling and a rich ecosystem, .NET MAUI empowers developers to build native cross-platform apps for mobile/desktop from single shared codebase, while inviting web technologies in the mix.

While it may take a long flight to reach the sands of MAUI island, developer excitement around .NET MAUI is quite palpable with all the created content. Like the grains of sand, every piece of news/article/documentation/video/tutorial/livestream contributes towards developer experiences in .NET MAUI and we grow a community/ecosystem willing to learn and help.

Sands of MAUI is a humble attempt to collect all the .NET MAUI awesomeness in one place. Here’s what is noteworthy for the week of February 12, 2024:

TreeView for .NET MAUI

With .NET MAUI, developers can target mobile and desktop form factors from a single shared codebase. The reality for serious .NET MAUI app development, however, means catering to different platform experiences and building complex yet performant UI that renders consistently across devices.

It would be nice if developers could get more productive building .NET MAUI app functionality without having to reinvent the wheel for UI complexity—and representing hierarchical data is particularly tricky across platforms. The latest release of Telerik UI for .NET MAUI includes the much-desired TreeView component, and Viktoria Grozdancheva wrote up an article—expanding the .NET MAUI paradise with the Telerik TreeView UI.

Progress Telerik UI for .NET MAUI can help .NET MAUI developers be more productive—professionally engineered UI components shine with consistent rendering across platforms, fine-tuned performance and dependability with documentation/support.

Viktoria invites developers to explore the bravest hierarchical data visualization needs—the Telerik TreeView UI component is easy to bring into any .NET MAUI app, and works seamlessly across platforms. The Telerik TreeView UI is feature-rich by design—developers can expect data binding, UI virtualization, load on demand, expanding/collapsing nodes, single/multiple selection, checkbox support, commands, styling API, custom item templates and more, all built in.

Developers may be needing to build something similar to a mail client or the next file explorer, and Viktoria showcases the flexibility of the Telerik .NET MAUI TreeView UI and provides plenty of developer inspiration.

.NET MAUI Dos & Don’ts

.NET MAUI is built to enable .NET developers to create cross-platform apps for Android, iOS, macOS and Windows, with deep native integrations, platform-native UI and hybrid experiences that extend the reach of Blazor/JS web UI technologies. With increased stability and a rich ecosystem, more developers are building cross-platform apps with .NET MAUI.

With increased usage comes obvious developer trends—and some choices/techniques in .NET MAUI development may be detrimental to app performance and code sanity. After covering tips and tricks in a recent .NET MAUI Community Standup, David Ortinau took time to write up key advice for developers—Dos and Don’ts with .NET MAUI.

.NET MAUI has an evolved and well-architected UI technology stack—much of this comes from lessons learned from the Xamarin ecosystem. David starts off with some obvious advice on how .NET MAUI apps bootstrap the first view and choices in navigation between views—AppShell is getting increasingly popular. There can be some “gotchas” in .NET MAUI development around nested tabs, referencing SVGs and unconstrained scrolling inside stacklayouts.

While custom renderers from Xamarin.Forms do work in .NET MAUI through Compatibility mode, David mentions a few caveats in how and when to customize UI across platforms—moving things to the new Handler architecture is obviously the right way forward. Twelve golden tips and tricks from folks who likely see the most .NET MAUI code—this is high value to developers.

January XAML Fest

While .NET MAUI provides flexibility for .NET developers wanting to build cross-platform native mobile/desktop apps, the large majority of .NET MAUI developers will likely end up using C#/XAML to define app UI. There is good news for developers wanting to polish up their UI building skills—say hello to January XAML Fest by Leomaris Reyes, a month-long celebration dedicated to all things XAML in .NET MAUI. The goal of the special series is to delve deep into the world of UI design by replicating key portions of UI from renowned apps, and the last article is up—recreate the Instagram suggestion card UI in .NET MAUI.

With January XAML Fest, Leomaris has rolled out a collection of articles—each tackling a different piece of UI, breaking down the XAML code, and providing developers with a clear, concise guide to crafting such UI themselves. The Instagram suggestion card UI is a sleek and functional interface element that is a staple in modern mobile app design.

Leomaris starts by breaking down the original Instagram card UI into blocks that can be recreated, complete with everything needed to display the suggestions—frame, profile with rounded images and action buttons. With concise XAML and explanations every step of the way, Leomaris slowly builds up the Instagram suggestion card UI one block at a time with well-aligned text, mock data, images and buttons. There is plenty of UI inspiration for .NET MAUI developers. January XAML Fest was a festival of code and design, where developers were invited to celebrate, learn and enhance UI skills—thanks for the great series, Leomaris.

Dev Tunnels for Mobile Developers

Modern mobile apps do not live in silos—they are often partnered up with an API or a backend service for continuity of user experiences. During the development cycles, developers often encounter the issue of debugging the service locally on the machine, while the connecting mobile apps are running on emulators or physical devices—and machine boundaries can make communication difficult. The problem of accessing localhost from emulators/VMs/devices may soon be a thing of the past if the backend services are written on top of the ASP.NET stack, and James Montemagno wrote up an article—say hello to the game-changing Dev Tunnels.

Accessing services/web apps running as localhost on local machine has always been challenging from client apps running on emulators/VMs/devices. Dev Tunnels work by creating a unique URL that acts as a loopback to the local machine. This makes localhost accessible from the internet, thus making things reachable from emulators/VMs/devices or other machines.

Dev Tunnels are easy to set up through Visual Studio 2022 or CLI and support several authentication/authorization options. With accompanying videos and samples, James makes a strong case for using Dev Tunnels for .NET MAUI, web and cloud development—they can revolutionize development process efficiency, allowing for seamless testing, debugging and team collaboration.

Xamarin to .NET MAUI

.NET MAUI is the evolution of modern .NET cross-platform development stack, allowing developers to reach mobile and desktop form factors from single shared codebase. The present reality for many apps, however, may be Xamarin or Xamarin.Forms. A migration strategy is needed to move things forward. Lance McCarthy has been busy trying to migrate a sample Telerik app and joined an aging developer to share experiences on the .NET Dev Show—plotting migration of CRM app from Xamarin.Forms to .NET MAUI.

May 2024 is when official support runs out for Xamarin and Xamarin.Forms—now would be a great time to start the migration to .NET MAUI. The Telerik Art Gallery CRM app is a wonderful showcase app available in iOS/Android/Windows App Stores—written with Xamarin.Forms and source code up on GitHub. The reality for many migrations, unfortunately, is scope creep—it may be best to separate refactoring and feature fixes from the actual Xamarin to .NET MAUI upgrade.

The move forward may be a great time to inspect the need for certain legacy app features and plot migration of backend services with dependencies on older runtimes. Lance is scheduled for future episodes on the .NET Dev Show—should be a great series on migration tactics to move a real-world app from Xamarin to .NET MAUI.

That’s it for now.

We’ll see you next week with more awesome content relevant to .NET MAUI.

Cheers, developers!