摘录与访谈: 《HTML5 专业开发》

阅读数:4501 2010 年 10 月 12 日

话题:JavaScript架构HTML5语言 & 开发

由 Peter Lubbers、Brian Albers 和 Frank Salim 编著的《HTML5 专业开发》(Pro HTML5 Programming)一书,旨在帮助开发者们构建能够挖掘当今浏览器全部能力的 HTML5 应用。

该书主要涉及领域有:

  • Communication APIs:探讨构建实时和跨源(cross-origin)通讯的两大基础: 跨文档通讯(Cross Document Messaging)与 XMLHttpRequest Level 2。
  • Convas API:介绍有关动态生成与渲染图形、图表、图像和动画的 API。
  • Geolocation API:使用这个 API,用户便可共享自己的地理位置,并在 Web 应用的帮助下享用位置感知的服务(location-aware services)。
  • Web Sockets API:定义了一个全双工传输的通讯通道,它在 Web 之上通过单个套接字进行工作。
  • Web Storage API:探讨 HTML5 Web 存储(也就是 DOMStorage),该 API 令在多个 Web 请求间持久化数据变得简单。
  • Web Workers API:该 API 为 Web 应用提供了后台处理的能力。
  • HTML5 音频与视频:这些是 HTML 里新添的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的 API,而无需安装任何插件。

Apress 出版社特许 InfoQ 发布该书第六章《使用 HTML5 Web Sockets API》,并介绍该书作者之一接受 InfoQ 的访谈。

InfoQ 与该作者进行了一系列问答:

InfoQ:你好,Peter!能否简单介绍一下自己,并谈谈你们为什么会写一本关于 HTML5 的书?

Peter:我在 Oracle 工作了大约 8 年,然后在 2008 年成为 Kaazing 的第四名员工。从 WebSocket API 与协议(作为TCPConnection)被加入到 HTML5 规范开始,Kaazing 就一直涉入其中,并且对 HTML5 的发展起到了重要作用。早在 2008 年,我们就已经开始提供有关 WebSocket 的培训了,那时还没什么浏览器想到要支持它。我们的 WebSocket 网关能够完全(并且迅速)地模拟标准,所以你在 IE6 这种老式浏览器上也可以使用 HTML5 WebSockets。

在 Kaazing,我负责文档与培训的工作。 Kaazing 的创始人(Jonas Jacobi 与 John Fallows)是我在 Orcale 的同事,我曾帮助他们编校了 2006 年 Apress 出版的《JSF 与 Ajax》一书。正是他们建议我们三人—— Brian Albers(Kaazing 的开发副总裁)、Frank Salim(Kaazing 的“编码机器”)和我——写一本有关 HTML5 WebSockets 的书,可是我们发现市面上并没有 HTML5 的书,而且有关 HTML5 开发的资源也很少。

本书不是 HTML5 的入门书,也不是回顾 HTML 历史的书。 现在,我想我们都知道 HTML5 是个大项目,而本书会帮助你使用目前大多浏览器已采用的简单而又强大的 API。

InfoQ:HTML5 是什么?它要解决什么问题?你能介绍一下 HTML5 的各个部分以及它们之间的联系吗?

Peter:HTML5 不仅仅是 HTML 的更新换代,它已经孕育很久了。之前最新的 HTML(4.01)还是 10 年前发布的!

当我们谈及 HTML5 时,实际上它指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。比如说,HTML5 引进了新的画布(convas)和视频元素。虽然它们自身已经非常强大,但你需要将其与 JavaScript 和 CSS 一同使用,其全部能力方能显现。

HTML5 讲究简单性。它的一个理念叫做“沿着脚印铺路(pave the cowpaths)” [译注:这里字面意思为“沿着牛走过的脚印铺路”,在这里的意思是,如果一种做法已在开发者中间被广为采用,那么与其禁止它或发明新的做法,还不如考虑接受它并采纳为标准],这意味着它致力于让之前困难的事情变得非常简单。HTML5 还讲究原生的(native)浏览器功能。在 HTML5 里,你可以完成之前依赖于插件(如 Flash 和 Silverlight)或者必须用复杂的 JavaScript 脚本才能做到的事情。比如,HTML5 引进了原生的表单控件类型(日期、拾色器)与表格验证、原生的套接字(用于全双工通信)、原生的绘图 API(SVG、画布)以及内置的位置感知(使用 Geolocation API)。

InfoQ:目前的浏览器对各种 HTMl5 APIs 的支持如何?你认为未来会如何发展?

Peter: 浏览器对 HTML5 功能特性的支持正在以惊人的速度迅速增加——这是十分令人振奋的。许多流行浏览器(如 Chrome、Safari、Firefox 以及 Opera)已经能够支持 75% 到 90% 不等的 HTML5 特性了,而这个数字还在不断增加。

你可以通过html5test.comcaniuse.com网站来查询你所使用的浏览器支持哪些功能特性;这是检查飞速变化的 HTML5 支持情况的好地方。

即使是一直处于落后的 IE(IE6 仅支持 3%,IE8 支持 28%),在 IE9 中也“翻倍了”,支持将近 60% 的 HTML5 特性。其中一些功能还有硬件优化,这将推动其他浏览器加入进来。

InfoQ:你们的书中介绍了好几种 HTML5 APIs。你能否举一些例子来说明,它们将如何帮助开发者构建更好的应用?

