专访HTML5 Boilerplate项目核心成员——石川

标签: html5 boilerplate 项目 | 发表时间:2012-03-14 14:42 | 作者:
出处:http://pipes.yahoo.com/pipes/pipe.info?_id=10560380f804c7341f042a2b8a03e117

HTML5 Boilerplate项目是一个出色的前端开发框架,知乎上有 一个话题介绍了该项目的特性。在项目的核心开发人员中,有一位华人,他就是石川。

前不久,InfoQ对石川进行了专访。

InfoQ:能否先介绍下您自己,以及您现在所从事的工作呢?

石川:我目前从事的工作主要是独立网络开发,设计自己的产品,写小说,用一年游牧世界。

在过去几年做了些比较公开的开源的项目,包括:

此外,我还受 Packt Publishing 邀请撰写,出版了关于移动网络的《 HTML5 Mobile Development Cookbook》 一书。我还为Net Tuts等刊物写一些 技术类文章

因为几年为一些国外企业做咨询顾问,积累了些知识,所以在闲暇之余帮 w3ctech.com录制一系列 JavaScript,HTML5,Mobile 相关的公开课。

InfoQ:您觉得HTML 5中哪些部分是最重要,如果想要接触HTML 5可以如何着手呢?能否针对HTML 5的常见部分,例如Web Socket,Web Worker等等,提一些适用的场景呢?

石川:因为现在的网络已经大到很难一概而论。所以我觉得应该分为下面几类来说:

  • 应用程序 - Local Storage、Indexed DB还有File API都会对应用程序编写有用。
  • 游戏制作 - Canvas、WebGL适用于游戏制作。Web Sockets对网游特别是MMORPG类游戏很重要。
  • 移动网络 -  就移动网络而言,geolocation API等Device API适用于制作地图、团购类网站。
  • 网页编写 - 对传统信息类网站而言,Semantics和CSS3最为重要。

InfoQ:现在各浏览器及移动平台对于HTML 5的支持程度不一,甚至在国内还有低版本的IE无法摆脱,请问您认为如何在实际项目拥抱HTML 5才是最有效的方式呢?

石川:从技术层面上来说,这个并不是问题。使用 modernizr 一类的工具(包括在HTML5 Boilerplate 中),可以检测某个 HTML5 部分在浏览器本身的可用性。几乎所有HTML5常用的部分都有polyfill (一段代码或插件,提供开发者浏览器本身不能支持、提供的技术)。在 http://html5please.com上面,开发者可以查找想要使用的 HTML5,CSS3 等功能,知道他们是否已经可以使用;若是,可以知道你应该如何使用它们,用什么 polyfills,如果不被支持,怎么解决。从中你也可以知道哪些需要谨慎使用,或者避免使用。如果决定使用,可以使用 yepnope来在需要情况下加载 polyfills。

从市场角度,我觉得开发者应该对针对的用户群体来分析要不要使用一个HTML5的功能,如果使用,要不要考虑兼容问题。比如 Facebook 是最早不支持IE6的公司之一,由于他们拥有较大的市场份额,使得他们在一定程度上对想要支持的平台有着一定的主导权。Twitter 选的是中庸之道。他们没有完全取消对较老版本的浏览器支持,但同时在渐进增强 (progressive enhancement)。这样在不影响使用较老版本浏览器用户的基础上,使得使用新版浏览器的用户有更好的体验。Google 选择的是向后兼容(backward compatible), 但是定期提高对各浏览器最低版本要求的底线。

InfoQ:现在很多人把HTML 5在各个浏览器之间存在差异,归结为HTML5规范还没有正式推出。但是回首过往HTML 4正式发布后,浏览器的差异也还是有的。那么HTML5时代是否还是会存在这类问题?也就是说,就算HTML5正式出来了,还是每个浏览器有很大不同。相对于HTML4时代会有好转吗?

石川:从浏览器制造者来来,之前的很大的问题出自于微软的 IE 没有自动更新,而 Chrome, Firefox 和 Opera 都有自动更新。现在微软也加入了自动升级的行列,所以开发者对 HTML5 的发展应该是非常乐观的。

在市场中,大部分的网站是中小型企业以外包形式给广告公司来做的。这个行业中客户经理和顾问的水平参差不齐。在这样的情况下,开发者可能要加强沟通,根据不同客户的背景、要求、技术的革新与项目经理沟通。

InfoQ:请问您怎么看待Microdata? 很多人都说这东西目的是好的,意义是伟大的,但是操作和推广起来有难度(很少有网站愿意去做),您怎么觉得呢?

