《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5

第 1 章 客户端架构

今天,客户端开发显然需要在HTML驱动应用架构中更多地思考和投资。随着Web应用的发展,我们见证了从具有紧耦合模板逻辑以及繁重的后端处理的传统服务器端框架向松耦合的JavaScript的转变,实现任何时候不管是上线还是离线都能运行。

但是,这只是过去的重复吗?在20世纪八九十年代,我们不是已经经历了胖客户端时代(如图1-1所示)吗?

和20年前不同,浏览器—如今的客户端平台要强大得多,更不要说移动浏览器了。此外,如今的客户端能够通过浏览器和蜂窝网络报告各种有趣的数据,例如你所在位置的经纬度。

推动浏览器成为客户端平台的另一个因素是许多公司,包括Google、Apple、Mozilla和Microsoft,每周对它们的混合胖客户端技术平台进行数千种改进。

过去,建立严重依赖服务器的应用程序大有益处,这使核心的后端开发人员无须担心DOM操纵和CSS。如果开发人员能够获得与后端代码紧密相关的数据表格或者分页组件,生成兼容IE6到IE8的标记,就很了不起了(见图1-2)。

但是,这种自动生成的标记是要付出代价的,特别是在当今快速变化、分裂的浏览器世界。我们一直都需要灵活可控的标记。开放Web的变化比任何时候都快,用户界面不再允许服务器成为过去的陈腐观念和如前高速可伸缩的前端代码之间的瓶颈,开发人员从未像现在这样关心过浏览器的性能。标记的显示和异步资源的加载可能成就你的应用,也可能毁灭它。更轻快的前端等于更多的线索转化、更高的SEO排名和更低的数据中心成本。

1.1 了解HTML5

在HTML5和移动设备出现之前,前端(或者UI)开发人员不用关心用户界面后面的架构,眼前充满的是破解(Crack)和专利的插件。许多开发人员专注于支持IE6、Firefox、Safari等少数几种浏览器,他们编写清晰的语义标记,担心XHTML的有效性,偶尔也会导入JavaScript程序库,以创建一些漂亮的效果。

一旦开发人员处理完浏览器的问题和给定应用程序的缺陷,剩下的事情就几乎一样了。高级Web应用程序的架构主要在服务器上被管理。应用程序依赖于入站HTTP请求的速度以及标记显示到用户Web浏览器的速度。利用服务器端模板和组件框架,服务器解析模板,数据与常规的XHTML或者HTML标记交织在一起;对于Java,则可以使用JSP、Velocity、Tiles、GWT或JSF来实现;对于Ruby,可以使用ERB、HAML或者RedCloth,这样的框架还在不断涌现。每个服务器端Web框架都有一个附属或者可以选择的UI模板引擎,这就是过去十几年的UI开发方法,而现在应该考虑建立新一代Web应用的方法了。

你可能会问“为什么我们需要改变前端的生成方式?”或者“为什么我们要将所有代码移到浏览器中运行,而不是在服务器上运行?”因为Web浏览器正在成为一个平台。我们的应用程序现在存在于比其前辈的能力提高了几个数量级的平台(或者浏览器)上。Web应用程序就是这样。我们不再创建网站,而是用HTML5、CSS和JavaScript创建可靠的应用程序。如图1-3所示是HTML5标志。

现在,我们应该回头看看应用程序的构建方法,为客户端编程打下基础。开发人员必须了解,为任何应用程序构建一个可伸缩、稳固的用户界面需要的框架和方法。

时间: 2024-08-03 23:14:45

《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5的相关文章

《HTML5和JavaScript Web应用开发》——1.2 在客户端放置更多代码

1.2 在客户端放置更多代码 不可否认,传统的服务器端模板正逐渐被JavaScript模板所取代.随着许多新JavaScript框架的出现,我们似乎也有些反应过度,但这就是技术发展过程中所出现的现象:由于浏览器变得更加容易移动,并且通过JavaScript API得到更多硬件访问能力,因此驱动UI的技术也在变化.从某种程度来说,客户端和服务器端方法中用户界面的构件是相通的,它们都需要显示和收集数据.我们仍然需要在代码中添加框架专有的标记或者属性,以便知道数据在哪里显示,但是不再需要依赖服务器.现

《HTML5和JavaScript Web应用开发》——2.2 决定支持

2.2 决定支持 基于目前移动领域的局面,我们必须支持多种平台和浏览器.当你使用HTML5的核心API时,你就被绑定到目标设备所支持的特性上,所以理解当今的移动浏览器及其发展方向至关重要. 编写跨越所有平台和浏览器的Web应用是一个很大的工程.以前,Web应用开发人员不关心桌面电脑是否连接了摄像头或者加速计,Web应用和操作系统及桌面硬件的能力也没有关系.现在,移动Web为我们构建的应用增加了另一方面的支持,浏览器和设备的分裂也令人兴奋,我们现在必须创建兼容不同浏览器.平台和设备的应用.例如,A

