ASP.NET Core 2.0 Razor 与 Angular/React/等答案

【问题标题】：ASP.NET Core 2.0 Razor vs Angular/React/etcASP.NET Core 2.0 Razor 与 Angular/React/等
【发布时间】：2018-02-24 03:51:02
【问题描述】：

我和我的团队已经获得了开始开发企业级 Web 应用程序的资金（不会详细说明它的作用）。该应用程序将有许多单独的网页，但其中两个页面更加集中且非常重 - 大量用户交互、显示海量数据的模式、websocket 连接、聊天等。

我已被指派为该项目的首席架构师，因此我正在对最新的 Web 框架进行一些研究。对于后端，我们进行了一些测试，并决定使用 Azure SQL 平台。到目前为止，我喜欢使用 Core 2.0 对 ASP.NET 所做的和正在做的改进。特别是 Razor 引擎，优于以前版本的 ASP.NET MVC。

我想获得一些关于“新”Razor 与 Angular/React 之类的专家意见。我特别关心性能。 Core 2.0 Razor 如何支持客户端渲染框架？差异可以忽略不计吗？我们的应用面向潜在的 1,000,000 名用户（大约 100,000 名并发用户）。

提前致谢！

【问题讨论】：

“new Razor”是指 Razor 页面？
那么你最后选择了哪一个，进展如何？
您是如何开始（或正在开始）这个项目的？我现在和你的情况几乎一样，希望能有更新！
您好 JLo 和 stt106。抱歉这么久才回复。我们最终使用 Azure SQL 使用 Angular 前端和 ASP.NET Core API 后端。到目前为止，它对我们来说效果很好！如果您对它更满意，我会想象 React 将成为 Angular 的类似替代品。我必须学习 Angular，这是一个非常容易的过渡，我现在喜欢它！
ASP.Net Core 与 Angular/React 的速度比较离题了？可以有规范的答案。至于今天我们有 Core 2.2，很快就会有 3.0。

标签： asp.net angular reactjs razor

【解决方案1】：

通过在服务器端使用 Angular/React 和 API：

您消除了在服务器端生成 HTML 的过程并节省了 CPU
API 产生一个小的有效负载 (JSON)，而 Razor (HTML) 的大小当然会大得多，不断地重新加载整页和回发往返，因此 API 和 SPA 节省了带宽
API 和 SPA 可能具有不同的版本控制、扩展和部署方案
通过使用 API，您也可以支持移动应用，如果您从 Razor 开始，您将来可能需要 API

但是使用 Angular/React，你应该担心客户端：

客户端必须启用javascript
客户端必须使用现代浏览器
客户端必须有足够强大的硬件
搜索引擎优化

【讨论】：

我理解这两个框架的区别，我更关心性能。
两者都存在相同的管道，但我不知道剃须刀页面存在任何基准。此链接可能会有所帮助 - ASP.NET Razor Pages vs MVC: How Do Razor Pages Fit in Your Toolbox?
Razor 支持移动设备，列出的缺点并不重要。两者都以自己的方式快速。我更喜欢 Angular，但两者都经过优化。 Razor 通过不使用像 MVC 那样的树来优化代码。 Angular 是客户端，因此它并不真正使用树，但也在一定程度上优化了 HTML 中的数据。
@NickTurner 我理解它不仅仅是在智能手机上查看网页，而是一个完整的自己的应用程序。例如。一个 Android 应用程序，它可以按原样从未更改的服务器 API 获取数据，同时使用 Android 提供的功能 - 更好的动画支持、通知、toast 消息等。

【解决方案2】：

我们最终使用 Azure SQL 使用 Angular 前端和 ASP.NET Core API 后端。我们测试了 Core Razor，虽然比传统的 Razor 更好，但 Angular 最终对我们来说要快得多。就用户体验而言，Angular（或 React）在性能方面要优越得多。我们发现 Angular 的模型绑定方面是服务器端渲染的巨大优势。但是，使用 Razor（或一般的服务器端渲染）确实有助于提高数据的整体完整性，并且可以更好地将数据从前端传输到后端。前端框架和 API 之间存在真正的脱节。传递给服务器的所有数据都必须转换为类型化对象——这意味着您必须管理两个单独的 POCO 模型集。如果服务器对象和前端对象不对齐，这可能会导致问题。目前，Entity Framework Core 还不是很成熟，所以我们在更新对象、查询对象（包括子对象）等方面存在问题。

总的来说，到目前为止，这个设置对我们来说非常棒！如果您对它更满意，我会想象 React 将成为 Angular 的类似替代品。我必须学习 Angular，这是一个非常容易的过渡，我现在喜欢它！

【讨论】：

就保持两个 POCO 模型集同步而言，VS 有一个非常有用的扩展，可以从 MVC 模型创建角度接口，请查看 typewritter
好吧，就个人而言，如果我必须使用 Angular，我会使用 NoSql 作为 DB 部分。
我无法想象在 Angular 之上选择 ASP.NET razor。过去 ASP.NET 为 .NET 开发人员提供了一些熟悉的代码，但使用 RAZOR，学习曲线比使用 Angular 更高。 MVC 将逻辑从 HTML 中分离出来。
@Mark 我不相信。 Razor Pages 非常完美，特别是它们处理数据绑定的方式。他们太好了。但他的场景角度非常适合。
@MosiaThabo，Mark 不是在谈论 Razor 页面，而是在谈论 Razor。这是我的OP所指的。在我原来的帖子中，我指的不是 Razor Pages（或者我认为现在称为 Blazor）。我专门讨论的是客户端渲染与服务器端渲染。 Razor Pages 是 Microsoft 的 Angular/React 风格，我认为他们认为这是必要的，因为 Angular 和 React 具有优势。

【解决方案3】：

我没有基准。但是，我有几个运行 JQuery、Razor、.NET MVC (C#)、AJAX 的项目。没有达到你要处理的规模。

建议.. 请务必仔细考虑并遵循最佳做法。为了使事情保持可维护性，请务必将控制器、视图、模型分成更小的和有意义的组。当我开始的时候，我犯了一个错误，将所有东西都放在一个 Home 控制器中，并在共享文件夹中放置大量视图。一开始还不错，但是当功能蠕变开始时，它变得一团糟，很难回去重新设计。

我也使用 Linq2SQL。我犯了为所有内容创建模型的错误，然后意识到我可以将查询中的结果集作为模型返回。呵呵。

如果您使用 .NET MVC 并关心性能，那么我遇到了以下问题：

不要返回创建大块 HTML 的局部视图！一定要尽量减少一切。摆脱所有的空白。使用较小的 ID 名称。花时间创建尽可能轻的 html。返回 JSON 并让客户端做一些工作。

在开发 CSS 时要小心。不要使用一堆内联样式，花时间将其合并到以后可以最小化的 CSS 文件中。

您的客户端 JS 也是如此。将 JS 放在局部视图中是很诱人的。让事情井井有条。

在 IE 上渲染太可怕了。特别是如果有很多图像。一定要尽可能地压缩图像，当然不会损失质量。

【讨论】：