在传统 Web 应用和单页应用 (SPA) 之间选择Choose Between Traditional Web Apps and Single Page Apps (SPAs)

“Atwood 定律:任何能够用 JavaScript 编写的应用程序,最终必将用 JavaScript 编写。”"Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."
- Jeff Atwood- Jeff Atwood

目前可通过两种通用方法来构建 Web 应用程序:在服务器上执行大部分应用程序逻辑的传统 Web 应用程序,以及在 Web 浏览器中执行大部分用户界面逻辑的单页应用程序 (SPA),后者主要使用 Web API 与 Web 服务器通信。There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. 也可以将两种方法混合使用,最简单的方法是在更大型的传统 Web 应用程序中托管一个或多个丰富 SPA 类子应用程序。A hybrid approach is also possible, the simplest being host one or more rich SPA-like subapplications within a larger traditional web application.

何时使用传统 Web 应用程序:Use traditional web applications when:

  • 应用程序的客户端要求简单,甚至要求只读。Your application's client-side requirements are simple or even read-only.

  • 应用程序需在不支持 JavaScript 的浏览器中工作。Your application needs to function in browsers without JavaScript support.

  • 团队不熟悉 JavaScript 或 TypeScript 开发技术。Your team is unfamiliar with JavaScript or TypeScript development techniques.

何时使用 SPA:Use a SPA when:

  • 应用程序必须公开具有许多功能的丰富用户界面。Your application must expose a rich user interface with many features.

  • 团队熟悉 JavaScript、TypeScript 或 Blazor WebAssembly 开发。Your team is familiar with JavaScript, TypeScript, or Blazor WebAssembly development.

  • 应用程序已为其他(内部或公共)客户端公开 API。Your application must already expose an API for other (internal or public) clients.

此外,SPA 框架还需要更强的体系结构和安全专业知识。Additionally, SPA frameworks require greater architectural and security expertise. 相较于传统 Web 应用程序,SPA 框架需要进行频繁的更新和使用新框架,因此改动更大。They experience greater churn due to frequent updates and new frameworks than traditional web applications. 相较于传统 Web 应用,SPA 应用程序在配置自动化生成和部署过程以及利用部署选项(如容器)方面的难度更大。Configuring automated build and deployment processes and utilizing deployment options like containers may be more difficult with SPA applications than traditional web apps.

使用 SPA 方法改进用户体验时必须权衡这些注意事项。Improvements in user experience made possible by the SPA approach must be weighed against these considerations.

Blazor

ASP.NET Core 包含一种新模型,用于构建称为 Blazor 的丰富的、交互式且可组合的用户界面。ASP.NET Core includes a model for building rich, interactive, and composable user interfaces called Blazor. Blazor 服务器端使开发人员能够在服务器上使用 C# 和 Razor 生成 UI,并使 UI 使用永久性 SignalR 连接以交互方式实时连接到浏览器。Blazor server-side allows developers to build UI with C# and Razor on the server and for the UI to be interactively connected to the browser in real-time using a persistent SignalR connection. Blazor WebAssembly 为 Blazor 应用引入了另一个选项,使这些应用能够使用 WebAssembly 在浏览器中运行。Blazor WebAssembly introduces another option for Blazor apps, allowing them to run in the browser using WebAssembly. 由于它是在 WebAssembly 上运行的真实 .NET,因此你可以重复使用来自应用程序的服务器端部分的代码和库。Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.

Blazor 提供了一个全新的第三个选项,可用于评估是生成纯服务器呈现的 Web 应用程序还是 SPA。Blazor provides a new, third option to consider when evaluating whether to build a purely server-rendered web application or a SPA. 可以使用 Blazor 生成类似于 SPA 的丰富客户端行为,而无需进行大量 JavaScript 开发。You can build rich, SPA-like client-side behaviors using Blazor, without the need for significant JavaScript development. Blazor 应用程序可以调用 API 来请求数据或执行服务器端操作。Blazor applications can call APIs to request data or perform server-side operations. 这些应用程序可以在必要时与 JavaScript 进行互操作,以利用 JavaScript 库和框架。They can interoperate with JavaScript where necessary to take advantage of JavaScript libraries and frameworks.

在以下情况下考虑使用 Blazor 生成 Web 应用程序:Consider building your web application with Blazor when:

  • 应用程序必须公开丰富用户界面Your application must expose a rich user interface

  • 与使用 JavaScript 或 TypeScript 开发相比,团队更喜欢使用 .NET 开发Your team is more comfortable with .NET development than JavaScript or TypeScript development

