单页面应用简介

原创
2017/01/13 10:00
阅读数 55

什么是单页应用?

单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

单页应用给传统网站带来的好处?
相对于传统网站,我们认为单页应用的主要好处是:

  • 它提供了更加吸引人的用户体验。单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性。

  •  
  • 单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站,许多用户操作都会重绘整张页面,结果是当浏览器从服务器获取数据时,页面会假死并有“闪烁”现象,然后再重绘页面上的所有东西。如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比,这是一种很恐怖的体验。

  • 单页应用可以拥有和桌面应用一样的响应速度—尽可能地把(临时的)工作数据和处理过程从服务端转移到浏览器端,单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑,因此是很快的。只有数据验证、授权和持久存储必须要放在服务端,原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比,这需要花费几秒钟的时间。

  • 单页应用可以和桌面应用一样,把它的状态通知给用户—当单页应用确实必须等待服务器的响应时,可以动态地显示进度条或者繁忙指示器,因此用户不会因延时而困惑。相比传统的网站,用户实际上只能猜测页面何时加载完并可用。

  •  
  • 单页应用像网络一样,几乎随处可以访问—不像大多数的桌面应用,用户可以通过任务网络连接和适当的浏览器访问单页应用。如今,这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。

  • 单页应用可以像网站一样即时地更新和发布—用户不需要做任何事就能明白它的好处:他们只要重新加载浏览器就行了。维护软件的多个并存版本的麻烦在很大程度上消除了。开发单页应用的作者,在一天之内就能构建和更新很多次。桌面应用经常需要下载并且安装新版本需要管理访问权限,版本之间的间隔可能是很多个月或者很多年。

  • 单页应用和网站一样,是跨平台的—和大多数的桌面应用不一样,精心编写的单页应用可以在提供现代HTML5浏览器的任意操作系统上运行。尽管这通常被认为是对开发人员的好处,但对很多同时使用多种设备的用户来说是非常有用的,比如工作时用Windows,在家用Mac,Linux服务器,Android手机和Amazon平板电脑。

所有这些好处意味着,你可能会想把下个应用做成单页应用。每次点击后都会重新渲染整张页面的笨拙网站,容易日益疏远富有经验的用户。精心编写的单页应用具有互动和快速响应的界面,还伴有访问网络的功能,这将帮助我们把客户留在属于他们的地方:使用我们的产品。

关于单页Web应用
单页Web应用(single page web application,SPA)无疑是目前网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。

单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点,网上讲解的文章有很多,这里就不展开论述了。 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

随着单页Web应用的崛起,各种框架也不断涌现,如Backbone.js、Ember.js、Angular.js等,还有RequireJS等模块化加载库。但是,本书没有讲解这些框架和模块化加载库,这也正是我最喜欢这本书的原因。作者坦言自己很少使用框架,认为框架的限制过多,一旦不符合框架本身的设计哲学,结果可能适得其反。在翻译的过程中,曾多次想给作者鼓掌,因为我一直以来的观点和想法多次和作者的不谋而合。当然我和作者一样,也并不反对使用框架。不管是按照书中的方法来开发,还是决定使用其他可用的框架库,书中的思想都是适用的。

本书作者主要是介绍他们多年来开发单页Web应用网站的经验,他们已经从中提炼出单页Web应用的架构设计,这些架构设计思想是本书的精华所在,是本书最有价值且最值得回味和学习的东西。我特别欣赏作者那种毫无保留的分享精神和对技术认真严肃的态度,讲解的过程中一直担心遗漏了什么,结果使得本书的“篇幅”大大超出了他们最初的计划。

关于封面插图

本书封面上的图片的标题是“Gobenador de la Abisinia”,或曰阿比西尼亚州长,今天叫做埃塞俄比亚。这幅插图取自首次于1799年出版的“西班牙地区服饰习俗概略”。

本文摘自即将上市的《单页Web应用:JavaScript从前端到后端》

单页Web应用或引领下一代Web新趋势?

 

摘要:一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面;对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合。使用HTML+CSS+JavaScript编写应用程序,能使更多的开发者都加入到程序开发的行列。

作者Steven Willmott是3scale网站的CEO,3scale为超过100家网络提供API服务,其中包括Skype等,也拥有超过60000名开发者为其编程;此外,他还为programmableweb和Gluecon社区做贡献。本文Steven为我们解读了利用HTML+JavaScript编写应用程序将引领下一代Web新趋势。

