Share Code Across Desktop, Web, and Mobile Apps
- 5 minutes to read
Sharing code across development platforms is highly effective when you make proper architectural and design choices. When building applications with complex UIs, it can be challenging to achieve a balance between leveraging shared code and providing a personalized user experience.
Although using a single UI framework simplifies code sharing, separate UI frameworks offer the flexibility needed for device-specific optimization. By separating concerns and sharing code (for example, business logic, service integration, data access, and models), developers can maintain efficiency while delivering consistent, platform-optimized, and maintainable applications.
The Challenge with Complex Interfaces
Applications with complex UIs often have distinct requirements based on device type.
- WinForms/WPF Apps
- Require rich, data-intensive interfaces optimized for keyboards and large screens.
- Web Apps
- Require responsive designs with fast load times and support for various browsers.
- Mobile Apps
- Prioritize touch-friendly designs and efficient performance on mobile devices.
Benefits of Device-Specific UI Frameworks
Platform-specific UI frameworks allow you to do the following:
- Leverage platform strengths (for example, native controls for mobile (.NET MAUI), feature-rich data grids for desktop (WinForms/WPF), and responsive UI components for web (Blazor/ASP.NET Core)).
- Design optimized user experiences.
- Maintain consistent functionality through shared code.
Share and Reuse Code Across Platforms
The following diagram illustrates a client-server architecture that emphasizes shared services and platform-specific UI frameworks for different client types. This architecture consolidates common functions into common services to maximize code reuse.
Our sample application shares codebase across desktop (WinForms/WPF) and mobile (.NET MAUI) UI clients. The application displays orders loaded from a Web service and allows users to generate a report.
Project Structure
- Client.Shared
- Shared client-side API services and classes.
- DataModel
- A shared data model powered by Entity Framework Core.
- WebApiService
- A web service that incorporates business logic and manages access to a database.
- DesktopClient
- A WPF desktop application.
- WinFormsDesktopClient
- A Windows Forms desktop application.
- MobileClient
- A .NET MAUI mobile application.
Tip
You can utilize our free Web API Service to implement server-side security and role-based data access.
Shared API Service
A central API service handles communication with your backend, ensuring that all platforms interact with your server using the same logic.
public class OrderDataService : IOrderDataService {
readonly HttpClient client;
public OrderDataService(HttpClient httpClient) {
client = httpClient;
}
public async Task<List<Order>> GetOrdersAsync() {
List<Order> orders = null;
try {
HttpResponseMessage response = await client.GetAsync(“api/Orders”);
if (response.IsSuccessStatusCode) {
orders = await response.Content.ReadAsAsync<List<Order>>();
}
}
catch (Exception) {
}
return orders;
}
}
public interface IOrderDataService {
Task<List<Order>> GetOrdersAsync();
}
Tip
Add the service to Dependency Injection (DI) containers on all platforms to reuse the same logic.
Shared Data Model
Use a shared data model powered by an ORM (for example, Entity Framework Core or XPO) to manage data consistency across platforms.
// Define a shared entity class.
// Use this class in WinForms, Web, and mobile apps to interact with the database
// through a shared DbContext or unit-of-work.
public class OrderItem {
public int Id { get; set; }
public int Quantity { get; set; }
public virtual Order Order { get; set; }
public virtual Product Product { get; set; }
public decimal Amount {
get { return (Product != null) ? (Quantity * Product.UnitPrice) : 0; }
}
}
Shared Web API Service
Use a shared Web API service to retrieve orders from a database through Entity Framework Core:
public class OrdersController : ControllerBase {
//…
[HttpGet]
public async Task<ActionResult<IEnumerable<Order>>> GetOrders() {
return await _context.Orders.Include(order => order.Customer)
.Include(order => order.Items)
.ThenInclude(orderItem => orderItem.Product)
.ToListAsync();
}
}
Hybrid Project Templates
The DevExpress cross-IDE Template Kit for .NET includes project templates designed to streamline hybrid application development. You can create a desktop application that integrates responsive JavaScript or Blazor components. You can also prototype a shared WinForms & .NET MAUI application that runs seamlessly across multiple platforms.
Hybrid project templates include:
- Shared WinForms & .NET MAUI Application
- Creates both desktop (WinForms) and mobile (.NET MAUI for iOS/Android) applications with a shared presentation and data layer(entity model, business logic, and data service). The application supports Dependency Injection and MVVM architectural patterns.
- Blazor Hybrid WinForms Application
- Creates a hybrid desktop (WinForms) application with a BlazorWebView-powered form and DevExpress themes/styles. The application supports Dependency Injection and integrates the DevExpress Blazor Grid (requires a subscription that includes Blazor UI components).
- JavaScript Hybrid WinForms Application
- Creates a hybrid desktop (WinForms) application with a WebView2-powered form and DevExpress themes/styles. The application supports Dependency Injection and integrates the DevExtreme JavaScript HTML Editor (requires a subscription that includes DevExtreme).
- HTML Hybrid WinForms Application
- Creates a hybrid desktop (WinForms) application with a list and detail forms powered by the DevExpress HTML & CSS engine and reusable UI Templates. The rendering and templating engines allow you to make advanced UI customizations in HTML format, and customize the appearance of UI elements using CSS styles (size, padding, and layout options).
- OData-based Application
- Creates a desktop (WinForms) application with a secure data layer powered by ASP.NET Core OData, EF Core, and XAF’s Backend Web API Service (requires the Universal subscription). With this additional layer of protection (authentication, authorization, and encryption), desktop UI clients cannot access database connection information or modify database tables directly.
- MVVM Application
- Creates a desktop (WinForms) application with a separate presentation layer, entity model, and business logic. The application supports Dependency Injection, MVVM, and Repository architectural patterns. MVVM integration is powered by the DevExpress MVVM Framework or Microsoft CommunityToolkit.Mvvm.
Read the following help topic for additional information: Template Kit for WinForms.