“Write once, run anywhere" – this slogan helped Java achieve widespread popularity in the mid-1990s. Since then, many cross-platform frameworks have been introduced, such as Ionic, Flutter, and of course .NET MAUI. These frameworks allow developers to use the same code regardless of the underlying operating system/device type. While using a single UI framework may save time/resources, the effectiveness and efficiency of this development strategy depends entirely on app complexity and UX requirements.
An alternative technique to a cross-platform app is to share business logic and services but use different UI frameworks based on device type (desktop/mobile). With this strategy, you will share less UI code, but use the inherent benefits/advantages of each platform to craft high-quality interfaces (and of course deliver the best possible user experience across platforms/devices).
Download Example
Single UI Project: Advantages and Challenges
A fully cross-platform interface can help dev teams reduce development costs and time-to-market. For instance, a single page created using Blazor can be used in web, desktop and mobile apps via Blazor Hybrid. And this is not just a WebView wrapper for web components: it allows you to run code in the .NET environment while accessing device capabilities. This strategy can improve team productivity, because you can share code and expertise.
Another rapidly evolving cross-platform framework is .NET MAUI. It was designed to support different device types (desktop, mobile, tablet). The framework includes useful features designed to share code between different targets:
- Project Structure: Unlike Xamarin, .NET MAUI incorporates all cross-platform code in a single project.
- Device-specific customization: Adaptive layout XAML extensions allow you to update control properties based on device and operating system type.
- Native UI elements: Under the hood, .NET components are converted into native OS-specific elements, ensuring a device-specific user experience.
These core features can help you create apps with a single codebase targeted to different devices. You can find a sample app demonstrating .NET MAUI's cross-platform capabilities in the following repository (created by the Microsoft team): Weather '21.
Here is an example of how to specify different layouts for phone and desktop devices (one column for a phone and two columns for a desktop):
<Grid ColumnDefinitions="{OnIdiom Phone='*', Desktop='*,500'}" ... >
This technique works great for relatively simple apps. However, business applications often require more sophisticated device-specific alterations. For example, the desktop client may include complex views with a Ribbon and Docking. These controls are typically replaced by other elements on mobile devices.
Moreover, the entire user flow may differ significantly on a phone. For instance, in-place cell editing is common for desktop apps, however for mobile devices you may prefer to display detail and editing screens separately. You can find this pattern in many applications on your phone (such as Contacts).
The following images illustrate a few examples where it may be challenging to create a single UI code base:
When there's a significant difference between desired desktop and mobile interfaces, creating numerous device-specific triggers may quickly complicate your code (making it hard to develop and maintain).
Apps with Device-Specific UI Frameworks
Using a single UI platform provides more opportunities for code sharing, however it's challenging to leverage these benefits when working on applications with a complex interface. If you are developing such an app, you may want to use separate UI frameworks for different client types and reuse non-visual code. This allows you to take advantage of each platform and still share quite a bit of code.
In the illustration above, client apps are implemented using different UI frameworks, while both clients use common services, business logic and server-side modules. Based on your preferences, you can either implement all server logic as a single service or create a microservices infrastructure.
On the client side, you can select the platforms best suited for your application:
- WPF and WinForms (both very mature platforms) offer you a variety of important features and capabilities for rich desktop user experiences.
- Lightweight .NET MAUI will allow you to create an application with a mobile centric UX for Android and iOS.
Since WPF, WinForms and MAUI are .NET - based, you can easily reuse client-side services, helpers and model classes. The key to more code sharing is a loosely coupled architecture when modules can be isolated from each other. The MVVM design pattern will help you decouple your views from view models and easily introduce external dependencies using Dependency Injection.
If you pursue this strategy, your project structure may look as follows:
- Client.Shared - client-side services, common helpers.
- DataModel - a model for database objects.
- DesktopClient - WPF/WinForms application
- MobileClient - .NET MAUI application
- WebApiService - a web service that incorporates business logic and handles access to a database. Note: You can utilize our free Web API Service to implement server-side security and role-based data access.
If you'd like to explore the potential of this strategy, download our sample application at GitHub: WPF & .NET MAUI - Share Code Between Desktop and Mobile Projects
Our
Cross-Platform .NET App UI (XAF) is based on a similar idea and has demonstrated its effectiveness for over 15 years. Data processing, security, business logic, and other shared modules are designed as view-agnostic blocks. When introducing a new visual client, you can easily reuse most of your code.
Below, you'll find insights from Paul Usher (Business Solutions Architect and DevExpress Evangelist, experienced in Xamarin and .NET MAUI, as well as native iOS & Android):
There is so much more freedom in separating mobile platforms from desktop. Given your data layer and business logic should be their own seperate projects it makes sense to concentrate development efforts on iOS and Android delivering specific goals for mobile use. The Desktop interface can then be designed specifically to optimise the features required. Typically a mobile version of an application contains less functionality but geared towards more practical "in your hand" usage, whereas the desktop version provides a much deeper, richer user experience utilizing more screen realestate, multiple complex components on screen at the same time.
Summary
Choosing the best possible UI framework for a given platform is crucial as it shapes the development process, user experience, and ultimately, the success of the project. A unified cross-platform UI can be an effective solution for simpler applications, Minimum Viable Products (MVPs), or when user experience excellence for a secondary device isn’t the primary concern.
For more complex applications, the potential for sharing UI code can be limited due to the significant differences in user flow for desktop and mobile devices. By separating visual clients and leveraging advantages of each UI platform you can develop high-impact apps that cater to user needs with laser-like precision. A loosely coupled architecture not only allows for extensive code reuse but also ensures that the code remains clean, maintainable, and testable.
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.