Migrate Windows Applications from the Desktop to the Browser

Built up over many years, desktop applications play a crucial role in providing users with important features and functionalities they have grown accustomed to. Developers know that taking these monolithic-like applications and moving them to the web is no simple task. When the challenge arises, a common approach is to try to break down the system into small, modularized components. With enterprise-scale systems this may prove to be a challenge that could take the larger part of a decade. Instead, we suggest an approach that allows web developers to "stand on the shoulders of giants" and reuse the best components of the development work that occurred before them.

For software developers, migration can be a touchy topic. Rather than deal with the existing system, developers may be happy to start from the ground up with a blank slate! There is a strong desire for contemporary technologies, modern tools, and leaving technical debt behind. Reality may hit hard when deadlines start approaching and financial resources are cut short.

The outdated application cannot be redeveloped in just a few months. Opinions differ on the question of how much time is required to move from the Windows desktop to a browser-based cloud application. On the one hand, the existing solution still needs to be maintained. The existing development team may need to split to allocate resources for maintenance and new features in the old application while also working on the side to develop a new platform. This requires know-how (which technology? how does it work?) and experience, because web development works very differently from the familiar Windows world.

Entrusting a second team with the task may not be the best solution. Application-specific knowledge, experience of the industry, and customer expectations can be documented and explained, but the resulting work, if not done by someone who thoroughly understands the application and its users, may not be up to par. It is not without reason that in-house and externally-contracted projects often fail because the programmed result did not meet the client's expectations. Important information may have been missing or the responsible developers were simply not familiarized enough with the specific requirements.

One common challenge is the size and complexity of the existing solution. A mature business application may have hundreds of screens and over a million lines of source code that has been developed, refined, changed and optimized again over years and decades. This can certainly be tidied up and some things can be streamlined, but it requires a good plan, time for implementation and appropriate financial backing.

Many Projects Fail

In 2022, the redevelopment of a complex desktop solution failed after two years. A team of 10 developers were tasked with rewriting a Windows-based ERP solution with around 1,000 screens into a pure web application. Two years later, not even 5% of the application was available in the browser, because a lot of time had already been invested in architecture discussions, feature analysis, class library setup, and other topics. The schedule had tripled from the three years initially forecasted.

The major cloud providers such as Amazon AWS and Microsoft Azure are regularly contacted to evaluate application migrations. However, moving to a virtual desktop or a Citrix-based solution is not a viable long-term option. Now that the Microsoft world with Office 365 and Dynamics is available in the browser and across all platforms, users increasingly want the same experience for their own line-of-business applications. Those who want to remain competitive will have to take this step in order to avoid being overtaken by competitors.

The failed redevelopment project resulted in more realistic time estimates from the major cloud providers. Based on the feature set, with 1,500 on-premise installations in the field, around eight years were projected to redevelop the application for a cloud-native setup, without taking into account team size or other resources.

Do you have eight years? How do you react to all the professional and technical changes that occur in the meantime? How do you ensure that the selected target technology is not already outdated after these eight years?

Migration as an Alternative

As an alternative to develop from scratch, Wisej.NET provides a framework for migrating Windows Forms (WinForms) or Windows Presentation Foundation (WPF) applications into native web-based applications. Other source technologies such as Visual Basic 6, Microsoft Access, or Gupta/Centura Team Developer are supported as well.

The project mentioned above was modernized within 13 months with the help of Wisej.NET. The Windows-based client/server solution has become a cloud-based application delivered via Microsoft Azure and Azure App Services. The user interface was updated, having a fresh and modern look and feel today (see box "More than just the runtime").

How does it work? With an application of this size, there are a number of issues that don't just run out-of-the-box in the browser. Web-based applications work in a fundamentally different way to Windows programs based on the client/server principle. The following topics, among others, must be taken into consideration:

• Global variables, missing session isolation
• File and registry access, Windows-specific functions
• State management (browsers work asynchronously per se)
• Session management (several users share one application)
• Platform independence (deployment on Linux/in the cloud)
• Integrations (Microsoft Office Automation is not supported on the server)
• Reporting and interfaces to external systems

