将 Windows 应用程序从桌面迁移到浏览器

桌面应用程序经过多年发展，在为用户提供他们已习惯的重要功能方面发挥着至关重要的作用。开发者深知，将这些类似单体应用的应用程序迁移到 Web 端并非易事。当面临挑战时，一种常见的方法是尝试将系统分解为小型、模块化的组件。对于企业级系统而言，这可能是一项耗时数年的挑战。我们建议一种方法，让 Web 开发者能够“站在巨人的肩膀上”，重用之前开发工作中最好的组件。

对于软件开发者来说，迁移可能是一个敏感的话题。开发者可能更愿意从头开始，而不是处理现有系统！人们普遍渴望使用现代技术、现代化工具，并摆脱技术债务。然而，当截止日期临近且资金紧张时，现实可能会变得严峻。

过时的应用程序无法在几个月内重新开发。关于将 Windows 桌面应用程序迁移到基于浏览器的云应用程序所需的时间，人们的看法不一。一方面，现有解决方案仍需维护。现有开发团队可能需要分裂，将资源分配给旧应用程序的维护和新功能开发，同时又在侧面开发新平台。这需要专业知识（何种技术？如何运作？）和经验，因为 Web 开发与熟悉的 Windows 世界截然不同。

将任务委托给第二个团队可能不是最佳解决方案。应用程序特定的知识、行业经验和客户期望可以被记录和解释，但如果不是由彻底理解应用程序及其用户的人来完成，最终的工作可能不尽如人意。并非没有理由，内部和外部承包的项目经常失败，因为编程结果未能达到客户的期望。重要信息可能缺失，或者负责的开发人员根本没有充分熟悉特定的需求。

一个普遍的挑战是现有解决方案的规模和复杂性。一个成熟的业务应用程序可能包含数百个屏幕和超过一百万行源代码，这些代码经过多年的开发、完善、更改和优化。当然，可以进行整理和优化，但这需要一个好的计划、实施时间以及足够的资金支持。

许多项目失败

2022 年，一个复杂的桌面解决方案的重新开发在两年后失败了。一个由 10 名开发人员组成的团队负责将一个拥有约 1000 个屏幕的基于 Windows 的 ERP 解决方案重写为纯 Web 应用程序。两年后，只有不到 5% 的应用程序可以在浏览器中使用，因为大部分时间已经花费在架构讨论、功能分析、类库设置和其他主题上。原先预测的三年时间表已延长到三倍。

亚马逊 AWS 和微软 Azure 等主要云服务提供商经常被联系以评估应用程序迁移。然而，迁移到虚拟桌面或基于 Citrix 的解决方案并非可行的长期选择。现在，随着微软世界中的 Office 365 和 Dynamics 可以在浏览器和所有平台上使用，用户越来越希望在自己的业务线应用程序中获得相同的体验。那些希望保持竞争力的公司必须迈出这一步，以避免被竞争对手超越。

失败的重新开发项目导致主要云服务提供商提供了更现实的时间估算。根据功能集，对于拥有 1500 个现场安装的本地解决方案，预计需要八年时间才能将其重新开发为云原生设置，这还没有考虑团队规模或其他资源。

您有八年时间吗？您如何应对期间发生的各种专业和技术变化？您如何确保选定的目标技术在八年后不会过时？

迁移作为一种选择

作为从头开始开发的一种替代方案，Wisej.NET 提供了一个框架，用于将 Windows Forms (WinForms) 或 Windows Presentation Foundation (WPF) 应用程序迁移到原生的基于 Web 的应用程序。其他源技术，如 Visual Basic 6、Microsoft Access 或 Gupta/Centura Team Developer 也得到支持。

上述项目通过 Wisej.NET 在 13 个月内完成了现代化改造。基于 Windows 的客户端/服务器解决方案已成为通过 Microsoft Azure 和 Azure App Services 交付的云应用程序。用户界面已更新，具有时尚现代的外观和感觉（参见方框“不仅仅是运行时”）。

它是如何工作的？对于如此规模的应用程序，有许多问题在浏览器中并非开箱即用。基于 Web 的应用程序的工作方式与基于客户端/服务器原理的 Windows 程序根本不同。以下主题，除其他外，需要加以考虑

• 全局变量、缺少会话隔离
• 文件和注册表访问、特定于 Windows 的功能
• 状态管理（浏览器本身以异步方式工作）
• 会话管理（多个用户共享一个应用程序）
• 平台独立性（部署在 Linux/云端）
• 集成（服务器不支持 Microsoft Office Automation）
• 报告和与外部系统的接口

最大的问题是如何将 WinForms 或 WPF 组件迁移到基于 HTML/JavaScript 的界面，现在将通过实际示例逐步展示。

安装 Wisej.NET

从 Visual Studio Marketplace 安装 Wisej.NET 非常简单。

1. 在 Visual Studio 的“扩展”菜单中搜索“Wisej.NET 3 VS2022”并安装该扩展。或者，访问以下两个链接之一
   https://marketplace.visualstudio.com/items?itemName=IceTeaGroupLLC.wisej-3-vs2022
   https://docs.wisej.com/docs/releases/whats-new-in-3.5
2. 安装后需要 Wisej.NET 许可证。有两种可能的许可证变体可用
   • 试用版允许将 Framework 和 Designer 用作测试版本。
   • 社区版对非商业用途和小型组织免费。

   许可证可在 https://wisej.com/developer-licenses/. 获取。

从 WinForms 到 Wisej.NET 浏览器

为演示起见，我们使用一个开源的 WinForms 项目（可在网上找到：http://tinyurl.com/3w3hr5h2）。我们将把“简单科学计算器”（见图 1）转换为基于 Web 的应用程序。源代码和功能不言而喻，不应成为重点。重点在于如何迁移任何应用程序到浏览器，即使源代码中的用户界面、业务逻辑和数据访问尚未被分割成独立的层。

该应用程序的结构相对简单，并且不遵循有意义的命名约定。*Form1.cs* 包含基本逻辑。

此处介绍的步骤也应可用于其他软件项目，尽管具体的实现需求和功能将取决于代码库和编程语言。这里解释了将不同源技术迁移到 Wisej.NET 的一些初始步骤：https://docs.wisej.com/migration。

一项重要任务是用 Wisej.NET 的控件集合替换基于 Windows 的用户界面的现有 UI 元素。对 Windows SDK 其他区域的引用，例如绘图（Wisej.NET 大部分支持），也将正常工作。

以下迁移步骤的结果可在此下载：http://tinyurl.com/yfsme5wx。但是，要自己重现这些步骤，您首先需要桌面应用程序的源代码。成功安装 Wisej.NET 并能在 Visual Studio 中打开计算器源代码后，操作步骤如下

步骤 1：添加第二个项目

有多种方法可以为现有应用程序启用 Web 功能。我们决定将一个 Wisej.NET 项目添加到现有解决方案中，并将代码从现有的 WinForms 项目复制到基于 Web 的解决方案中。

1. 通过右键单击解决方案，在“解决方案资源管理器”中添加一个新项目
2. 选择“Wisej 3 Web Page Application”项目模板
3. 将项目名称输入为“calcweb”
4. 按建议确认 Wisej.NET 特定的项目设置。

当前的 Wisej.NET 版本 3.5 支持 .NET Framework 和 .NET 7 和 8。基于 Wisej.NET 的应用程序已经完全基于 .NET (Core)，即可以在 .NET 支持的 Linux 或其他平台上无限制地部署。出于技术原因，在 Visual Studio 中仍需要对图形设计器引用 .NET Framework 4.8。此依赖关系将在未来版本中移除。

步骤 2：采用现有代码

乍一看可能有点奇怪，但下一步我们将现有 WinForms 项目的源代码复制到 Wisej.NET 项目中。最简单的方法是右键单击 *Form1.cs* - “复制”，然后粘贴到 calcweb 下。*Form1.resx* 之后可以安全删除。此时编译解决方案毫无意义，因为我们刚刚将 WinForms 依赖项插入到基于 Web 的项目中。我们将在下一步解决这些问题

1. 在 calcweb 中以源代码视图打开 *Form1.cs*。
2. 命名空间“calculator”必须替换为“calcweb”。最好手动调整 *Form1.cs* 和 *Form1.Designer.cs*。
3. 在项目内部，将 System.Windows.Forms 替换为 Wisej.Web。
4. 下一步是移除 Wisej.NET 不支持的一个属性
   \r\n(\s*)this\.(.*)UseVisualStyleBackColor = true; 被替换为（空），即一个空字段，以移除整行受影响的代码（作为正则表达式）。您可以在 VS 中使用“查找和替换”功能执行此操作。

此时，您应该已经可以在 Visual Studio 中使用 Wisej.NET 设计器打开 calcweb 项目的 *Form1.cs* 了。您只需双击或使用组合键 Shift+F7。如果此时出现编译错误，关闭并重新启动 Visual Studio 可能会有帮助。在极少数情况下，切换项目类型可能会导致一次性问题，一旦完成转换工作，这些问题就会消失。

