Nevron Logo

Porting existing Desktop WinForm and WPF applications to the Web (Blazor WebAssembly)

Porting existing Desktop WinForm and WPF applications to the Web (Blazor WebAssembly)

Introduction

Porting existing WinForms, WPF, and Xamarin.Mac desktop applications to the Web used to be very hard and expensive. Because of the difficulties involved in the porting process, most of the existing desktop applications never make it to the Web. The ones that are successfully ported, are often completely rewritten, which often makes the desktop version obsolete or poses additional efforts for its long-term support. In this article, we examine the different approaches a company may choose to port its existing applications to the Web. We also present the Blazor-WebAssembly and Nevron Open Vision for .NET (NOV) as a viable solution for porting existing WinForms, WPF, and Xamarin.Mac desktop applications to the Web. The proposed porting solution retains a fully-functional desktop version, produces a feature-rich Web version, and leverages the current qualification of your existing team - while at the same time keeping a low porting cost and risk.

Used Technologies

Before we examine the different porting approaches, let's first introduce the involved technologies that are mentioned in the article.

3-tier Application Architecture (DataBase, Application, UI)
The three-tier Application Architecture organizes the application into three logical and physical computing tiers:
  1. Presentation tier (User Interface)
  2. The presentation tier is the user interface of the application. Its main purpose is to provide communication with the user. The UI of the application often consists of common UI elements such as buttons, grids, charts, etc. The UI of the application mainly interacts with the Application tier.
  3. Application tier (Business Logic or where data is processed)
  4. The application tier, also known as the logic tier or middle tier, is the heart of the application. In this tier, information collected in the presentation tier is processed - sometimes against other information in the data tier - using business logic, a specific set of business rules. The application tier can also add, delete or modify data in the data tier.
  5. Data tier
  6. This the where the information is stored and managed. This can be a relational database, cloud resource, or a simple file. In a three-tier application, all communication goes through the application tier. The presentation tier and the data tier cannot communicate directly with one another.

Blazor - WebAssembly
Blazor – WebAssembly is a Microsoft technology that lets you run C# code on the client side (i.e. inside the Web Browser). To do so it relies on WebAssembly, which is a W3C standard and is supported by all major browsers (Google Chrome, Microsoft Edge (formerly Internet Explorer), Mozilla Firefox, and Apple's Safari). Blazor – WebAssembly also makes it possible to call JavaScript code from your C# code and vice versa - which is how Blazor – WebAssembly communicates with the browser.

Nevron Open Vision for .NET (NOV)
Nevron Open Vision for .NET (NOV) is a Nevron Software LLC technology that allows you to develop cross-platform User Interfaces that can operate inside various Microsoft UI technologies like WinForms, WPF, Xamarin.Mac and Blazor WebAssembly.

WinForms
Windows Forms (WinForms) is a UI framework for building Windows desktop applications. It is a .NET wrapper over Windows user interface libraries, such as User32 and GDI+. It also offers controls and other functionality that is unique to Windows Forms.

WPF
Windows Presentation Foundation (WPF) is a UI framework for building Windows desktop applications. WPF supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding and documents. WPF uses the Extensible Application Markup Language (XAML) to provide a declarative model for application programming.

Xamarin.Mac
Xamarin lets you develop fully native Mac apps in C# and .NET using the very same macOS APIs as you would for Objective-C or Swift projects. You can either create your user interfaces directly in C# code, or, thanks to Xamarin's direct integration with Xcode, you can use Xcode's Interface Builder.

Approaches for Porting Existing WinForm, WPF and Xamarin.Mac applications to the Web

Complete Rewrite to JavaScript/HTML


Before the introduction of WebAssembly, this used to be the only possible porting option. It involves a complete rewrite of the existing C# code to JavaScript (Application Tier) and a complete rewrite of the Presentation Tier to an HTML-based UI. The following table outlines the pros and cons of this approach:

ProsCons
  • Runs on browsers that do not support WebAssembly.
  • No code reuse with the existing Desktop version.
  • Complete rewrite of Application and Presentation tiers.
  • The Web and Desktop versions are very hard to synchronize.
  • A new Web Development team is needed.
  • Non-gradual approach.
  • Expensive.
  • High Risk.


Usually, this approach is the most expensive option and is only suitable for applications that do not need to continue to exist as desktop applications. It is a very high-risk approach that usually involves the hiring of a new Web development team and usually a complete company restructuring.

Hybrid Approach (with Blazor-WebAssembly)


With the introduction of Blazor WebAssembly, you can now run C# inside the browser. This is a significant advance in web technology as it allows for code reuse of non-UI .NET libraries in Desktop and Web applications. The Presentation Tier is also possible to be developed in pure C#, but it must be completely rewritten, because the new UI needs to be HTML based. The following table outlines the pros and cons of this approach:

ProsCons
  • Reuse of Application Tier code.
  • Low Risk.
  • No code reuse with the existing Desktop version.
  • Complete rewrite of Application and Presentation tiers.
  • The Web and Desktop versions are very hard to synchronize.
  • A new Web Development team is needed.
  • Non-gradual approach.
  • Expensive.
  • Does not run on older browsers.

Cross-Platform Approach (with Blazor-WebAssembly and NOV)


Blazor WebAssembly made it possible for NOV to run inside the browser. Desktop Applications that used NOV for their user interface can now simply be recompiled for the Web. If your existing application is not based on NOV, but uses some other 3rd party or native UI controls, you must simply migrate your existing Presentation Tier to NOV. This should not be that hard, because NOV includes almost all the UI controls your application may need, such as 70+ widgets (Ribbon, Dockable Command Bars, Buttons, TextBox, CheckBox, DateTime Picker, etc.), Grid, Chart, Scheduler, Gauge, Diagram, Rich Text Editor, etc. The biggest benefit of using NOV is that your application instantly becomes available not only as a web application but also becomes available on other operating systems (such as macOS, if it was only available to Windows previously).

ProsCons
  • Almost 100% Reuse of Presentation and Application Tier code.
  • No Web Development team is needed.
  • Gradual approach.
  • Low Risk.
  • Inexpensive.
  • Does not run on older browsers.


Probably the biggest benefit of this approach is that it is gradual – you are developing your Web application when migrating specific parts of your application UI to NOV. Another notable benefit is that your developers need to know nothing about Web Development, so you can use your existing team to develop your Web and Desktop application versions.

The Cross-Platform approach is the approach that we took in developing the MyDraw application. MyDraw has Windows, macOS, and Web versions that all run from a single code-base and are developed by the same team. The MyDraw team only has to focus on the product and not on the details of running the product in Windows, macOS, or Web browsers.

Conclusions

From our observations, the Cross-Platform approach is the best for products that need to continue to exist as both Web and Desktop solutions, followed by the Hybrid approach for companies with more resources. The Complete Rewrite to JS/HTML Approach is only suitable for applications that do not need to support a desktop version or need to support older browsers.

About Nevron Software

Founded in 1998, Nevron Software is a component vendor specialized in the development of premium presentation layer solutions for .NET based technologies. Today Nevron has established itself as the trusted partner worldwide for use in .NET LOB applications, SharePoint portals and Reporting solutions. Nevron technology is used by many Fortune 500 companies, large financial institutions, global IT consultancies, academic institutions, governments and non-profits.
For more information, visit: www.nevron.com.

Customer Quotes:

QUOTE I really like the fact that standard windows icons are provided with the NOV Ribbon example, avoiding the need to recreate the wheel and giving a more professional appearance. Using the provided Visual Studio NOV solution, it is fairly straightforward to add custom icons with a few extra simple steps. The gallery of C# examples for all controls makes it easy to create custom layouts. For the handful of customizations I could not find in the examples or user forums, the tech support responses got me going within a day. UNQUOTE

Jay Wilson
K2realm, LLC