为什么需要单页应用程序? [英] Why do we need a Single Page Application?
问题描述
单页应用程序(SPA)已经来了.随之而来的还有很多新事物，例如路由，客户端页面生命周期，MVC模式，MVVM模式，MV *模式等等.还有一些Javascript模式也来了，例如
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 ， 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?
欢迎提出所有建议.
推荐答案
我认为，这是大多数网站在考虑用户今天使用的设备数量以及每种设备的功能和局限性时应该朝的方向.
重要提示:
I believe that this is the direction most websites should be moving in considering the number of devices that users utilize today, and the abilities and limitations of each.
IMPORTANT:
在阅读本文的其余部分之前，请理解该概念是建立在Web设计基本原理的基础上的.为了为所有设备和情况设计一个单页面应用程序，不能将它作为一个单页面应用程序专门运行.您必须建立一个基础，使其能够在功能极为有限的最基本的浏览器上运行，并根据其设备的功能来增强用户的体验.
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.
这可能会为您带来更多的工作，但是您将能够满足更多，更多样化的受众的需求，这比将专门为现代台式机或手机浏览器构建的Web应用程序组合在一起要令人印象深刻.
单页应用程序更有能力减少页面的加载时间以及从服务器到客户端的数据传输量.
此方法影响最大的一些功能包括:
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屋！