The biggest question, how WinForms or WPF components can be transferred to an HTML/JavaScript-based interface, is now presented step-by-step in a hands-on example.

Installation of Wisej.NET

Installing Wisej.NET is relatively straightforward from the Visual Studio Marketplace.

1. Search for "Wisej.NET 3 VS2022" via the "Extensions" menu in Visual Studio and install the extension. Alternatively, visit one of the two following links:
   https://marketplace.visualstudio.com/items?itemName=IceTeaGroupLLC.wisej-3-vs2022
   https://docs.wisej.com/docs/releases/whats-new-in-3.5
2. A Wisej.NET license is required after installation. There are two possible license variants available:
   • The Trial Edition allows the use of Framework & Designer as a test version.
   • The Community Edition is free of charge for non-commercial purposes and small organizations.

   The license can be obtained at https://wisej.com/developer-licenses/.

From WinForms to the Browser with Wisej.NET

For demonstration purposes, we use an open-source WinForms project that’s available online (http://tinyurl.com/3w3hr5h2). We will convert the Simple Scientific Calculator (see Fig. 1) to a web-based application. The source code and the functions speak for themselves and should not be the focus here. Rather, the focus is on the question of how any application can be migrated to the browser, even if the source code between user interface, business logic and data access is not yet divided into individual layers.

The application has a comparatively simple structure and does not follow a meaningful naming concept. Form1.cs contains the essential logic.

It should also be possible to replicate the steps presented here with other software projects, although the specific requirements and functions will vary depending on codebase and programming language. Some initial steps for the migration of different source technologies to Wisej.NET are explained here: https://docs.wisej.com/migration.

An essential task is to replace existing UI elements of the Windows-based user interface with web components from the Wisej.NET control collection. References to other areas of the Windows SDK, e.g. Painting (which is largely supported by Wisej.NET), will also work.

The result of the following migration steps is available for download here: http://tinyurl.com/yfsme5wx. However, to reproduce the steps yourself, you first need the source code of the desktop application. After successfully installing Wisej.NET and opening the Calculator source code in Visual Studio, the procedure is as follows:

Step 1: Add a Second Project

There are various procedures for web-enabling an existing application. We decided to add a Wisej.NET project to the existing solution, to copy code from the existing WinForms project into the Web-based solution..

1. Add a new project in the Solution Explorer by right-clicking on the solution
2. Select the "Wisej 3 Web Page Application" Project Template
3. Enter "calcweb" as the project name
4. The Wisej.NET-specific project settings are confirmed as suggested.

The current Wisej.NET version 3.5 supports both .NET Framework and .NET 7 and 8. Wisej.NET-based applications are already fully .NET (Core) based, i.e. deployment on Linux or other platforms supported by .NET is possible without limitations. For technical reasons, a reference to the .NET Framework 4.8 is still required for the graphical designer in Visual Studio. This dependency will be removed in a future version.

Step 2: Adopt Existing eCcode

It may seem a little strange at first glance, but in the next step we copy the existing source code from the WinForms project into the Wisej.NET project. The easiest way to do this is to right-click on Form1.cs - "Copy" and "Paste" below calcweb. Form1.resx can then be safely deleted. Compiling the solution is pointless at this point, because we have just inserted WinForms dependencies in a web-based project. We will now resolve these in the next step:

1. Open Form1.cs in calcweb in source code view.
2. The namespace "calculator" must be replaced by "calcweb". Better make the adjustments manually in Form1.cs and Form1.Designer.cs.
3. Within the project, replace System.Windows.Forms with Wisej.Web.
4. The next step is to remove a property that is not supported in Wisej.NET:
   \r\n(\s*)this\.(.*)UseVisualStyleBackColor = true; is replaced with (nothing), i.e. an empty field, to remove the entire affected line of code (as a regular expression). You can use the Search & Replace functionality in VS to execute this.

At this point, you should already be able to open Form1.cs of the calcweb project with the Wisej.NET Designer in Visual Studio. All you need to do is double-click or use the key combination Shift+F7. If compilation errors occur at this point, closing and restarting Visual Studio may help. In rare cases, switching project types can lead to one-off problems, which will disappear once our conversion work has been completed.

The web-based user interface should now be visible in the Visual Studio Designer. One of the advantages of the Wisej.NET framework is the ability for pixel-perfect design directly in Visual Studio. The various interface elements can be arranged and edited conveniently using the mouse and properties window.

Step 3: Complete the Changeover and Run the Project

We are close to being able to run the application in the browser. First of all, we have to make sure that the correct page is loaded when the application is started:

1. Program.cs with its Main() function must be adapted, i.e. remove the following line: Application.MainPage = new Page1(); add instead use: new Form1().Show();
2. Our new project, calcweb, should be set as the startup project of the solution, otherwise the WinForms version will continue to open. You can right-click the project in Visual Studio and select "Set as Startup Project".
3. Run the application

As a result, you should now be able to open the calculator in the browser (see Figure 6).

Step 4: What Next?

That was it already. The application runs in the web browser without us having to worry about session management, state handling, communication between client and server or the various technologies (HTML, CSS, JavaScript). Wisej.NET takes care of the nasty details. Things like a browser refresh is also supported: simply enter something and then press <F5> in the browser - the current state is retained.

Many things could be improved at this point. The interface is of course not responsive, as we have only used the source code 1:1. Wisej.NET offers countless options to improve the UI/UX of the calculator application. A TableLayoutPanel that takes over the positioning of the individual buttons would be a good next step.

If the look and feel is still a little too close to the Windows world, you can play with the various integrated themes or the Theme Builder available for Wisej.NET. Themes for Bootstrap, Material, and Graphite are included and can be customized using the Wisej.NET Theme Builder. How it works is explained in detail in the corresponding online documentation (https://docs.wisej.com/theme-builder/).

A good example of this approach is the TRIO software solution, which was migrated from 16 separate applications (Visual Basic 6) into an integrated suite based on C# with Wisej.NET. Figure 7 shows what is possible in a short period of time, achieving a great new design close to the original application. The application is fully backwards-compatible with existing databases and has been very well received by users.

Backend Details: Implementing MVVM Principles

Apart from that, it makes sense to think about separating logic and UI. Our source application was not exactly a prime example of architectural design and adherence to naming conventions. Wisej.NET can't perform miracles here - it's just a framework that is used specifically to customize the user interface. Nevertheless, the switch from Windows to Web does not mean that the end of the possibilities has been reached. Separating layers, tidying up the source code and paying off technical debt should play an ongoing role in every project.

Wisej.NET-based applications are by no means monolithic. Rather, the question is how a sensible division of the layers can be achieved in complex projects. In principle, all design patterns and architectural approaches are supported. Initial suggestions for the division of layers during new development can be found by following the Wisej.NET NavigationBar Template, which is available via the Visual Studio Marketplace.

Explore and Evolve

This is not the end of the migration, but rather the beginning. In addition to its own component library, Wisej.NET provides integrations with a wide range of external JavaScript controls: from barcodes and QR codes to charting, code editors and much more complex components. Wisej.NET supports the integration of any JavaScript control with a manageable amount of effort. When developing in Visual Studio, the control can be used with the graphical designer with all JavaScript events available from C# or VB.NET.

In addition, Wisej.NET has Premium Extensions that integrate with all major component manufacturers such as Syncfusion, DevExpress, Infragistics and Progress. The demo application at https://demo.wisej.net shows some of the controls that are available. Developers can use advanced components such as the Syncfusion Kanban, Grids, and Office-like components for integrating text editors or spreadsheets.

Outlook

Admittedly, this was a very simplified migration. In reality, software projects are likely to show additional pitfalls in more complex scenarios. For larger applications, it can take days and weeks and months until migrated code can be compiled for the very first time. That’s a matter of complexity. However, the basic procedure is always the same, i.e. the path presented here can be transferred to the migration of large and complex software solutions, with thousands of screens. As an alternative to the do-it-yourself approach, the manufacturer of Wisej.NET and partner companies such as fecher offer a wide range of services, from training to complete outsourcing of application modernization.