What .NET MAUI Can Do for Frontend and Web Developers

Let’s say you have a great web application — it runs well in the browser, but for some reason, the customer wants an app that will be mobile native or desktop native.

Enter .NET MAUI, which stands for .NET Multiplatform App UI. It’s a cross-platform framework for creating native mobile and desktop apps with C# and XAML.

Microsoft calls it the “next evolution of Microsoft’s Xamarin.” It has a lot in common with Flutter, the cross-platform, open source UI software development kit created by Google that supports applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase.

Microsoft specifies that .NET MAUI is for developers who want to:

  • Write cross-platform apps in XAML and C#, from a single shared code-base in Visual Studio.
  • Share UI layout and design across platforms.
  • Share code, tests, and business logic across platforms.

But what that neglects to mention is that .NET MAUI will allow frontend and web developers to turn their web apps into a close-to-the-metal mobile or desktop app that can run on Windows or Mac, explained Sam Basu, a senior developer advocate at Progress Software and host of .NET Dev Show on Twitch. Linux is not yet supported by the .NET MAUI.

Progress has worked with .NET MAUI and Microsoft from “day zero,” Basu said, and has used .NET MAUI to build apps in the iOS and Android App Store. What Progress provides with .NET MAUI is a polished performance UI, so that developers don’t have to hardcode all of the UI. Its Telerik DevCraft includes libraries and tools for .NET MAUI.

“If you have a need from your customers where they want to see the same experience on desktop or on mobile, then this is an easy way out; and also for developers to not reinvent the wheel and come up with a whole new UI and a whole new experience,” Basu told TNS last week at Progress Software’s developer conference, Progress 360.

A native app has native UI, native performance to ensure speed, and native access to all of the device API’s, he said. For Apple products, being native means the app is in Swift or Objective C; for Android, it means Java or Kotlin. Of course, with Windows, it means .NET, he explained.

“For enterprises, it is hard because you have to now maintain three different code bases towards a single app,” he said. “So, ideally, nowadays we are looking for cross-platform solutions where I can have a single thing that runs everywhere.”

In addition to converting apps for Windows, .NET MAUI leverages Mac Catalyst for the ability to convert apps to the iOS.

Bringing .NET and JavaScript Worlds Closer

What .NET MAUI does is bring the worlds of .NET and JavaScript a little closer together, he added.

“It uses a small little thing called the web view, which is essentially a browser component,” he said. ”If you have investments in JavaScript or anything modern web that you’re doing with Angular or React or Vue, they can all now come and work on desktop and mobile as well.”

While there are single-page frameworks already for converting web apps to mobile apps, these options don’t allow developers to tap into some of the native functions of a mobile platform — like the camera or accelerometer on your phone, for instance. Also, single-page framework apps aren’t always allowed in application stores, he added, which can limit the apps exposure.

“You are not in the application stores, and you don’t have access to all of the device, things like you know camera, geolocation, accelerometer, all of our device APIs,” he said. “That is something you get from .NET MAUI, pretty much free.”

With JavaScript, it’s still in a web shell, he added. .NET MAIU allows developers to take an Angular or React app and bundle it into a desktop or mobile app with a runtime optimized for performance, because it allows developers to pick and choose what the application needs and only bundle that with the app.

“The runtime is really catered to the application and the specific things about .NET that it uses, so it’s only giving you what you need. So that’s how they keep it small,” Basu said.

By using .NET MAUI, the code will bundle up the essence of what’s needed from the web app but the code is paired down to run faster. By comparison, Electron packages up everything — HTML, CSS, JavaScript — all of the web assets into a shell with Node.js as the runtime, he explained. He pointed to Slack and other Electron apps, adding that Electron is battle-tested but it can be heavy-handed.

“Electron gives you deep access to do things on desktop, which you might not need. An electron on mobile doesn’t really work all that well, because it’s a big app package. Electron is mostly meant for desktop,” he said.

With .NET MAUI, the conversion doesn’t leave the app dependent on Node.js, allowing it to create a more native experience with a smaller footprint.

“We can just depend on .NET to bootstrap our app,” Basu explained. “Since we are not backing the browser component, since we are not backing the runtime, it’s just a little bit lighter weight, and it loads up faster. As long as you have a browser on your device via mobile or desktop, you should be good.”

How .NET MAUI Differs from Alternatives

Other options include using React Native and NativeScript, he added.

“These are platforms that will let developers write web things, and then eventually turn around and write a native mobile app,” he said. “For .NET developers, this is much easier.”

It also differs from Flutter in a few ways, as detailed by Vince Giacoppo, technical project manage at developer staffing agency Protovate. Giacoppo noted that .NET MAUI does not support web but “developers can use the Blazor framework to provide a bridge to use MAUI resources. ”

It’s still early days for .NET MAUI, Basu cautioned.

“We have enterprises and companies who are picking it up and treating this as a way of writing their next cross-platform app,” he said.

Disclosure: Progress Software paid for Loraine Lawson to attend its conference in Boston.

group Created with Sketch.

Leave a Comment

%d bloggers like this: