从 ASP.NET MVC 迁移到 TypeScript

引言

这将帮助 ASP.NET / MVC 开发人员逐步迁移他们的应用程序到 TypeScript，以及/或决定是完全迁移到 TypeScript，还是使用 Angular.JS 的混合方法。

 

作者 Chris Johnson @ intrin.sc

从 ASP.NET MVC 迁移到 TypeScript

 

本文旨在最终摆脱对 Microsoft ASP.NET MVC 版本的依赖，转向诸如 Angular JS 这样的开源 MVC 框架。我必须承认，我曾反复质疑为何需要摆脱 ASP.NET 这个“拐杖”，但在研究之后，我意识到使用这种技术可以进一步提高性能。同时，我也感到更加困惑，因为我刚刚使用 ASP.NET MVC 和 Angular JS 完成了一个单页应用程序的创建。我向几位同事以及 Google 询问为何需要这样做，但都找不到一个很好的答案。我对单页应用的概念也不熟悉，尽管我之前曾使用 Web Forms 和 Jquery 创建过一个半单页应用程序。所以，我只是深入研究了一些创建 Angular JS / ASP.NET MVC 应用的示例，然后就开始着手了。

当我将纯 MVC 与使用 MVC 的 Angular.JS 应用程序进行比较时，我首先注意到的是 MVC 和 Angular 两边的路由都存在重复。我似乎创建了两次相同的路由，并且客户端和服务器端的规则（如区分大小写等）都不同。我仍然不理解使用 Angular 和 ASP.NET 的目的。我没有意识到我正在创建一个单页应用，团队中的其他开发人员也没有。在完成应用程序的第一阶段后，我有一些时间来思考我所做的事情。我仍然没有完全理解这个概念，所以我用我方便的网络调试器来尝试查看仅使用 ASP.NET MVC 与使用 ASP.NET 和 Angular 之间的区别。请看这段 MVC 代码以及页面转换和数据加载：

图 1：标准 ASP.NET MVC 路由配置

图 2：用于 Index 和 About 页面的初始 ASP.NET MVC 控制器

 

图 3：ASP.NET MVC Index 视图

 

图 4：ASP.NET MVC About 视图

 

图 5：ASP.NET MVC 生成的 Index 网页

 

图 6：用户请求主页时 ASP.NET MVC 的数据加载

图 6 显示了当用户在浏览器中加载初始视图（index.html）时，从 Web 服务器传输到浏览器的数据。正如你所看到的，一些数据是由服务器渲染的，并且对于开发人员来说，这似乎有些神秘。

然后，我简单地点击了页面顶部的 About 链接。这是生成的网页以及加载到浏览器中的实际数据。

图 7：ASP.NET MVC About 网页

 

图 8：请求 About 页面时 ASP.NET MVC 的数据加载

您会注意到，每次页面请求加载的数据都相同，除了当然是请求的视图（在此例中是 About 视图）。另外请注意，页面是刷新的，这意味着所有数据都从浏览器传输到 Web 服务器，然后再返回。每次页面请求都会导致大约 500KB 的数据传输，如上图 6 和 8 所示。这意味着用于创建视图的数据是在服务器上渲染的，然后发送到浏览器。这导致加载时间变慢，并且浏览器和服务器之间传输的数据量比必需的要多得多。

这里有一个大小相似的应用程序，但使用了 Angular JS UI 路由（参见 https://github.com/angular-ui/ui-router）以及 ASP.NET MVC。

图 9：Angular UI 路由 / MVC route.config 文件

 

图 10：Angular UI 路由 / 主页控制器（LandingPageController.js）文件

图 10 是一个用 JavaScript 编写的 angular.js 控制器文件。它相对较小，但展示了 MVC 的 ViewData 和 ViewBag 对象之间的相似性，它们都用于将数据传递到视图。

图 11：Angular UI 路由配置设置文件（AwesomeAngularMVCApp.js）

图 11 是主应用程序设置文件。它使用 angular.js 编写，并设置了整个应用程序的控制器、数据服务以及路由。

 

图 12：Angular UI 路由 / MVC index.cshtml 文件

图 12 是 index.html 文件，它基本上充当主页或 MVC 中的 _layout.cshtml 文件。

图 13：Angular UI 路由 / MVC Index 网页

 

图 14：初始 MVC / Angular Index 页面加载

从上图 14 中可以看出，加载的数据量少了很多，尽管它们是不同的应用程序。即使 MVC 初始 Index 页面的加载数据量与 Angular 应用程序相同，您也会在两种架构的每次后续页面加载之间看到巨大的差异。

图 15：Angular UI 路由 / MVC “State One!” 网页

图 15 显示了浏览器在加载了‘stateOne’ UI 路由后呈现的页面。在后台，‘StateOne’ 视图（它由几个嵌套视图组成，或者在 UI 路由中称为 UI 路由）被加载到 Index.html 视图中，从而生成了如上所示的页面。

 

图 16：Angular UI 路由 / MVC “State One!” 数据

您可以看到，在第二次及之后的页面加载中，加载的数据量要少得多。为了清楚起见，这只是图 16 中浅灰色线以下的、即“GET one”语句及之后的数据。当然，浏览器没有刷新。只加载了大约 435 字节！这基本上使其成为一个单页应用程序。只有当前视图的 JavaScript 和 CSS 被加载，而不是像纯 MVC 应用那样加载整个应用程序的 JS 和 CSS。也没有在服务器上渲染的视图然后直接发送到浏览器，这也大大减少了来回传输的数据量。当然，这通常只适用于小型到中型应用程序，它们更像桌面应用程序，没有页面刷新。一个例子应用是电子邮件 Web 客户端。但是，如果您想为大型应用程序保持单页应用架构，可以有多个单页应用协同工作。当然，每种优势都伴随着缺点；您必须学习 Angular.JS，并且需要设置客户端路由并确保它与您的 MVC 路由匹配，这意味着需要更多开发工作。但是，您也可以看到 Web 流量的急剧减少，所以对于那些了解 MVC 并关注性能的人来说，这是一个很好的选择。

 

我的下一个项目是创建一个使用 TypeScript 的 Angular 应用程序。我被告知我们要 **不** 使用 ASP.NET MVC，而是仅使用 Angular JS 作为路由框架。所以，我们必须摆脱 ASP.NET 这个“拐杖”，这意味着所有 Web UI 代码都必须是纯 JavaScript。这意味着没有 MVC 生成的视图，也没有像打包（bundling）这样的方便功能。我也对此进行了广泛的研究。不幸观看，没有人可以问我关于这种特定技术组合的问题，所以我基本上是孤军奋战。首先要学习的是 TypeScript，以及在不依赖 ASP.NET 及其易用性的情况下设置路由。别忘了最适合 TypeScript 的开发环境：我在下面的示例应用程序中使用了 Visual Studio Code。这个应用程序几乎没有 Visual Studio 的易用性，但非常适合创建仅客户端的应用程序。当然，如果您正在为数据创建 Web Service 或 Web API 服务，您可能希望使用 Visual Studio 或类似的工具来进行所有后端开发工作，这可能会在您需要在两个环境之间来回切换时显得有些不便。在 Visual Studio Code 中，没有自动构建系统，但只要您安装了所有开发工具，如 Node Package Manager、TypeScript、TypeScript 定义文件、易于使用的 Web 服务器等，您很可能可以快速运行起来。当然，这又是另一篇文章的主题了，因为它可能会让不熟悉这种开发环境的人感到望而生畏。设置好开发环境后，您可能想从一个示例应用程序开始，并获得一些好的 Angular.js 文档，以及 TypeScript 文档（参见 typescriptlang.org 获取良好开端），因为本质上您将要学习 Angular.js、TypeScript 和 JavaScript（如果您还不熟悉的话）。请注意，一些 TypeScript 文件实际上就是 JavaScript，比如下面的 app.ts 文件，所以如果您不熟悉 JavaScript，最好先学习它，因为它与 C# 和 Java 有很大的不同。

回到我的示例应用程序，我还必须创建一个能良好工作的项目设置。

图 17：TypeScript / Angular Index.html 页面

图 17 再次是一个 Index.html 页面，与上面（图 12）的 Angular 示例类似。看看图 12 来查看两个应用程序之间的相似之处。

 

图 18：TypeScript / Angular 路由和应用程序设置页面（app.ts）

图 18 使用 JavaScript 创建应用程序设置文件。这同样类似于上面的 Angular 示例（图 11）。它添加了 Angular 控制器和服（或工厂，如果您创建了的话）。服务和工厂是创建连接到 WEB API 或 Web 服务的模块的另一种方式。

 

图 19：TypeScript / Angular 产品列表控制器（ProductListCtrl.ts）

图 19 是实际的 TypeScript 控制器，它与上面（图 10）的 Angular/JavaScript 控制器有很大的不同。它更像是 C# 或 Java，具有接口和类。本质上，控制器仍然做着同样的工作。它只是在 productListView.html 页面之间传递数据。请看下面的图 20。

 

图 20：TypeScript / Angular 视图（productListView.html）

图 20 是一个视图，它基本上与其他 Angular 视图相同，因为我们这里只使用 HTML 和 Angular.JS。

这是一个使用 TypeScript 和 Angular.JS 的小型应用程序。它使用 TypeScript 编写，然后“转译”为 JavaScript，所以实际在浏览器中运行的代码仍然是 JavaScript。但是在设计时，您拥有面向对象开发的全部强大功能，因为现在有了类和接口，类似于 C# 或 Java 中看到的。在这种情况下，Index.html 充当“主”页面，而 productListView.html 加载到 index.html 页面中的 <ng-view> 标签中。因此，Index.html 充当 MVC 应用程序中有时看到的 _Layout.cshtml 页面。此外，所有的路由和所有应用程序配置都在浏览器上运行，没有任何内容是在服务器上渲染然后来回传输到浏览器的。这同样导致来回传输到服务器的数据量减少。现在，让我们看看下面 TypeScript 应用程序中的初始视图。

图 21：TypeScript / Angular 初始 Index 网页。

图 21 显示了网页中典型的列表视图场景。这是上面图 17-20 所示的全部 TypeScript 代码的结果。

初始页面加载数据如下：

图 22：TypeScript / Angular 初始 Index 页面加载数据。

图 22 显示了初始页面加载的数据。正如您所看到的，Angular.JS 大约有 1MB，但是，缩小后的版本只有大约 145KB，所以在生产环境中这不成问题。剩下的代码大约是 300K，而且 .js 文件还没有缩小，所以等到部署到生产环境时，这几乎不成问题。现在，由于这是一个纯客户端（JavaScript）应用程序，您将再次看到每次后续页面请求加载的数据之间有巨大的差异。

图 23：TypeScript / Angular 详细视图网页

图 23 是用户单击上面图 21 中的产品行链接时生成的页面。

现在，您将看到一个在 Web 应用程序中理想的情况。

图 24：TypeScript / Angular 详细视图加载数据

从图 24 中可以看出，除了图像之外，基本上没有从 Web 服务器加载任何数据。由于路由完全是客户端的，所以没有要在服务器上渲染的数据，也没有要加载到浏览器中的数据，这在我看来是理想情况，因为几乎没有服务器通信。当然，这也使我们完全摆脱了对 ASP.NET MVC 及其优秀功能的依赖，例如：易用性、使用 Razor 语法生成的视图、打包、服务器端路由配置等等。而且，您还必须学习一种全新的语言，对于只有 MVC 经验或几乎没有 JavaScript 经验的开发人员来说，这将是一个非常陡峭的学习曲线。

摘要

因此，正如您所看到的，本文比较和对比了三种截然不同的 Web 开发方法。本文也为那些希望摆脱服务器端代码（与 Web 应用程序相关）的 ASP.NET 和 ASP.NET MVC 开发人员减轻了痛苦。它还显示了在尝试创建超高性能 Web 应用程序时难度级别的增加。对于那些试图消除 ASP.NET 目前提供的所有“拐杖”的人来说，它展示了一种混合方法，当 ASP.NET 与 Angular.JS 结合使用时，可以创建更高性能的单页应用程序。

现在就一头扎进 TypeScript 的怀抱还为时过早，仅仅因为它就是最新最棒的东西。我还没有深入探讨使用 Angular.JS 和 TypeScript 创建高级应用程序，这将在未来的文章中进行讨论。因此，一旦您的应用程序开始变得更加复杂，创建 TypeScript 应用程序的难度以及创建它所需的时间可能会成为决定是使用新技术还是简单地采用使用 Angular.JS 的混合方法的一个重要因素。

 

参考文献

- Visual Studio 2013 中的 ASP.NET MVC 入门项目

- www.pluralsight.com/courses/angular-typescript

历史

 

版本 1.0 - 2015 年 10 月 7 日。