为什么我们需要单页应用程序? [英] Why do we need a Single Page Application?

问题描述

单页应用程序 (SPA) 已来到我们面前.很多新东西也随之而来，比如路由、客户端页面生命周期、MVC 模式、MVVM 模式、MV* 模式……还有一些 Javascript 模式也出现在我们面前，比如 AMD 模式，单身, 立面,..

The Single Page Application (SPA) has come to us. A lot of new things come with it as well, like Routing, Page life cycle at client side, MVC pattern, MVVM pattern, MV* pattern,... and some of Javascript patterns also come to us like AMD pattern, Singleton, Facade,..

还开发了许多 SPA 框架和库.我们可以在互联网上找到其中的一些.它们是 AngularJs、Reactjs、BackboneJs、DurandalJs，.. 以及许多第三方组件使 Javascript 编码更容易，例如 RequireJs、Amplifyjs、BreezeJs...

A lot of SPA frameworks and libraries also were developed. We can find out some of its on the internet. They are AngularJs, Reactjs, BackboneJs, DurandalJs,.. and a lot of third party components to make the Javascript coding more easy like RequireJs, Amplifyjs, BreezeJs...

但我只是想为什么我们需要SPA?因为它被视为在开发 Web 应用程序时引入了一些新的复杂事物.尽管有 SPA，我们可以使用传统的 web 应用程序，每个请求每个加载页面.我只是看到一个好处，比如我们可以很容易地在移动设备上运行它并适应新的 Web 应用程序开发趋势.有人能解释得更清楚吗?

But I just think why do we need the SPA? Because it's seen to be introducing some of new complex things in developing the web application. Inspite of the SPA, we can use the traditional web application, each request each loading page. I just see a benefit like we can be easy to run it on the mobile and adapt with a new web application development trend. Could somebody explain more clearly about that?

还有一件事，如果我们使用很多第三方组件来组合一个 SPA.那么它是否使这个 Web 应用程序具有一致性?我认为在我们的 Web 应用程序中维护一个巨大的组件应该会很复杂.你怎么看?

One more thing, if we use a lot of third party components to composition just one SPA. So does it make a consistency for this web application? I think it should make a complex for maintain a huge components inside our web application. How do you think about that?

欢迎所有建议.

推荐答案

---

考虑到当今用户使用的设备数量以及每个设备的能力和局限性，我认为这是大多数网站应该朝着的方向发展.

<小时>

重要提示:

在阅读本文的其余部分之前，请了解这个概念是建立在网络设计基本原则的基础上的.为了设计适用于所有设备和情况的单页应用程序，它不能作为单页应用程序专门运行.您必须打下基础，才能在功能非常有限的最基本浏览器上运行，并根据用户设备的功能增强用户体验.

Before reading the rest of this, please understand that this concept is built on the foundation of basic principles of designing for the web. In order to design a single page application for all devices and situations, it cannot be run exclusively as a single page application. You must build a foundation that will work on the most basic of browsers with highly limited features and enhancing the user's experience according to their device's capabilities.

这可能会给您带来更多的工作，但您将能够满足更多、更多样化的受众，这比专门为现代桌面或手机浏览器构建的网络应用程序更令人印象深刻.

单页应用程序更能减少页面加载时间和从服务器到客户端的数据传输量.

此方法的一些影响最大的功能包括:

Some of the most heavily impacting features of this method include :

• 在第一次加载后存储任何全局功能，
• 允许更轻松的页面之间的数据传输和更复杂的用户界面
• 当您只需要特定组件时，无需在回发后加载整个页面的成本

这种设计方法可能会导致开发人员的懒惰和来自最终用户的更多干扰.作为开发人员，请确保您的 UI 完成其工作(获取、显示和提交到服务器)并且服务器完成它的工作(提供、验证和提交到数据库).大多数最终用户不会尝试使用 javascript 文件中的信息来破坏您的系统，但在我看来，包含有关您的数据结构的信息会带来麻烦.

This design method may allow for laziness in the developer and more interference from an end user. As a developer, be sure that your UI does it's job (get, display and submit to server) and that the server does it's job (provide, validate and submit to database). Most end users won't attempt to break your system using the information in a javascript file, but including information about your data structure is asking for trouble in my opinion.

与任何网页一样，数据处理可以直接移动到服务处理程序而不是页面，这可能导致架构利用以下层:

As with any webpage, the processing of data can be moved directly into service handlers instead of pages which could result in an architecture utilizing the following layers:

• 数据库(数据存储)
• BL(数据处理和传输)
• 用户界面(数据显示和用户交互)

在我看来使用服务几乎是网站中组织和调制代码的要求.向后兼容网站中使用的标准 get 和 post 方法也可以使用这些服务来命中代表业务对象而不是页面的服务.这允许您的代码在涉及相同对象的模块之间更加通用.

In my opinion using services is pretty much a requirement for organized and modulated code in a website. The standard get and post methods used in backwards compatible website can also use these services to hit services representing business objects instead of pages. This allows your code to be more generalized across modules concerning the same objects.

然后，对单页应用程序的更新变得简单，因为您可以初始化任何 UI 以获取 get 或 post 方法并使用 AJAX 方法执行它们，而不是导致事件回发，因此是单页实例.

The update to a single page application then becomes simplistic in that you can initialize any UI to pick up the get or post methods and perform them using AJAX methods instead of causing a postback for events, thus a single page instance.

使用这些服务处理 UI 事件的一个副作用是，除了生命周期事件之外，您无需在代码隐藏文件中进行事件处理.生命周期事件可用于处理和修改相关数据以根据情况显示以及修改返回的 html 以减轻用户设备的负载.

A side effect of using these services to handle UI events is that you eliminate the need for event handling in a code behind file except for life cycle events. The life cycle events are useful for handling and modifying relevant data to display based on the situation as well as modifying the returned html to lighten the load on the user's device.

任何复杂的网站都会带有复杂的模块和大量独特的组件.

使用单页应用程序的一个好处是，您可以选择将加载时间推迟到 ajax 进程，并在您喜欢应用程序的任何部分时这样做(即第一次尝试使用模块，死初始页面加载后的时间等)，使初始加载速度更快，处理时间更可控.

A benefit you gain from using a single page application is that you have the option to deffer the load time to an ajax process and do so whenever you like for any part of your application (i.e. first attempt to use a module, dead time after initial page load, etc), making the initial load faster and the processing time more controlled.

至于最佳实践......对于打算使用这种方法的设计，可以而且应该进行一些相当多的优化，例如:

As for best practices.. there are quite a few optimizations that could and should be made to a design intending to use this method, such as :

• 存储信息，不再相关时删除
• 仅在需要时通过 ajax 加载脚本、html 和 js 文件
• 如果可以的话，使用一个页面上加载的数据，而不是为每个新页面"重新加载
• UI 的极简数据结构，因为它是一种显示方式而不是处理方式.
• 不要痴迷于 UI 上的验证，因为您的服务应该已经构建为验证提交给它的任何信息

这些优化对加载时间、数据处理和对象关联很有帮助.显然，这不是一个完整的列表，但它是构建单页应用程序的一个很好的开端.

These optimizations are helpful with load time, data handling and object associations. Obviously this is not a complete list, but it is a great head start to building you single page application.

最后，我建议研究为一个网络设计的概念，以帮助建立坚实的基础.之后，剩下的就是比较简单的增强了.(提示:其中一项增强功能是捕获导致回发的所有操作，并使用该信息来构建异步调用).

Finally, I would suggest researching concepts for designing for one web to help build a solid foundation. After that, the rest is relatively simple enhancements. (TIP: One of those enhancements is to catch all actions resulting in a postback and use the information to build a asynchronous call instead).

关于这方面有各种各样的信息，也有各种各样的库可供使用，但我建议尽可能多地使用您自己的代码来实现基本功能并进入解决您的问题并进行一些研究的库代码，而不是尝试使用通用库代码实现复杂的系统.以他们的代码为例，可能会针对您的特定情况产生更小的开销和更强大的代码.

There is all sorts of information on this, and all sorts of libraries to use, but I would suggest using your own code as much as possible for the basic functionality and to get into the library code that solves your issues and do some research instead of trying to implement a complex system with generic library code. Using their code as an example may lead to a smaller overhead and stronger code for your specific situation.

祝你好运！

这篇关于为什么我们需要单页应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！