面向对象的前端框架比较——WEB应用程序开发外文翻译资料

面向对象的前端框架比较——WEB应用程序开发

摘 要

现代web应用程序由于其用户界面中提供的功能而具有复杂的程序结构。由于整个应用程序的复杂性，手动编写程序代码可能会导致单个应用部件的质量和内容不稳定。维护这样开发的应用程序更加困难。因此，web应用程序通常使用不同的框架进行开发。框架允许结构化、更简单、更统一的程序脚本编写，从而更易于web应用程序维护。有各种各样的框架可用于开发web应用程序，适用于各类不同的web应用程序。根据各类框架的设计，web应用程序可以开发为多页（MPA）或单页（SPA）。本文解释了多页面和单页面 web应用程序之间的区别。结合单页面 web应用程序，说明了多页面应用程序的优点和缺点。设置了为创建多页面和单页面 web应用程序而优化框架所需的特性。这一假设已得到验证：有一个框架针对多页面应用程序和单页面应用程序的开发进行了优化，分析了使用前端框架的web应用程序的可能性、体系结构和开发技术，以及此类框架对多页面和单页面 web应用程序开发的适用性。根据现有框架的流行程度，为假设检验选择了一个框架。在三个最流行的框架上分析了所需的特性：Angular、Vue.js和React.js。研究表明，Vue.js框架是开发多页面应用程序和单页面应用程序的最佳框架。

关键词：单页面应用程序（SPA）； 多页面应用程序（MPA）； 框架；

导言

近年来，为了在所有领域取代旧的桌面应用程序，人们对高度复杂的web应用程序有着巨大的需求。还需要为移动设备创建桌面应用程序。复杂的web应用程序可以称为多页应用程序（MPA）和单页应用程序（SPA）。

Web应用程序开发通常基于特定框架（FW）的使用。经常使用框架创建web应用程序是否与多页面应用程序和单页面应用程序的开发一致？在开发web应用程序时，哪个框架更容易使用？框架是否适合管理web应用程序的前端部件？

本文的目的是证明可用框架对于创建多页面和单页面 web应用程序的适用性。其目的是定义关键功能，使多页面和单页面 web应用程序的开发更加个性化。

假设，有一个前端框架，它被优化用于创建多页面应用程序和单页面应用程序。

本文将解释多页面应用程序和单页面应用程序的含义，以及开发此类web应用程序的必要性。将定义影响多页面应用程序和单页面应用开发的问题。将通过对影响多页面应用程序和单页面应用开发的每个问题进行定性评估，对常用框架进行分析。

相关工作

要创建良好的用户体验，选择合适的web应用程序体系结构非常重要。在单页应用程序（SPA）和多页应用程序（MPA）之间进行选择时，通常需要对体系结构特征和用户需求进行更详细的分析。多页面应用程序通常用于具有大量不同类型服务的大型系统，这些系统更喜欢与访问者进行更多类型的交互。单页面应用程序是一种较新的web应用程序开发方法，通常用于开发内容较少的简单应用程序（Dimi，2017）。

多页应用程序以“传统”方式工作。浏览器中的任何更改（如显示或传输数据）都涉及从服务器检索新页面（Neoteric，2016）。路由是在服务器上注册的，从客户端到服务器的每个HTTP请求都涉及检索一个新的路由HTML页面。这意味着发送到服务器的请求将始终检索显示请求结果（所谓的视图）或错误的页面。大多数应用程序逻辑都在服务器上，而客户端只是检索到的页面的接收者。

这种web应用程序开发方法适用于开发较小的应用程序，例如，当Javascript[5]用于在加载的页面（用户界面）上执行更简单的活动或用于动画开发时。但是，如果需要创建要求更高的用户界面，页面可能会变得非常复杂，并且可以加载大量数据和程序元素（通常使用Javascript）来加载浏览器和应用程序客户端计算机。由于在服务器上创建复杂页面以及将其传输和显示到客户端需要大量时间，并且会降低用户体验，因此在21世纪初，多页面应用程序通过引入AJAX[6]进行了改进，AJAX6只允许刷新页面的一部分而不是整个页面。这项技术有助于改善用户体验，但它也支持开发更复杂的网页，使源代码的管理更加复杂。这是框架出现的原因之一（Shimanovsky，2016）。