如果正在考虑将现有的 Web Forms 应用程序迁移到 .NET Core,不妨参阅免费的电子书《面向 Web Forms 开发人员的 Blazor》,以了解是否有必要将其迁移到 Blazor。If you have an existing web forms application you're considering migrating to .NET Core, you may wish to review the free e-book, Blazor for Web Forms Developers to see whether it makes sense to consider migrating it to Blazor.

有关 Blazor 的详细信息,请参阅 Blazor 入门For more information about Blazor, see Get started with Blazor.

何时选择传统 Web 应用When to choose traditional web apps

以下内容详细介绍前面提到的选择传统 Web 应用程序的原因。The following is a more detailed explanation of the previously stated reasons for picking traditional web applications.

应用程序的客户端要求简单,可能要求只读Your application has simple, possibly read-only, client-side requirements

对许多 Web 应用程序而言,其大部分用户的主要使用方式是只读。Many web applications are primarily consumed in a read-only fashion by the vast majority of their users. 只读(或以读取为主)应用程序往往比那些维护和操作大量状态的应用程序简单得多。Read-only (or read-mostly) applications tend to be much simpler than those that maintain and manipulate a great deal of state. 例如,搜索引擎可能由一个带有文本框的入口点和用于显示搜索结果的第二页组成。For example, a search engine might consist of a single entry point with a textbox and a second page for displaying search results. 匿名用户可以轻松提出请求,并且很少需要使用客户端逻辑。Anonymous users can easily make requests, and there is little need for client-side logic. 同样,一般而言,博客或内容管理系统中面向公众的应用程序主要包含的内容与客户端行为关系不大。Likewise, a blog or content management system's public-facing application usually consists mainly of content with little client-side behavior. 此类应用程序容易构建为基于服务器的传统 Web 应用程序,在 Web 服务器上执行逻辑,并呈现要在浏览器中显示的 HTML。Such applications are easily built as traditional server-based web applications, which perform logic on the web server and render HTML to be displayed in the browser. 事实上,网站的每个独特页面都有自己的 URL,搜索引擎可以将其存为书签和编入索引(默认设置,无需将其添加为应用程序的单独功能),这也是此类情况的一个明显优势。The fact that each unique page of the site has its own URL that can be bookmarked and indexed by search engines (by default, without having to add this as a separate feature of the application) is also a clear benefit in such scenarios.

应用程序需在不支持 JavaScript 的浏览器中工作Your application needs to function in browsers without JavaScript support

如需在有限或不支持 JavaScript 的浏览器中工作的 Web 应用程序,则应使用传统的 Web 应用工作流编写(或至少可以回退到此类行为)。Web applications that need to function in browsers with limited or no JavaScript support should be written using traditional web app workflows (or at least be able to fall back to such behavior). SPA 需要客户端 JavaScript 才能正常工作;如果没有客户端 JavaScript,SPA 不是好的选择。SPAs require client-side JavaScript in order to function; if it's not available, SPAs are not a good choice.

团队不熟悉 JavaScript 或 TypeScript 开发技术Your team is unfamiliar with JavaScript or TypeScript development techniques

如果团队不熟悉 JavaScript 或 TypeScript,但熟悉服务器端 Web 应用程序开发,那相较于 SPA,他们交付传统 Web 应用的速度可能更快。If your team is unfamiliar with JavaScript or TypeScript, but is familiar with server-side web application development, then they will probably be able to deliver a traditional web app more quickly than a SPA. 除非以学习 SPA 编程为目的,或需要 SPA 提供用户体验,否则对已经熟悉构建传统 Web 应用的团队而言,选择传统 Web 应用的工作效率更高。Unless learning to program SPAs is a goal, or the user experience afforded by a SPA is required, traditional web apps are a more productive choice for teams who are already familiar with building them.

何时选择 SPAWhen to choose SPAs

以下内容详细介绍何时为 Web 应用选择单页应用程序开发样式。The following is a more detailed explanation of when to choose a Single Page Applications style of development for your web app.

应用程序必须公开具有许多功能的丰富用户界面Your application must expose a rich user interface with many features

SPA 可支持丰富客户端功能,当用户执行操作或在应用的各区域间导航时无需重新加载页面。SPAs can support rich client-side functionality that doesn't require reloading the page as users take actions or navigate between areas of the app. SPA 很少需要重新加载整个页面,因此加载速度更快,可在后台提取数据,并且对单个用户操作的响应更快。SPAs can load more quickly, fetching data in the background, and individual user actions are more responsive since full page reloads are rare. SPA 支持增量更新,可保存尚未完成的窗体或文档,而无需用户单击按钮提交窗体。SPAs can support incremental updates, saving partially completed forms or documents without the user having to click a button to submit a form. SPA 支持丰富的客户端行为,例如拖放,比传统应用程序更容易操作。SPAs can support rich client-side behaviors, such as drag-and-drop, much more readily than traditional applications. 可以将 SPA 设计为在断开连接的模式下运行,对客户端模型进行更新,并在重新建立连接后将更新最终同步回服务器。SPAs can be designed to run in a disconnected mode, making updates to a client-side model that are eventually synchronized back to the server once a connection is re-established. 如果应用要求包括丰富的功能,且超出了典型 HTML 窗体提供的功能,则选择 SPA 样式应用程序。Choose a SPA-style application if your app's requirements include rich functionality that goes beyond what typical HTML forms offer.