基于 Web 的用户界面现在应该可以在 Visual Studio 设计器中看到。Wisej.NET 框架的一个优点是能够直接在 Visual Studio 中进行像素级完美的设计。各种界面元素可以使用鼠标和属性窗口方便地排列和编辑。

步骤 3：完成转换并运行项目

我们即将能够在浏览器中运行该应用程序。首先，我们必须确保在应用程序启动时加载正确的页面

1. 必须调整 *Program.cs* 及其 `Main()` 函数，即删除以下行：`Application.MainPage = new Page1();` 改为使用：`new Form1().Show();`
2. calcweb 这个新项目应被设置为解决方案的启动项目，否则将继续打开 WinForms 版本。您可以在 Visual Studio 中右键单击项目并选择“设置为启动项目”。
3. 运行应用程序

结果是，您现在应该可以在浏览器中打开计算器了（参见图 6）。

步骤 4：下一步？

这就完成了。该应用程序在 Web 浏览器中运行，而无需我们担心会话管理、状态处理、客户端和服务器之间的通信或各种技术（HTML、CSS、JavaScript）。Wisej.NET 会处理那些繁琐的细节。诸如浏览器刷新之类的事情也得到支持：只需输入一些内容，然后在浏览器中按 - 当前状态将被保留。

此时，许多方面都可以得到改进。由于我们只使用了源代码 1:1，因此界面当然不是响应式的。Wisej.NET 提供了无数种选项来改进计算器应用程序的 UI/UX。使用 TableLayoutPanel 来处理单个按钮的定位将是下一步的好选择。

如果外观和感觉仍然过于接近 Windows 世界，您可以尝试使用各种内置主题或 Wisej.NET 提供的 Theme Builder。包含 Bootstrap、Material 和 Graphite 的主题，并且可以使用 Wisej.NET Theme Builder 进行自定义。其工作原理在相应的在线文档（https://docs.wisej.com/theme-builder/）中有详细说明。

一个很好的例子是 TRIO 软件解决方案，它从 16 个独立的应用程序（Visual Basic 6）迁移到一个基于 C# 和 Wisej.NET 的集成套件。图 7 显示了在短时间内可以实现什么，获得了接近原始应用程序的极佳新设计。该应用程序与现有数据库完全向后兼容，并受到了用户的好评。

后端详情：实现 MVVM 原则

除此之外，考虑分离逻辑和 UI 是有益的。我们的源应用程序并非在架构设计和命名约定方面是典范。Wisej.NET 在这方面不能创造奇迹——它只是一个用于专门定制用户界面的框架。尽管如此，从 Windows 切换到 Web 并不意味着可能性就此终结。分离层、整理源代码和偿还技术债务应在每个项目中持续发挥作用。

基于 Wisej.NET 的应用程序绝非单体。相反，问题在于如何在复杂项目中实现分层结构的合理划分。原则上，所有设计模式和架构方法都得到支持。有关新开发过程中分层的初始建议，请参阅 Visual Studio Marketplace 提供的 Wisej.NET NavigationBar Template。

探索与进化

这并不是迁移的终点，而是起点。除了自己的组件库外，Wisej.NET 还提供了与各种外部 JavaScript 控件的集成：从条形码和二维码到图表、代码编辑器以及更复杂的组件。Wisej.NET 支持以可控的工作量集成任何 JavaScript 控件。在 Visual Studio 中进行开发时，可以使用图形设计器使用该控件，并从 C# 或 VB.NET 中访问所有 JavaScript 事件。

此外，Wisej.NET 还拥有高级扩展，可与所有主要组件制造商集成，如 Syncfusion、DevExpress、Infragistics 和 Progress。位于 https://demo.wisej.net 的演示应用程序展示了一些可用的控件。开发人员可以使用高级组件，如 Syncfusion Kanban、Grids 以及类似 Office 的文本编辑器或电子表格集成组件。

Outlook（展望）

诚然，这是一次非常简化的迁移。在实际情况中，软件项目在更复杂的情况下可能会出现额外的陷阱。对于大型应用程序，可能需要数天、数周甚至数月才能首次成功编译迁移的代码。这是复杂性的问题。然而，基本过程始终是相同的，也就是说，这里提出的路径可以应用于大型复杂软件解决方案的迁移，即使有数千个屏幕。作为“自己动手”方法的一种替代方案，Wisej.NET 的制造商和像 fecher 这样的合作伙伴公司提供广泛的服务，从培训到应用程序现代化的完全外包。