石川:Microformats 和 Microdata 在前些时候引起过一些 非常大的争议。HTML5 Boilerplate 的组员 Paul Irish,Divya,包括我自己在内,认为作为开发者,多数人在实际操作中很少使用Microformats 和 Microdata,我觉得对 Microformats 和 Microdata 有一定的了解是好的,但是不觉得他们是 HTML5 中现阶段的重点。

但是以 Jeremy Keith 为主的很多开发者则提出过 不同的观点,他和很多类似的前辈则认为Microformats 和 Microdata 应该得到积极的倡导。认为虽然现阶段存在不足,但是搜索引擎,web crawler,和浏览器可以从网页中提取和处理 Microdata ,并用它来为用户提供更丰富的浏览体验。

个人的结论是如果一个网站是以提供信息为主的,那么对 Microformats 和 Microdata 的使用可能会在未来产生一定好处,仍然坚持认为总体来说,特别是对应用为主的网站则意义不大。

InfoQ:怎么看待Mozilla的B2G,还有HP开源WebOS,还有微软大肆宣传的“可以用HTML 5技术给Win 8写应用”?您觉得基于HTML5技术做系统级别的应用程序靠谱吗?主要障碍会有哪些?

石川:我觉得用 HTML5 编写应用程序完全靠谱。但是各大公司推出的 SDK 就要对针对的用户而论。有些框架过于臃肿,有些则轻巧。总体来说,我觉得用 HTML5 编写是一件好事,因为 HTML5 的开源性,以及整个行业的共享文化,会加速科技的进步而且将渗透颠覆一些传统行业。

主要的障碍会来自开发者对复杂的 JavaScript 编写缺少了解。因为 JavaScript 已经不是一个简单的脚本语言,在它向一门专业的编程语言的过程中,一些对此了解不透彻的开发人员难免会遇到:

  1. 初学者可能对纯 JavaScript 的历史缺乏了解,以为这些框架和工具在 JavaScript 的基础上加了很多层复杂的概念,做了很多改变。
  2. 对于只对 JavaScript 有初步了解的开发者来说,可能学习并不是件容易的事。

InfoQ:目前用HTML5开发复杂应用的越来越多(游戏和应用等等), 但是HTML5以及JavaScript开发一直缺少好用的开发工具,未来这种状况是否能够改善?现在该如何应对这种情况呢?

石川:这个要看工具的定义。现在用于各种语言开发的工具基本分为两种。比如 Adobe 推出的 Flex Builder 和 SDK,前者是 GUI 工具,而后者则是非 GUI 工具。在对比较基础的、重复性的工作上 GUI 确实加快了开发速度。但是真正开发应用或游戏的人在大多数时间还是用 Code View, 而不是 GUI。

目前我们所说的 HTML5 以及 JavaScript 没有很好的开发工具,指的是 GUI 一类的。 其实非 GUI 但是很好用的工具是有的,比如在 JavaScript MVC 方面,工具有 backbone.jsSpineSproutCore 等;在 MVVM 方面则有 Knockout JS;在CSS3 UI 方面有 Twitter Bootstrap

Juho Vepsäläinenjswiki 对不同的 JavaScript 工具做了很全面地总结。 Addy Osmani 也在 Tools For jQuery Application Architecture – The Printable Chart 中很详细列出:如何搭配使用不同工具快速有效地制作出前端应用。

这个对中高级的开发者应该不是问题,是很容易面对的。但是对于初学者来说,就会有较高的门槛。我觉得这个不应该作为让开发者对 HTML5 以及 JavaScript 开发“望而却步”的原因,因为往往太好用的 IDE 会让后来学习的人懒得去研究这些技术的本质。所以抓住机会使用已有工具开发是可以做到有效的,同时也是个学习的过程。

InfoQ:HTML5游戏被讨论的很多,但是很多人觉得HTML5在游戏开发上永远也不是Flash和Unity3D等专业游戏开发工具/技术/引擎的对手,您怎么看?HTML5的安全性和源代码开放性是否适合网页游戏开发?它在哪些领域将可能取代Flash?

石川:跟欧美的开发者相比,国内 (或者说亚洲包括韩国)的 HTML5 开发者比较把注意力放在网游上,这当然与中国的特殊市场环境有着一定的关系。早在 HTML5 之前,因为知识产权及盗版等问题使得国内的游戏开发者将大多数的游戏开发精力放在网络上,现在 HTML5 的出现使得网络游戏有了新的开发平台。

