Web developers

What .NET MAUI can do for front-end and web developers

Let’s say you have a great web app – it works well in the browser, but for some reason the client wants an app that will be mobile-native or desktop-native.

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

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

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

  • Write cross-platform applications 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 it fails to mention is that .NET MAUI will allow front-end and web developers to turn their web apps into a near-metal desktop or mobile app that can run on Windows or Mac, explained Sam Basu, a senior developer. lawyer 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 since “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 high performance UI, so developers don’t have to hard code the entire UI. His Telerik DevCraft includes libraries and tools for .NET MAUI.

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

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

“For businesses, it’s difficult because now you have to maintain three different codebases to one application,” he said. “So ideally today we’re looking at cross-platform solutions where I can have one thing that works everywhere.”

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

Bringing the .NET and JavaScript worlds together

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

“It uses a little thing called the web view, which is basically a component of the browser,” he said. “If you have investments in JavaScript or any other modern website that you do with Angular or React or Vue, now they can all come to work on desktop and mobile as well.”

Although there are already single-page frameworks for converting web applications to mobile applications, these options do not allow developers to exploit some of the native functions of a mobile platform, such as the camera or your phone’s accelerometer, for example. Additionally, single-page framework apps aren’t always allowed in app stores, he added, which can limit app exposure.

“You’re not in app stores and you don’t have access to all devices, things like camera, geolocation, accelerometer, all of our device APIs,” he said. declared. “It’s 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 application and bundle it into a desktop or mobile application with a performance-optimized runtime because it allows developers to choose what the application needs and to group it only with the application.

“The runtime is really tailored to the application and the specifics of .NET it’s using, so it only gives you what you need. So that’s how they stay small,” Basu said.

By using .NET MAUI, the code will bundle most of what is needed from the web application, but the code is coupled to run faster. By comparison, Electron bundles everything – HTML, CSS, JavaScript – all web assets into a shell with Node.js as its runtime, he explained. He pointed to Slack and other Electron apps, adding that Electron is battle-tested but can be heavy.

“Electron gives you deep access to do stuff on the desktop, which you might not need. An Electron on mobile doesn’t work very well because it’s a big bundle of apps. Electron is mostly intended for desktop computers,” 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 rely on .NET to start our application,” Basu explained. “Since we don’t support the browser component, since we don’t support the runtime, it’s just a bit lighter and it loads faster. As long as you have a browser on your device via mobile or desktop , everything should be fine.

How .NET MAUI differs from alternatives

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

“These are platforms that will allow developers to write web stuff and then turn around and write a native mobile app,” he said. “For .NET developers, it’s much easier.”

It also differs from Flutter in several ways, as detailed by Vince Giacoppo, technical project manager at developer recruitment agency Protovate. Giacoppo noted that .NET MAUI does not support the 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 warned.

“We’ve got companies and companies taking it and treating it as a way to write their next cross-platform app,” he said.

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

Band Created with Sketch.