通常,SPA 需要实现内置于传统 Web 应用中的功能,例如在反映当前操作的地址栏中显示有意义的 URL(并允许用户将此 URL 存为书签或对其进行深层链接以便返回此 URL)。Frequently, SPAs need to implement features that are built in to traditional web apps, such as displaying a meaningful URL in the address bar reflecting the current operation (and allowing users to bookmark or deep link to this URL to return to it). SPA 还应允许用户使用浏览器的后退和前进按钮寻找用户意料之中的结果。SPAs also should allow users to use the browser's back and forward buttons with results that won't surprise them.

团队熟悉 JavaScript 和/或 TypeScript 开发Your team is familiar with JavaScript and/or TypeScript development

编写 SPA 需要熟悉 JavaScript 和/或 TypeScript 以及客户端编程技术和库。Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side programming techniques and libraries. 团队应有能力像使用 Angular 一样使用 SPA 框架编写新式 JavaScript。Your team should be competent in writing modern JavaScript using a SPA framework like Angular.

参考 - SPA 框架References – SPA Frameworks

应用程序已为其他(内部或公共)客户端公开 APIYour application must already expose an API for other (internal or public) clients

如果已提供一个 Web API 供其他客户端使用,则相较于在服务器端窗体中复制逻辑,创建一个利用这些 API 的 SPA 实现更加容易。If you're already supporting a web API for use by other clients, it may require less effort to create a SPA implementation that leverages these APIs rather than reproducing the logic in server-side form. 用户与应用程序交互时,SPA 广泛使用 Web API 来查询和更新数据。SPAs make extensive use of web APIs to query and update data as users interact with the application.

何时选择 BlazorWhen to choose Blazor

以下是有关何时为 Web 应用选择 Blazor 更加详细的说明。The following is a more detailed explanation of when to choose Blazor for your web app.

应用程序必须公开丰富用户界面Your application must expose a rich user interface

与基于 JavaScript 的 SPA 一样,Blazor 应用程序可以支持丰富的客户端行为,而无需重载页面。Like JavaScript-based SPAs, Blazor applications can support rich client behavior without page reloads. 这些应用程序对用户的响应更快,仅获取响应给定用户交互所需的数据(或 HTML)。These applications are more responsive to users, fetching only the data (or HTML) required to respond to a given user interaction. 如果设计得当,可以将服务器端 Blazor 应用配置为以客户端 Blazor 应用的形式运行,只需在此功能受支持后对它进行稍加更改即可。Designed properly, server-side Blazor apps can be configured to run as client-side Blazor apps with minimal changes once this feature is supported.

与使用 JavaScript 或 TypeScript 开发相比,团队更喜欢使用 .NET 开发Your team is more comfortable with .NET development than JavaScript or TypeScript development

与使用 JavaScript 或 TypeScript 等客户端语言相比,许多使用 .NET 和 Razor 的开发人员的工作效率更高。Many developers are more productive with .NET and Razor than with client-side languages like JavaScript or TypeScript. 由于已经使用 .NET 开发了应用程序的服务器端,因此,使用 Blazor 可以确保团队中的每名 .NET 开发人员都可以理解,并可能会生成应用程序前端的行为。Since the server side of the application is already being developed with .NET, using Blazor ensures every .NET developer on the team can understand and potentially build the behavior of the front end of the application.

决策表Decision table

下面的决策表总结了在传统 Web 应用程序、SPA 或 Blazor 应用之间进行选择时要考虑的一些基本因素。The following decision table summarizes some of the basic factors to consider when choosing between a traditional web application, a SPA, or a Blazor app.

因素Factor 传统 Web 应用Traditional Web App 单页面应用程序Single Page Application Blazor 应用Blazor App
需要团队熟悉 JavaScript/TypeScriptRequired Team Familiarity with JavaScript/TypeScript 最低Minimal 必需Required 最低Minimal
支持不带脚本的浏览器Support Browsers without Scripting 支持Supported 不支持Not Supported 支持Supported
客户端应用程序行为极少Minimal Client-Side Application Behavior 适合Well-Suited 不必要Overkill 可行Viable
丰富而复杂的用户界面要求Rich, Complex User Interface Requirements 受限Limited 适合Well-Suited 适合Well-Suited