《HTML5和JavaScript Web应用开发》——1.3 浏览器(即平台)

1.3 浏览器(即平台) Web浏览器正在成为(或者已经成为)应用程序的另一个平台.在选择应用程序支持的时候,对浏览器的考虑至少和服务器端一样重要,我们的前端代码现在打包为HTML5驱动的原生应用.扩展和操作系统.正如我们在Google的Chrome OS和Mozilla的Boot2 Gecko项目中看到的一样,Open Web很明显被看作编写应用程序的一个平台. HTML5.Open Web和移动设备已经进一步推动了浏览器平台,使浏览器能够在离线状态下存储数据和运行应用,但是许多驱动这一平台的

《HTML5和JavaScript Web应用开发》——2.6 QA和设备测试

2.6 QA和设备测试 除了确定将要支持的浏览器外,你还需要一个简单的开发和测试方法.根据项目的规模,企业开发和QA周期可能很昂贵,所以建立合适的快速开发和测试环境是成功的关键. 因为当前移动市场主要属于Android和iOS,进行基于WebKit的测试相当简单,我们可以像平常在桌面浏览器那样进行测试,然后在某个版本的WebKit支持的目标移动设备上运行.但是,在桌面版本的Chrome或者Safari上测试应用,并不意味着在所有基于WebKit的移动浏览器上都能正常工作,也不意味着WebKit能

《HTML5和JavaScript Web应用开发》——1.4 结语

1.4 结语 不管你是为大公司还是为新兴的公司工作,你都必须磨练技能,眼光不要停留在漂亮的首页.黑客新闻或者社交网站上,而应该为当前的项目作出有价值的决策.你必须建立和维护编写.测试和调试代码与所选择框架的工作流.这些工作流可能包含许多程序库和过程,从使用JSHint自动化检查IDE,到用应用程序包含的所有JavaScript的精简组合版本测试代码.总而言之,理解并实施Web应用程序或者改进现有应用工具是很有价值的. 客户端应用架构仍然处于初级阶段,随着时间的推移,工具和过程将会越来越好,Jav

《HTML5和JavaScript Web应用开发》——第 2 章 移动Web 2.1移动优先

第 2 章 移动Web 2013年,消费者将会购买10亿部具有HTML5功能的移动设备.今天,半数的美国成年人拥有智能手机,也就是1.5亿人,其中28%的人将移动设备作为访问Web的主要手段.支持HTML5应用程序的浪潮正在涌来,开发人员正将重点转向移动开发. 即使在大型企业环境中,移动浏览器的统计数字也在上升,但我们仍然要面对这个事实-1/3的互联网用户仍然使用Internet Explorer 9以前的版本访问互联网.事实上,在某些情况下,这些早期的Internet Explorer用户占据

《HTML5和JavaScript Web应用开发》——2.4 浏览器分级

2.4 浏览器分级 上一节内容引出了一个重要的话题:浏览器分级.浏览器分级是任何移动Web项目必须考虑的,它给开发者和QA人员提供了应用程序开发和测试中保持清醒的一种手段,还详尽地解释了对用户支持的具体安排,以及移动Web应用能力的整体目标.表2-1展示了来自QuirksMode的一个浏览器分级示例.

《HTML5和JavaScript Web应用开发》——2.3 移动浏览器市场份额

2.3 移动浏览器市场份额 在浏览器市场份额的最新报告中,基于WebKit的浏览器明显占据领先,拥有80%的市场份额(见图2-5).现在Android和iOS占有统治地位,但是随着新操作系统(如Mozilla基于HTML5的移动B2G项目)的出现,我们可以看到持续的"浏览器战争"中的新力量. 随着科学技术的发展,基于WebKit的浏览器从2011年10月占据的75%市场份额提高到2012年的超过80%,Opera Mini的市场份额从18.65%下降到12%,Internet Expl

《HTML5 2D游戏编程核心技术》——第1章,第1.2节HTML5游戏开发最佳实践

本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.2节HTML5游戏开发最佳实践,作者[美] 戴维·吉尔里,更多章节内容可以访问"华章计算机"公众号查看. 1.2 HTML5游戏开发最佳实践 我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践. 1)窗口失去焦点时暂停游戏. 2)窗口重新获得焦点时实现倒计时. 3)使用CSS实现UI特效. 4)对于运行缓慢的游戏做出检测和处理. 5)添加社交功能. 6)把所有