我觉得短期内,HTML5 不会取代 Flash 。Adobe 目前决定将 Flash 的重点放在游戏的开发上,这无疑是出于市场考虑 (缩小范畴),Flash 孤注一掷在游戏上。但是 HTML5 肯定会扩大市场。现在已经有比较不错的工具比如 LimeJS (免费), impactjs(商业)等。在 3D 方面,和 Unity3D 比,HTML5 的工具还有一定差距,但是随着 WebGL 的发展,可能会在未来拥有一定市场。

前些时候独立游戏工具制作者 Game Closure 因为在Google I/O 2011 时展出了他们的游戏工具半成品,之后拒绝了Zynga 收购而备受瞩目,Game Closure 推出了一系列的工具为游戏工具铺路:

  • js.io - 建立实时应用程序的 JavaScript Networking 库
  • webgl-2d - Canvas2D API in WebGL
  • hookbox - 一个Comet 服务器
  • orbited2 - 在每一个浏览器都可以使用

WebSocket开发者之一 @ louisstow 刚刚(2012年3月11日)在他的 博客文章上写到关于 Game Engines 的想法。

关于安全问题,在使用 Local Storage,Web Messeging 和 WebSocket  时,有一些需要注意的事项,比较具体的可以参考 Open Web Application Security Project (OWASP) 的 文章。但由于大多数浏览器的及时升级,这些应该不会影响到开发。


石川的微博是: http://weibo.com/shichuan5,他的博客地址是: http://www.blog.highub.com/。欢迎大家关注石川和HTML5 BoilerPlate项目。

赵劼 网名为老赵,洋名Jeffrey Zhao,写有技术博客“老赵点滴”。关注前沿技术,并致力于开源社区与微软平台的组合优化。

  • 本文所属的特别专题为 RIA

相关 [html5 boilerplate 项目] 推荐:

专访HTML5 Boilerplate项目核心成员——石川

- - InfoQ cn
HTML5 Boilerplate项目是一个出色的前端开发框架,知乎上有 一个话题介绍了该项目的特性. 在项目的核心开发人员中,有一位华人,他就是石川. 前不久,InfoQ对石川进行了专访. InfoQ:能否先介绍下您自己,以及您现在所从事的工作呢. 石川:我目前从事的工作主要是独立网络开发,设计自己的产品,写小说,用一年游牧世界.

HTML5 Boilerplate 不再支援 legacy browser

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
HTML5 Boilerplate 在 V5.0 版本將不支援舊有瀏覽器,包含 IE6/7. Firefox 3.6 (Mozilla 已經不再維護) 及 Safari 4,詳細資料可以參考 V5.0 的 Milestone ( Drop legacy browser support) 下一版本會有哪些改變呢.

使用 HTML5 Boilerplate 开始您的 web 开发

- - IBM developerWorks 中国 : 文档库
本文提供 HTML5 Boilerplate 项目的一个技术简介,其中包括该项目形成的众多 HTML5、CSS3 移动开发和 web 性能最佳实践中一部分.

TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(一)

- - BlogJava-首页技术区
     摘要: TWaver的html5版本即将发布了,于是今天用TWaver HTML5 + NodeJS + express + websocket.io + redis搭建了一个简单原型. 界面添加、修改以及删除网元后,会自动增量存库,并广播更新. TWaver 2011-12-16 16:30 发表评论.

#HTML5 Web App项目秀#国内首款大型HTML5页游《黎明帝国》开发背后

- - HTML5研究小组
HTML5游戏《黎明帝国》,磊友科技打造, 官网试玩. 正像游戏邦创始人郑金条在《程序员》杂志专栏文章中所说:“HTML5被整体市场所观望的除了技术标准和规范不够成熟外,最大的盼头就是出现一款重磅作品给市场打入强心剂,虽然磊友、Spil或Facebook在推动这个趋势,但都不如一款有说服力的游戏来得有价值.

重大新闻!社交网络Facebook发布HTML5应用中心,杀向苹果应用商店,可能就是传说中的斯巴达项目

- - TF全部内容|科技源TechFrom
TechFrom科技源 5.10日,终于发布了. 社交网络Facebook 基于现有的平台,推出应用中心是迟早的事情,类似于苹果应用商店 App Store,但是基于HTML5 并且是网络版,支持付费应用. Facebook官方发布说明, via,是一个为Facebook用户和开发者提供的第三方应用平台,并将所有的第三方应用打造成一个基于Facebook社交网络的App生态系统.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.