在旧金山创业公司3scale网站上经常有人会问道:“究竟什么样类型的Web架构会成为最终的赢家?是Html5还是App+API?”我们的答案非常简单:“将两者集合。” 来自Alexander Aghassipour和Shajith Chacko发表的这篇文章讲述了单页应用程序是如何创建而来的。文章讲述了Web应用设计趋势——利用JavaScript并访问核心API将多页的Web应用转换成单页的应用。开发单页Web应用利器新的前端架构包括Backbone.jsEmber.jsAngular.js以及Meteor;使用Gmail和Google Docs对于单页模式来说早已不是稀奇之事,Trello正是使用单页面程序元素(比如infinite scrolling/loading,in-line content无限滚动/加载,内链内容);此外,像Twitter、Facebook、Pintrest这些大型的社交网站都使用了单页面程序设计元素。

单页面应用是指用户通过浏览器加载独立的HTML页面并且无需离开此导航页面,这也是其独特的优势所在。对用户操作来说,一旦加载和执行单个页面应用程序通常会有更多的响应,这就需要返回到后端Web服务器,而单页面应用为用户提供了更接近一个本地移动或桌面应用程序的体验。

单页Web应用程序的优点:

  1. 首先,最大的好处是用户体验,对于内容的改动不需要加载整个页面。这样做好处颇多,因为数据层和UI的分离,可以重新编写一个原生的移动设备应用程序而不用(对原有数据服务部分)大动干戈。

  2. 单页面Web应用层程序最根本的优点是高效。它对服务器压力很小,消耗更少的带宽,能够与面向服务的架构更好地结合。

单页Web应用程序的缺点:

虽然还有一些历史遗留问题(大部分是针对HTML5的改进)以及SEO。如果你看中SEO,那就不应该在页面上使用JavaScript,你应该使用网站而不是Web应用。目前该技术还存在一些争议,但这并不是重点,因为这种类型的体系架构为SAAS Web Apps提供了一个极大的可用性。

单页Web应用程序的结构很简单:首先传递HTML文档框架;然后使用JavaScript修改页面;紧接着再从服务器传递更多数据然后再修改页面,如此循环。从性能的角度看,在现代浏览器中单页面Web App已经能够和普通应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器。使用HTML+CSS+Javascript编写应用程序,能使更多的人们都加入到程序开发的行列。

这足以说明,在Web设计过程中标志着Web将呈现一种新的趋势,它将一个分离的功能层作为API并将表示层用APP的形式体现出来 (HTML5或Native):

  • 单页面+API模式比基于应用程序的HTML多重页面更加灵活,因为底层API可用于多种不同的上下文、形式因素和设备类型。一旦网页内置了API,能够满足客户不同需求(比如合作伙伴vs最终用户)。

  • 该模式意味着本地Web应用能够为用户无论是基于什么平台提供更接近一个本地移动或桌面应用程序的体验。服务平台的移动后端比如StackmobParseAppceleratorKinvey以及Kii借助一些标准的API后端元素可提供跨平台用户体验。

  • 协议(如openAuth (oAuth) 成为作为用户授权的黄金标准已被广泛采用,提供了一个共同的模式。从应用程序和内容中将单独登录/授权问题分离出来。也就是说用户的身份可以从内容、功能和用户体验中清晰地分离出。

一个单页面Web应用程序就是一个Web应用程序,但结构不同。其中最重要的是:在第一次请求的时候,所有的标记语言(HTML)就已经传输到客户端,其余的请求都通过REST API获取JSON数据,数据的传输通过Web Socket API或远程过程调用。单页面应用程序可以说是分拆Web技术的最后一步——通过分离(css)内容,改进架构(XML和 XSLT)上的灵活性,调用服务器(AJAX)再到解压应用程序的导航页面结构。因此,这在Web发展中是个历史性的转折点。

目前这只是单页面Web应用开发的初期,但可以看出将单页面应用、APIs以及JavaScript结合在一起将成为许多流行应用的规范。

所以,当被问到“HTML5是App+API?”,我们会说,“两者皆是——将两者结合在一起要比以往快很多。”单页面应用是一个块非常大的拼图。当然,导航、历史性和SEO等问题也成为单页面Web应用的诟病。

那么,综上所述,您怎么看呢?

相对于传统网站,单页Web应用的优势在哪里?

 

相对于传统网站,我们认为单页应用的主要好处是:
它提供了更加吸引人的用户体验。单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性。

单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站,许多用户操作都会重绘整张页面,结果是当浏览器从服务器获取数据时,页面会假死并有“闪烁”现象,然后再重绘页面上的所有东西。如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比,这是一种很恐怖的体验。

单页应用可以拥有和桌面应用一样的响应速度—尽可能地把(临时的)工作数据和处理过程从服务端转移到浏览器端,单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑,因此是很快的。只有数据验证、授权和持久存储必须要放在服务端,原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比,这需要花费几秒钟的时间。

 

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信,还有更多惊喜哦~

 

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部