APP下载

基于原生JS的单页Web应用的架构设计

2019-02-03施莹

现代职业教育·职业培训 2019年12期
关键词:桌面浏览器客户端

施莹

[摘           要]  精心编写的单页Web应用具有互动和快速响应的界面,还伴有访问网络的功能。在很长一段时间内,Flash和Java都是客户端平台上使用最为广泛的单页Web应用,因为它们的功能、速度和一致性,都超过了那些使用JavaScript(JS)和浏览器来渲染的应用。但是最近,JS和浏览器渲染达到了一个引爆点,它们克服了最大的缺陷,比其他客户端平台具有显著优势。关注使用原生的JS和浏览器渲染来构建单页Web应用,并提供一个基于常见JS技术架构单页应用的解决方案。

[关    键   词]  单页Web应用;JavaScript;浏览器;架构设计

[中图分类号]  TP393                    [文献标志码]  A                    [文章编号]  2096-0603(2019)36-0266-02

流行的MVC框架关注的是为客户端提供一页页的静态内容,这是传统网站慢的原因之一。例如,当浏览者在某个传统网站上点击链接时,页面会“闪白”,过几秒钟后所有的东西都会重新加载:导航条、广告、标题、文本和文档底部都会重新渲染,唯一改变的东西只是一些图片或描述性文字。这些旋转图标所消耗的时间成本是惊人的。更糟糕的是,当页面中的某些元素可用的时候,却没有任何提示。对经验越来越丰富的Web浏览者来说,这种迟钝的、不一致的体验就变得难以接受。

单页Web应用(Single Page Web Application,SPA)是目前网站开发技术的热点,是另一种更好的开发Web应用的方法。很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也大量涌现,如Gmail、Coding、Cloud9等。

一、单页Web应用

单页Web应用是只有一张Web页面的应用,它就是浏览器中运行的桌面应用,在使用期间页面不会重新加载。它适合放在单个可滚动网页上的Web应用程序或网站,它们会动态地加载合适的内容来响应用户操作。它们支持在单个页面上与多个组件进行丰富的交互,具有快速响应的体验。

单页Web应用像所有的应用一样,旨在帮助用户完成任务,比如“编写内容”或者“管理Web服务器”。可以认为单页Web应用是一种从Web服务器加载的富客户端。

二、原生的JavaScript单页应用

JavaScript(JS)经过很长一段时间的发展,它的大部分缺点被缓解了,它的价值优势也水涨船高,目前已成为全球最热门的编程语言之一。JS具有部署简单、支持跨平台开发、运行速度快等优点,尤其适用于绝大多数的单页Web应用。在超过数十亿计的支持现代Web浏览器的设备上,都能见到基于JS的单页应用,并且不需要专有的插件。只要稍许多做点工作,它就可以支持运行很多不同操作系统的各种设备。

原生的JavaScript单页Web应用,从前端到后端都使用JavaScript来开发,业务和显示逻辑皆使用JavaScript来编写,由浏览器执行,如图1所示。JavaScript利用浏览器技术来渲染界面,如HTML5、CSS3、Canvas或者SVG,从而构建具有吸引力的、稳健的、可扩展的和易于维护的单页Web应用。

三、单页Web应用的架构设计

相较于传统网站,单页Web应用最主要的变革发生在浏览器端,浏览器一开始会加载必需的HTML、CSS、JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和架构设计的重要性不言而喻。

單页Web应用可以使用许多服务器技术,但如果将Web应用转移到了浏览器端,对服务器的要求就大大降低了。图2展示了单页Web应用中数据库、服务器、客户端(浏览器)的三层分工,与传统网站相比,业务逻辑和HTML的生成从服务器迁移到了客户端(浏览器)。

(一)客户端

在客户端(浏览器),使用用来操作DOM的jQuery,包括历史管理和事件处理的插件,同时使用TaffyDB2来提供高性能的、以数据为中心的模型,使用Socket.IO提供在服务端和客户端之间无缝的、近实时的消息传输。随着单页Web应用的崛起,各种JavaScript框架也层出不穷,如Backbon.js,Ember.js,Angular.js等,还有RequireJS等模块加载器。但是各个框架有其自身的限制,一旦不符合框架本身的设计哲学,结果可能适得其反。不管是否使用框架库,单页Web应用的设计思想都是适用的。

(二)Web服务器端

单页Web应用服务器最常见的职责是认证与授权、数据验证和数据的存储与同步。在服务器端,使用Node.js作为基于事件的Web服务器,Node.js使用Google V8 JavaScript引擎,擅长处理成千上万的并发连接。在Web服务器上也使用了Socket.IO,这样可以实现在客户端和服务器之间快速响应和轻量的全双工通信。由于单页Web应用的大多数代码都在客户端,后端可以用任何语言编写,只要它能很好地满足应用的要求即可。后端使用JavaScript编写,可以使编程环境保持一致,并能简化全栈开发。

