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

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)
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.
2. Application tier (Business Logic or where data is processed)
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.

3. Data tier
This is 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, Mac and Blazor WebAssembly.

WinForms
WinForms (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 WinForms.

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.

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.

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:

Pros	Cons
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:

Pros	Cons
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).

Pros	Cons
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.