Sands of MAUI: Issue #102

Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together 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.

Most .NET developers are excited with .NET Multi-platform App UI (.NET MAUI)—the evolution of modern .NET cross-platform developer experience. Going forward, developers will be empowered with .NET MAUI technology stack and tooling to build native cross-platform apps for mobile/desktop from single shared codebase.

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 knowledge 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 May 8, 2023:

.NET MAUI Community Standup

We're already in May, and the first Thursday of each month means celebration time for .NET MAUI developers—time for the .NET MAUI Community Standup.

Maddy Montaquila and David Ortinau hosted the Community Standup—the start always involves Maddy doing usual coverage of .NET MAUI blog content from Microsoft and the developer community. David covered some interesting Pull Requests and tooling updates—testing agents, Apple/Android CLI developer tools, badge counters, keyboard support and new design concepts for .NET MAUI branding. Developer community excitement remains palpable with .NET MAUI.

Next up in the .NET MAUI Community Standup was special guest Eilon Lipton, distinguished engineer on the .NET team, who talked about Javascript in .NET MAUI apps.

Blazor with .NET MAUI is a particularly good story—developers get to bring in Blazor goodness for web apps into native mobile/desktop apps, while sharing code and with complete native platform API access. The reality for many web developers is JavaScript, though, and Eilon has been tinkering with a HybridWebView experiment on top of .NET MAUI. The goal is enable JavaScript and .NET to seamlessly talk to each other—envision bringing in Angular/React or other JS-based web app content within .NET MAUI.

JS/.NET Interop is wonderful and this story will get more flushed out over time—more flexibility for developers.

Mobile Development in VS Code

Developers have several choices as to how they build .NET MAUI apps—could be Command Line or Visual Studio on either Windows or macOS. Visual Studio Code, however, is the uber-popular light weight cross-platform code editor, and developers have wanted their love for VS Code to continue on to .NET MAUI development. CLI tools for .NET MAUI can bootstrap projects that VS Code can open, and the Comet Extension has helped in the past.

Now, there is new light on the horizon and it comes from the wonderful folks who build Uno Platform. Say hello to developer productivity with mobile development in VS Code with Uno Platform or .NET MAUI.

.NET mobile development is welcome in VS Code, thanks to new features in Uno Platform extension for Visual Studio Code. With mobile targets in the Uno Platform VS Code Extension, developers can now set breakpoints, hit conditional breakpoints, see exceptions, log results and inspect variables. Perhaps it is testament to the openness of the .NET ecosystem—tooling that's meant for Uno Platform also works for .NET MAUI.

The Uno Platform Extension for VS Code caters to various target platforms and supports XAML code completions. XAML Hot Reload is built-in and allows for full mobile debugging. With productivity comparable to a fully-fledged IDE such as Visual Studio, the Uno Platform Extension for VS Code brings true mobile development chops to beloved VS Code—kudos, folks.

A11Y with .NET MAUI

Modern apps demand Accessibility (A11Y)—inclusive experiences allow apps to reach larger and more engaged audiences. The Web Content Accessibility Guidelines (WCAG) is the global accessibility standard for the web and mobile devices that describes different ways in which apps can be made more perceptible, operable, understandable and robust in catering to user needs.

Thankfully, .NET MAUI developers do not need to implement A11Y on their own since much of it is built right in and Leomaris Reyes wrote up a wonderful piece—creating accessible apps with Semantic Properties in .NET MAUI.

.NET MAUI supports two types of accessibility approaches—semantics and automation properties. While automation properties are inherited from Xamarin.Forms, semantic properties are the ones recommended by .NET MAUI for accessibility support going forward.

Semantics are attached properties that help us to define and read aloud to the user information about the visual elements that receive the accessibility focus. Semantics can be added to any visual element to configure the accessibility APIs of the underlying platform—the abstracted accessibility experience honors what's provided by default in each supported platform.

Leomaris carefully breaks down all aspects of Semantic properties supported in .NET MAUI—developers have the option of setting Description, Hint and HeadingLevel, as well as controlling how parent-child control relationships impact the accessibility tree.

With .NET MAUI, developers do not have much excuse to not support accessibility in modern mobile/desktop apps—it's the right thing to do and makes business sense.

YouTube Stats with .NET MAUI

The world runs on YouTube. With never-ending content on any topic of choice, including plenty on .NET MAUI, most of us are in consumption mode when on YouTube. There are a handful who dare to be content creators, and for them, YouTube numbers matter.

Wouldn't it be cool if there was a cross-platform app that made sense of YouTube statistics? Daniel Hindrikes has recently started the journey of building YouStats from scratch and produced the first video—building an app with .NET MAUI and Telerik UI components.

Daniel begins with the app idea and an explanation of what's offered in the Telerik UI for .NET MAUI suite—a collection of performant customizable .NET MAUI UI components that work seamlessly everywhere. Like most mobile/desktop apps, YouStats would need bind to and display a ton of data—the popular Telerik DataGrid component is the perfect UI fit.

Daniel starts out building the core of the app, which would hit YouTube APIs to bring down the collection of videos for a given content creator, along with metrics for each video's content. Once the data is pulled down, Daniel expertly uses the Telerik Grid to bind and style the video collection, with customizable columns and catering experience on mobile vs desktop form factors.

With a custom header and built-in sorting and filtering, the grid helps Daniel display the collection of all his uploaded videos along with metrics—crisp UX showcasing the versatility of .NET MAUI and Telerik UI across platforms. Cheers for the rest of the series, Daniel!

Chilling in MAUI Workshop

.NET MAUI developers now enjoy a rich ecosystem—wide platform reach, stable tooling, solid documentation and healthy collection of UI components to light up apps with. It is nice, however, to sometimes watch another developer go through the paces of .NET MAUI development—seeing is believing, as they say. That was goal when a struggling developer raised hand to run a virtual session on real world .NET MAUI development—the chilling in MAUI workshop.

The point of the .NET MAUI workshop was to go from nothing to success—build some basic app artifacts common to many apps. Starting from scratch, the three hour workshop explored the developer experience with .NET MAUI to begin the journey of building awesome apps.

Once developers understand the promise of .NET MAUI, the first step is to get all the needed tooling on Windows/macOS and start a new cross-platform project—.NET MAUI's single project system truly shines in sharing code/resources. Often, "Hello World" mobile apps involve pulling down JSON data from a RESTful cloud service and binding the collection to some UI—it was nice to have fellow developers follow along on the journey. Real-world .NET MAUI app development also benefits from polished performant UI components—Telerik UI for .NET MAUI can help.

The workshop then explored the promise of Blazor Hybrid apps—bringing Blazor web goodness into .NET MAUI apps and pulling off some very native functionality on mobile/desktop. Developers now have a lot of ammunition to go build wonderful experiences with .NET MAUI—let's go change the world.

That's it for now.

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

Cheers, developers!