(三)数据库

使用数据库服务器,为数据提供可靠的持久存储。数据库要放在服务端,因为客户端的数据存储是临时的,且容易发生应用错误、用户错误或篡改用户。在数据库端,可使用MongoDB数据库,它是一种NoSQL数据库,使用JSON来保存数据和通信,包含JavaScript API和命令行接口。JSON是一種JavaScript原生的数据格式,客户端使用的也是相同的数据格式。

当然,单页Web应用可以使用很多其他的服务端和数据库技术,可以不选择JavaScript这种方式,不管后端使用的是什么技术,大部分单页Web应用的架构思想和开发技术都是相通的。

四、原生的JavaScript单页应用优缺点分析

(一)优点

单页Web应用具有桌面应用的即时性,也同时具有网站的可移植性和可访问性。单页Web应用的最主要的优点是:它提供了更加吸引人的用户体验。

1.使用单一的JavaScript语言

在整个开发过程中,使用的语言是JavaScript,使用的数据格式是JSON,使用了单一的语言,这就提供了在客户端和服务器之间移动并共享代码的机会,大大减少了代码的体积和复杂度,同时节省了开发人员的时间,避免了混乱,因为几乎没有了语言和数据格式之间的环境切换。

2.单页Web应用可以和桌面应用一样渲染

单页Web应用只需重绘界面上需要变化的部分。相比之下,传统网站的许多用户操作都会重绘整张页面。如果页面很大,服务器又繁忙,或者网络连接很慢,当浏览器从服务器获取数据时,页面会持续好几秒或者更长时间的“闪白”等待。

3.单页Web应用可以拥有和桌面应用一样的响应速度

单页Web应用尽可能地把工作数据和处理过程从服务端转移到浏览器端,在本地拥有大多数需要决策判断的数据和业务逻辑,只有数据验证、授权和持久存储必须要放在服务端,因此响应时间大幅缩减。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,必须等待一个“请求—响应—重绘”的循环周期。

4.单页Web应用可以和桌面应用一样,把它的状态通知给用户

当单页Web应用必须等待服务器响应时,可以动态地显示进度条或繁忙指示器,用户不会因为延时而困惑。

5.单页Web应用与网站一样,可以随处访问且跨平台

和大多数桌面应用不一样,精心编写的单页Web应用可以在提HTML5浏览器的任何操作系统上运行,用户可以通过任何网络连接来访问单页Web应用,包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。

(二)缺点

1.单页Web应用目前遇到最大的挑战就是对搜索引擎不友好,JavaScript生成的页面内容不能被搜索。搜索引擎为网站建立索引的时候,爬虫机器人并不会执行单页Web应用用来生成内容的JavaScript,这样用户就无法通过搜索引擎找到所需的东西。这对单页Web应用非常不利,如果不能出现在搜索引擎上,意味着可能会对业务造成打击。这个棘手的SEO问题需要搜索引擎公司和开发人员的不断尝试和配合。

2.单页Web应用要在一个页面上为用户提供产品的所有功能,这个页面首次加载的时候,需要生成大量的静态资源,这个加载时间相对比较长。

3.单页Web应用开发难度相对较高,开发者需要同时对组件化、设计模式有所认识。由于单页Web应用的很多逻辑从服务器转移到了浏览器端,开发单页Web应用所需要编写的JavaScript代码,在规模上至少要比传统网站大一个数量级。开发人员所面对的不再是一个简单的网页,而是一个运行在浏览器环境中的桌面软件。

五、总结

单页Web应用的发展造就了H5更为接近原生APP的体验。对想要保持尽量好的用户体验的同时,又要节省研发成本的团队而言,无疑是一个不错的选择。单页Web应用的开发会遇到很多挑战,但随着技术的不断发展和开发者的不断努力,这些挑战会被一一突破。

参考文献:

[1]埃米顿.A.斯科特.SPA设计与架构:理解单页面Web应用[M].北京:电子工业出版社,2016:8-9.

[2]本·雷迪.Serverless架构:无服务器单页应用开发[M].北京:电子工业出版社出版,2017:306-308.

[3]彭玲玲,李诗莹,冯爽.基于前端的Web性能优化[J].电子技术与软件工程,2017(24).

[4]仇晶,黄岩,柴瑜晗.基于Node.js中间层Web开发的研究与实现:以微信图书借阅平台为例[J].河北工业科技,2017(2).

◎编辑 赵瑞峰

猜你喜欢

桌面浏览器客户端
微软发布新Edge浏览器预览版下载换装Chrome内核
桌面装忙
虚拟专用网络访问保护机制研究
新闻客户端差异化发展策略
液体对容器底及容器对桌面的压力和压强
用好Windows 10虚拟桌面
浅析IEEE 802.1x及其客户端软件
浏览器
lE8设置技巧大放送