Sands of MAUI: Issue #109

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 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 June 26, 2023:

Saving Files with Toolkit

Modern mobile/desktop apps often deal with writing files to disk, but developer perception suggests that this is often tricky. Saving a file to disk comes down to platform implementations, and there are obviously differences between Windows/macOS, as well as iOS/Android—this can be tedious for developers. Thankfully, .NET MAUI developers do not have to worry about file saving implementations across platforms and Leomaris Reyes wrote up an article—saving files with .NET MAUI Community Toolkit.

Leomaris begins with how developers can started with the .NET MAUI Community Toolkit and the needed platform settings in Android/Tizen for saving files—no additional configurations needed for iOS/MacCatalyst/Windows. Developers can bring in the FileSaver API through dependency injection and the SaveAsync() method does it all, with parameters controlling how the file saver works. Developers have control over exactly how files get written out to specified disk paths with user consent and have full API visibility into the file saving operation. No more need for .NET MAUI developers to think about file saving—seamless cross platform implementation is ready with .NET MAUI Community Toolkit.

UI for Better Apps

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 fifth video—building an app with .NET MAUI and Telerik UI components.

Daniel gets straight to the point—his .NET MAUI YouStats app could look a whole lot better with help from a few polished UI components. There are a few UI controls in Telerik UI for .NET MAUI that have universal appeal in modern mobile/desktop apps—they have ubiquitous usage needs and simply make apps look better.

Daniel showcases use of five hard-hitting UI components—Accordian, BusyIndicator, Popup, Border and Badge. Each of the controls help elevate everyday UX paradigms with pixel-perfect rendering and helps in better organization of app content, while keeping the user engaged. Daniel shows off the versatility of .NET MAUI with crisp Telerik UI—developers have a lot of support to light up delightful UX in mobile/desktop apps.

Authentication with Okta

For any serious mobile/desktop app, user authentication is often the first step before using the app/services—it's the way to know whether the user is indeed who they say they are. User authentication can be messy business, though—the security stakes are high and the threat landscape is always changing. Developers are almost always better off letting users authenticate through established identity services—this is good for security, since the app developer does not need to work with sensitive user credentials to control access to app functionality.

Thankfully, .NET MAUI developers have established tools/services to pull off user authentication and Laura Rodríguez from Okta wrote up an article—adding authentication to .NET MAUI apps with Okta.

Laura starts out with a fresh .NET MAUI template app and walks through the process of adding user authentication through Okta—the Okta CLI helps in creating, registering and configuring apps. Developers need to work with an OpenID Connect client that abstracts away the tedious communications—reading configurations, setting up callbacks and managing the user authentication flow.

Laura adds sign in/out functionality to the .NET MAUI app along with platform specific settings, before showing user authentication working end to end—source code is open sourced as well. Cheers.

Telerik Blazor UI

.NET developers have understandably been excited about Blazor—a modern web framework allowing for C# code front and back. Blazor can run server-side or entirely client-side with WebAssembly, and the Blazor component/rendering model inspires confidence with stability and extensibility.

Telerik UI for Blazor is all about elevating Blazor web apps with polished performant components—100+ UI controls that are customizable and highly performance tuned. With design system integration, REPL playground and solid tooling/documentation, it's easy to see why .NET web developers love Telerik UI for Blazor.

Could Telerik UI for Blazor web goodness have any play inside native mobile/desktop apps? Blazor Hybrid promises to bring Blazor UI rendering and reuse of components/styles/routes inside native mobile/desktop apps—modern webviews on each platform can help. With the second big Telerik release of the year, there is now full support for Telerik UI for Blazor in Blazor Hybrid apps—every single Telerik Blazor UI component meant for web apps now works inside native mobile/desktop apps.

Be it .NET MAUI cross-platform apps or WinForms/WPF apps, Telerik Blazor UI can now light up native apps with full UI richness and official support. Code sharing between web and native apps is a wonderful way for developers to be productive—Telerik Blazor UI components now have broad reach across browsers and devices.

MVVM Architecture

The Model-View-ViewModel (MVVM) design pattern ensures a well-defined separation between software layers—the View representing the XAML user interface; the Model encompassing the underlying data and the ViewModel serving as the intermediary between the other two. MVVM has always been a popular design pattern for C#/XAML based codebases and .NET MAUI is no exception—the .NET MAUI MVVM toolkit further aids in developer productivity.

Coding Droplets produced a wonderful video for those new to MVVM or needing a refresher—deep dive into MVVM architecture with .NET MAUI.

The goal with MVVM design pattern is to build robust and maintainable applications, with clear separation of concerns that are easily testable. The comprehensive .NET MAUI MVVM tutorial delves into all aspects of MVVM implementations for .NET MAUI developers—powerful two-way data binding, INotifyPropertyChanged interface, Commands and the impressive CommunityToolkit.Mvvm library.

With a thorough explanation of MVVM design concepts and easy walkthrough of MVVM pattern implementations inside .NET MAUI apps, Coding Droplets has produced a transformative video for any developers interested in better understanding/working with MVVM. Kudos.

That's it for now.

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

Cheers, developers!