单页面应用程序是一个完整的web应用程序，只有一个页面作为用户界面所有部分的“外壳”。大多数资源（Javascript、HTML5[7]、CSS[8]）在整个应用程序工作周期中只加载一次，数据从以前的状态传输到新的状态。在应用程序第一次打开时上载的初始HTML文档表示应用程序其余部分的起点。每个后续部分都是动态加载的，独立于“shell”，而不重新加载整个页面，让用户感觉页面已经改变了。shell的结构基本上是最小的，通常包含一个空标记（lt;divgt;），它将“承载”其余的应用程序内容（Emmit，Scott，2016）。

向服务器发出初始请求后，浏览器将加载完整的HTML页面。每个后续的客户端和服务器交互都是使用AJAX技术执行的，这意味着浏览器只更新页面中发生更改（数据）的一部分，而不刷新整个页面（Saxena，2014）。

多页面应用程序和单页面应用程序工作周期之间的主要区别在于请求和响应的性质，即一个多页面应用程序工作周期通过接收响应而结束，单页面应用程序工作周期持续并取决于用户通过用户界面的工作。单页面应用程序在向服务器提交请求时使用AJAX，作为响应，它们接收数据（通常在JSON[9]中）并接收HTML的一小部分以查看接收到的数据。一旦数据从服务器到达，客户端将形成接收到的内容，并将其显示在shell上的特定位置。

与多页面应用程序相比，单页面应用程序的一些优点如下:

（1）快速响应时间-由于单页面应用程序提前接管站点的结构，因此不需要不断请求从服务器获取新站点。当用户单击某个区域时，“立即”进行更改，这给人一种与移动或桌面应用程序交互的感觉。用户不必等待，或者至少没有等待的感觉。这是一个巨大的优势，也是单页面应用程序在今天如此流行的原因。

（2）将表示与业务逻辑分离–管理用户界面行为的代码包含在客户端，而不是服务器上。这使开发人员能够关注对用户体验和服务器上的关键业务逻辑元素重要的内容。因此，混合表示和业务逻辑更加困难，允许您分别维护和更新每一方

（3）更快、更容易的数据传输（带宽）-与服务器的交易越来越容易，因为在初始交付后，只有数据发送到服务器或从服务器接收（Emmit，Scott，2016，13）。

（4）离线支持的可能性-由于单页面应用程序使用在客户端运行的Javascript，因此不需要一直连接到服务器。可以确保当用户未连接或暂时不使用Internet连接时，应用程序仍能工作。在这种情况下，客户端上的本地数据将与这些数据同步在服务器上（应用程序团队，2013年）。

单页面应用程序相对于多页面应用程序有一些缺点：

• 搜索引擎优化（SEO）很难实现。它指的是优化网站（应用程序）以实现搜索引擎内容排名的最高排名（Fink，Flatow，2014）。每个搜索引擎有三个功能：

（1）爬行–它指的是网页信息的披露。这包括位置扫描和收集每页的详细信息：标题、图像、关键字、其他相关页面等。

（2）索引–在数据库中处理和存储通过爬网收集的数据。

（3）服务–此功能的目的是在用户在搜索引擎中查询时检索相关内容（Bruce，2016）。

当用户在单页面应用程序的用户界面上执行特定操作，并且需要下载新数据时，Javascript将只调整页面的一部分，而不会刷新和打开新页面。问题的出现是因为爬行涉及到根据URL和页面更改扫描内容，而单页面应用程序只有一个初始页面。爬虫不会知道页面已更改（Mikowski，2014）。

单页面应用程序的SEO每天都在改进。现在，有一些工具和方法可以实现服务器上应用程序部分的可视化，以便爬虫可以看到用户看到的内容。然而，这仍处于开发阶段，比其他（多页面应用程序）方法更难管理（Zanon，2015）。

• 必须启用Javascript-如果用户在浏览器中禁用Javascript，应用程序将不会以应有的方式显示。由于此类用户占1.3%，这可能是一个问题（Hein，2010）。
• 安全性需要做更多的工作-这一原则并不不安全，但由于这种创建应用程序的方法相对较新，一些安全问题得到了部分解决，需要更多的努力来研究解决特定安全问题的方法和最佳实践。

研究方法

3.1分析平台和框架

以下将解释将为多页面应用程序和单页面应用程序开发的框架自适应检查分析的问题。鉴于多页面应用程序和单页面应用程序之间存在差异，此类应用程序的开发也有不同的需求。因此，将为多页面应用程序和单页面应用程序开发的框架适应分析定义单独的问题。

表3-1 关于多页面应用程序的分析问题