Peter:当然!Web 应用已经越来越与桌面的功能不相伯仲。 比如,在 Kaazing,一位非常有才华的同事 Frank Salim 刚刚使用 WebSockets 与画布(convas)开发了一款 VNC 客户端——这在几年前(或者几月前)是无法想象的。

大体说,HTML5 便于我们开发出更具状态性和事务性的 Web 应用。你可以使用 WebSockets 直接连接到远程服务器,你也可以使用 Geolocation API 开发出位置感知的应用,并将他们与 Map APIs 相结合。你可以使用 SVG 和画布(convas)开发出令人惊奇的动画游戏(2D;但如果你愿意构建自己的浏览器,也可以是 3D)。

各个 APIs 都很强大,你只要将他们结合起来,就可以开发出非常棒的应用。比如,HTML5 支持用新的应用缓存(Application Cache)来开发脱机应用,也支持客户端 Web 存储(甚至是持久化存储,称为 localStrorage),那么当然,你可以将脱机应用与存储漂亮地结合起来;你可以进行脱机检查,而不必依赖不保险的浏览器缓存能力(点击“返回”后,之前的页面就没了)。现在,用户可以按他们所习惯的方式来使用整个应用了:尚未发出的数据被保存在客户端,待应用检测出你在线后,数据才被发到服务端。

InfoQ:你认为目前 HTML5 中还缺少什么?还应该添加些什么?是否有新的 APIs 出现?现有 APIs 有修改吗?

Peter:当然,还有很多东西需要打磨,浏览器也需要关注于互操作性。我们不应忽视 HTML5 原始的设计理念。我觉得,对各种 APIs 的二进制支持(跨文档通讯与 WebSockets)是需要改善的,还有对 3D 画布的支持也需改进。此外,不同特性的无障碍性(accessibility)还需改善。

WebGL 不仅将 OpenGL 引入到 JavaScript 中,它也创造了一个通用的二进制数据 API。高速的 3D API 需要二进制缓存,所以有人提议新推出一套用于操作二进制数据的 API,称为 TypedArray。如果该提议被采纳,TypedArray 将在 HTML5 中无处不在。

InfoQ:人们如何开发 HTML5 应用?有哪些主要工具可用于开发、调试和测试应用?

Peter:目前还没有很多集成开发环境(IDE)支持 HTML5。DreamWeaver CS5 的 HTML5 包和 Visual Studio 都提供了语法补全支持,不过你也可以直接使用文本编辑器(如 UltraEdit)或通用的 IDE(如 Eclipse)。

如今的浏览器调试功能非常强大,浏览器厂商们都在致力于为它们的开发工具增添一些很酷的功能。比如,Google Developer Tools 与 Speed Tracer、Safari Web Inspector、Firefox Firebug 以及 Opera Dragonfly,这些都是功能强大的浏览器调试工具。如果你有一段时间未跟踪此领域的话,你会对如此多的强大功能感到非常惊讶。

我发现我的浏览器每周都有功能更新。比如,Chrome 刚刚支持对脱机应用的调试以及应用缓存的查看功能,此外,还可以通过控制台来访问 Web SQL 数据库——太强了!

InfoQ:对于准备使用 HTML5 进行项目开发的团队,你有什么建议?有什么特别需要注意的地方吗?有什么“最佳实践”吗?

Peter:不要相信任何炒作,然后,再买本《HTML5 专业开发》就没问题了 ;-)

说真的,现在有很多不错的资源。可以看看 Google 的html5rocks.com网站。另外,Paul Irish 的 html5boilerplate 工具也很不错,它将多年经验融汇其中,并且采用了可以令你的网站与老式浏览器完美兼容的技巧与技术(一般来说,这是个大问题)。我认为,html5boilerplate 工具的文档(注释与代码片段)里包含了目前最好的最佳实践。此外,还有很多其他好网站也可参考。

我也在全球范围内提供 HTML5 培训(HTML5 快速追踪、Bootcamps 以及 WebSocket 课程),所以,如果需要快速入门的话,尽管联系我。

InfoQ:对于 HTML5 新手来说,这本书哪些部分最有价值?对于有经验的开发者呢?

Peter:HTML5 具有强大的简单性。

正像本书书名一样,《HTML5 专业开发》面向的读者群是对 HTML 和 JavaScript 有一定了解、并且希望使用新的 HTML5 API 的开发者。

不过,由于 HTML5 讲究简单性,所以对于 HTML、JavaScript 和 CSS 新手来说,HTML5 实际上要比看起来容易得多。我们希望本书能引发大家按有创意的方式来使用 HTML5 APIs。

《HTML5 专业开发》讲解了如何使用新的 HTML5 APIs,并通过实际例子展示了 HTML5 的功能特性,以及目前的浏览器支持其中哪些。我们挑选出了一些最常用的、实用而且强大的 HTML APIs 进行讲解,以便于读者快速上手。你将学习到如何使用 HTML5 的各种功能特性来开发 Web 应用,比如地理位置、Web 存储、 WebSockets、Web Workers、画布、音频和视频等等。

你会看到这些功能如何结合起来,无缝地与其他标准 Web 技术工作。我们的例子使用了 HTML5 文档,并充分利用了浏览器的基本功能。

你可以在 InfoQ 找到更多关于HTML5的信息。


给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家加入到InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。