Sands of MAUI: Issue #166

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 & 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 November 4, 2024:

Web Native Code Sharing

While .NET MAUI is squarely meant for developers to build native mobile/desktop apps, armed with modern smart WebViews, .NET MAUI is more than capable of welcoming web content to native land. In fact, Blazor/JavaScript developers should feel empowered to bring web UI components, routing, styling and more to native cross-platform .NET MAUI apps, while gaining complete native platform API access. With .NET 9, there is good news for developers wanting to share code between web/native apps and Héctor Pérez wrote up a wonderful article—deep dive into the new .NET MAUI Blazor Hybrid and Web app solution template.

The simple goal with the new .NET 9 template is better code sharing between .NET MAUI and Blazor—web UI components and styles can power the same experiences on web apps, as well as, cross-platform mobile/desktop apps. Héctor does a walk-through of the developer experience with the new template—the key is the shared library between Blazor/.NET MAUI apps that houses all the shared UI/styles across platforms. The template also points developers to a preferred way of catering to web/native experiences—common Interfaces can have varied implementations for Blazor/.NET MAUI worlds.

To drive home the point of shared UI, Héctor creates a Flux generator Blazor component in the Shared project—a wonderful way to generate images through AI and render using Telerik Blazor UI, like Loader and Card. With a little configuration, the shared Blazor image generator component works seamlessly across web and native apps—a masterclass in how developers can drive nuanced experiences through shared code.

Image Loading State

.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. Most modern apps leverage imagery extensively for good-looking UI, but handling images across platforms can be tricky. Images are often being pulled down from remote sources and UX can suffer if developers are not careful. Thankfully, there is help for .NET MAUI developers and Victor Hugo Garcia wrote up an article—handling loading state for images in .NET MAUI.

When app images are being fetched and displayed in .NET MAUI for iOS/Android/Windows/macOS platforms, implementing a loading indicator can enhance the UX by keeping users informed. Leveraging Control Reference Bindings, developers can create apps that feel smooth and responsive, even when dealing with heavy image loading tasks.

Victor follows up the promise with a simple code implementation. It showcases the use of IsLoading property of the Image control and works seamlessly for images in any container layout. Implementing a loading indicator for images in .NET MAUI apps can greatly enhance the UX by providing visual feedback during image loading—good pointers for developers to take note of.

Visual Studio Productivity

.NET MAUI is the evolution of modern .NET cross-platform development stack, allowing developers to reach mobile and desktop form factors from a single shared codebase. One of the most common tools used by .NET MAUI developers is obviously Visual Studio—a rich IDE that is constantly evolving for better developer productivity. There is good news for developers using latest Visual Studio, and Leomaris Reyes wrote up a wonderful post—spell checker and colorization braces in Visual Studio 2022.

Visual Studio 2022 now has a built-in Spell Checker—this is to catch normal spelling errors in code/comments. Leomaris walks through how .NET MAUI developers can enable the Spell Checker in Visual Studio and the corresponding developer experience—errors are easy to spot and fix.

Braces are commonly used to isolate blocks of code, but longer code files end up having lots of blocks. To help out developers, Visual Studio 2022 starting with version 17.6 now includes brace pair colorization—the perfect way to match starting/closing braces. Leomaris shows how to enable brace pair colorization in Visual Studio. The result is perfectly paired braces shown clearly with color coding.

Visual Studio continues to make .NET developers more productive—time to return the favor with some wonderful code.

GitHub Copilot Workings

It is the age of artificial intelligence (AI). AI is slowly changing the way we live and work, and AI’s popularity is driving adoption in enterprise and consumer apps. AI presents a huge opportunity for .NET developers to infuse apps with solutions powered by generative AI and large language models (LLMs), as well as boost developer productivity. GitHub Copilot has earned developer trust as a coding assistant, and Anson Horton wrote up an article to provide an inside look at how things work—how GitHub Copilot is built into Visual Studio.

AI is nascent and rapidly evolving—there aren’t paved paths to success to boost developer productivity within Visual Studio. Anson takes readers on a history lesson—the AI integration journey in Visual Studio started with IntelliCode announced at Build 2018. While not a modern LLM, IntelliCode was powered by small models that were nimble and provided plenty of features, like starred suggestions, whole line completions and repeated edits. With the advent of GitHub Copilot as a VS Code Extension and then integrated within Visual Studio, we see the switch to using OpenAI Codex model, which was a GPT-3 language model additionally trained on gigabytes of source code in a variety of programming languages.

Anson delves into some internal workings—while GitHub Copilot workings started as a Node-based agent, modern day architectures leverage .NET processes for communicating with Copilot APIs powered latest GPT models. A lot is sure to evolve with GitHub Copilot integration within Visual Studio in the coming years—AI is here to boost developer productivity.

Designer-Developer Collaboration

Modern web, mobile and desktop apps often strive for delightful UX, and beautifully styled UI design is one way to achieve the goal. However, there has traditionally been some friction in the designer-developer handoff—workflows should be smoother and tooling should help more. A global survey was ran this summer to shed light on the way designers and developers work together and the results just got published with Nora Petrova writing up the announcement—say hello to the State of Designer-Developer Collaboration Survey 2024.

The survey represents professionals working in both design and development roles, plus other stakeholders in the designer-developer handoff. The respondents come from 50 countries, work in 20 major industry categories and are employed in businesses ranging from one-person shops to small and medium-sized companies, and enterprises with 5,000+ employees.

The survey results are detailed and insightful, with fascinating cross-sections that highlight progress, but pain points linger in the designer-developer handoff that demand resolution. While design systems and tooling often work with web apps first, modern cross-platform mobile/desktop apps could benefit from design thinking—and understanding the nuances of designer-developer collaboration survey is definitely a step in the right direction.

That’s it for now.

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

Cheers, developers!