David Kaneda访谈：移动HTML5设计和开发

个人简介 David Kaneda是一位很有创造力的web技术专家，他创建了jQTouch，一种供移动web开发用的jQuery插件，以及Outpost，一种原创的Basecamp iPhone应用。David还通过多个微博来分享他在设计和开发方面的想法，其中有9-bits和WebKitBits。David目前是Sencha的创意总监。

QCon是由InfoQ主办的全球顶级技术盛会，每年在伦敦、北京、东京、纽约、圣保罗、杭州、旧金山召开。自2007年3月份首次举办以来，已经有包括传统制造、金融、电信、互联网、航空航天等领域的近万名架构师、项目经理、团队领导者和高级开发人员参加过QCon大会。 秉承"促进软件开发领域知识与创新的传播"原则，QCon各项议题专为中高端技术人员设计，内容源于实践并面向社区。演讲嘉宾依据各重点和热点话题，分享技术趋势和最佳实践；作为主办方，InfoQ努力为参会者提供良好的学习和交流环境。

   

1. 这里是QCon San Francisco 2011，我们来和David Kaneda聊聊移动HTML5方面的话题。你好David，介绍一下你自己好吗？

当然，我是David Kaneda，现任Sencha的创意总监，我也是JQTouch的创建者，JQTouch是我在两三年前编写的，在早期是那种感觉类似本地应用框架的JavaScript库，另外，我还帮手了Sencha Touch的开发，该产品就是我们目前在为移动互联网打造的富应用。

   

2. 是哪些原因让您产生了在移动设备上使用HTML5平台进行开发的兴趣呢？与传统的一些平台或是本地化应用相比，有哪些好处？

我是作为一名web开发者和web设计师入行的，所以实际上会从不同角度来看这个问题，当然，iPhone的问世令我超级兴奋，在iPhone问世之初，Jobs就赋予了web应用更丰富的内涵，我开始研究iPhone的浏览器，从那时起，我对WebKit有了专门的了解。也是从那时开始，我有了要开发几个iPhone应用的念头，接着我实现了一个本地化应用Outpost，这是一个为Basecamp开发的应用，之后，我开始考虑更多可做的事情。在开发Outpost时，实际上我有一位合作伙伴，他处理大部分的开发工作，我则是负责设计。在开始打算由自己来完成这些构建工作时，我一开始与Objective-C对比进行了一番研究，看看在浏览器中可以做哪些事情，最终结论是，我们可以在浏览器中构建出所有的东西。

   

3. 您认为哪些浏览器技术更有生命力，更吸引开发者，比方说，是主题层（theming layer）、CSS这一类东西吗？

是的，所以在说到与本地化的比较时，很遗憾，我认为浏览器在大多数方面都有些落后于本地化的做法。在考虑速度、性能这一类问题时，它很难实现本地化的那种性能。但是，随着我们不断向前努力，随着每一个改进版本的推出，现在我们看到，设备所具备的能力已经大大超过从前，现在我们实际处在这样的一个点上，即就性能方面来说，浏览器和本地化基本已是不相上下了。除此之外，既然你提到CSS，作为一种主题层，我始终觉得CSS远远优于其他任何一种我曾见过的主题系统。Objective-C、任何都面向对象的系统都会强制你把主题置于类中，甚至是ActionScript、Flash一类的技术也是如此，而与此相比，web的做法是HTML结构、CSS样式和JavaScript功能的三者分离。我始终认为，在定制或是创建应用时，分离的做法要高效很多。

   

4. HTML5正在演变成一种巨大的规范集，您认为哪些技术更有吸引力？为什么？特别是在移动领域。

同样，作为以设计为中心的那类人，我个人觉得，任何一种与CSS3相关的改进都很令人期待。就CSS4规范来说，现在已有许多东西在用了，我在其中就发现了许多令人兴奋的东西，像变量、父引用等，这些东西都会出现在样式表中，现在和过去一年左右的时间里，我一直都在关注Sass和Compass这两种新兴的技术，这两种技术在创建CSS和样式表方面有着极大的用处。除了样式方面之外还有本地存储，我认为设备API总的来说是这一正兴起的规范最激动人心的部分，我不能完全确定它会置于HTML5之下还是会与之平起平坐，但它会是一起在发展的整个规范集的一部分。

   

5. 现在有新的W3C工作组正在致力于设备API，比如说振动（vibration），或是通过JavaScript来访问振动一类的API。

正是这样，这显然是我希望快速发展的最大领域之一。我们已经有了一些东西，像在Android上访问摄像头、加速计，我相信可访问每样东西，不过还有很长的路要走就是了。我觉得没有什么理由可妨碍到我们把越来越多的东西暴露出来，就像我们通过浏览器暴露应用一样，只要大家有考虑到安全问题就会没事。

   

6. 如何在移动平台上调试这类代码呢？比如说您提到的使用Sass来编写样式，这比在桌面上完成这类工作难多了。

我觉得，对于在移动浏览器上开发应用来说，特别是针对第一阵营中一些较新的浏览器来做开发，WebKit现在就特别受欢迎，你实际上可以在桌面上使用Chrome、WebKit inspector来开发和调试几乎所有的应用功能。就我个人来说，在创建应用时，我通常都是在桌面的浏览器内部开发出整个应用，等快到后期时，再把它装到设备上，看看是否存在差错并修正它们。不过在大多数情况下，相比本地化应用一类的东西，实际上我更愿意调试和测试web应用，在本地化应用中，你需要操心垃圾收集等这一类事情。

   

7. 不过我想你得要格外小心精确的位置控制这一类东西的使用吧？有可能这在移动设备上是不可用的？

这要视情况而定，是这样，这始终取决于你的目标。若针对的是Android、IOS和Blackberry这些第一阵营中的浏览器，实际上存在许多很稳健的布局技术，我喜欢的弹性盒（flexible box）布局已被引入CSS2，现在在CSS3中又有了一些改进，不过它真的是一种非常稳固非常强大的布局系统。

   

8. 您如何看待HTML5技术在桌面上的发展？相比移动领域，您如何看待两个领域的这种分支发展？我的意思是，比如说，在移动领域，因为设备较新，您能做到更快地采用新技术，强制用户使用最好的一些浏览器，但在桌面上，您还得支持所有版本的Internet Explorer甚至是某个版本的Internet Explorer。

确实如此，同样，这也和目标受众有关，我想很多企业都被迫支持Internet Explorer，所以很显然的，你不会在6和7版本中看到HTML5的开发，但随着IE的迭代，实际上您已经见到了特别是在IE9和IE10中已经有了对HTML5的一些像样支持，我想这种支持的增加会继续下去。如果您正在支持这些旧的浏览器的话，这始终取决于目标受众。但作为一种新兴的规范、看看日渐落伍的那些浏览器，再看看也许接下来一年内就要发布的那些浏览器，其实际上得到了非常广泛的采用。

   

9. 您可以和我们大概谈谈在设计移动领域特别是触摸设备的web构件时遇到的一些不寻常挑战吗？我的意思是，触摸设备的一些独特特性并非是能够在桌面上测试的，反之亦然。

我想最大的挑战有可能会是性能，所以在Sencha Touch中，只是针对提升滚动的帧速，获得平稳的过渡这类事情，我们就特别地花费几个月的时间。还有就是快速加载这类事情，因为这是在移动设备上，3G时代是一个很好的机会，你甚至就差临门一脚了，因此把初始加载时间尽可能地减少可以说就是最大的挑战之一，在所有事情中，这可能也是我们最为关注的。

   

10. 开发者该如何往应用中添加一些触摸特性呢，比方说，若想支持拖曳操作的话，您可以使用一些典型的web技术来构建几个控件之类的东西，在iPhone上，需要做一些什么样的工作呢？

是这样，假定事件系统是在WebKit上，事件系统的核心是非常类似的，当然，在可以使用鼠标事件的地方对事情进行抽象处理，在这个地方它们需要的是触摸事件，在这个地方所进行的处理很重要。除了这些之外，这些组件类型的实际设置和交互也是非常类似的，实际上可简单归结为与鼠标事件相对照的一些触摸事件的处理。

   

11. 我想您的建议是，把赌注压在使用诸如Sencha Touch一类的东西上？

是的，不用赌了，就是这样，我的意思，这就是人们寻求框架的重大原因之一，特别是在移动设备上，就性能方面来说，有些东西可能会非常复杂。一个能快速说明问题的简单例子是简单的轻拍操作，基于某种原因，在移动WebKit上，他们不知什么时候做的这一决定，尽管触摸了屏幕并且浏览器中的每样东西都会触发这些触摸事件，但他们也会触发鼠标按下的点击事件，不过这些事件被延迟。在手指离开屏幕之后，点击事件被特别延迟两三百毫秒，故能够抽象出一个点，实际上在那里我们期待的是一些触摸事件，认为是触摸的开始，他们没有移动手指，接着触摸结束，这构成了一个轻拍操作，我们应该针对该操作采取行动。这类微小的事情实际上在编程实现时会无比复杂，但若最终的情况是，您的应用程序对每个按钮的轻拍操作都有一个三百毫秒的滞后，那么给人的感觉总是不太好。

   

12. 您可以给我们说说开发者使用Sencha Touch能给他们带来什么好处吗？您强调了对触摸和拖动事件复杂性进行抽象的重要意义，其他的一些好处是什么？

在用户界面一端，除了触摸抽象，我们还抽象了性能，我们基本上委派了所有的事件，故开发者想要进行多少绑定都可以，不会带来太多的性能下降。不过我们还在默认系统之上加入了一些事件，比如轻拍、滑动、双拍等，当然，该框架是全面向对象的，所以你也可以创建自己的手势。

   

13. 是否要借助于API？

是的，所以我们会围绕着绑定事件等诸如此类的东西来构建我们的API，API相当基本和简单，但触摸层，可以说是核心，也可以说是UI栈的基础。然后随着我们向上走，我们实际上还创建了一个滚动层，这又是我们遇到的最大障碍，WeKit开发的一个问题是没有固定的位置，除了iOS5之外。没有固定的位置，没有溢出的自动滚动，故若要创建一个应用，在顶端固定放一个工具栏，中间的那一块是真正可滚动的，这听起来相当简单，但实现起来却是最复杂的事情，所以这方面也由我们来替你考虑了。同样，您只有把它看成是一个可滚动的视图就好了，实际上可以赋予它iOS的反弹功能，它有摩擦，它有着这类东西的发展势头，某种程度上来说是开箱可用的，我们都有提供。然后再上到较高的一个层面，在这两个层面之上我们构建了所有的小部件，因此像按钮这类东西会立刻响应触摸，列表可上下滚动，甚至更高级的picker和spinner一类的表单元素，这一类东西都是基于该核心平台的。

在UI这一端，我们提供了所有的功能，它们是开箱即用的，所以整个小部件系统内容丰富、反应灵敏、速度有保证。在应用这一端，我们还提供了框架的一个MVC组成部分，一个数据层，在构建某种程度的数据驱动富应用时，数据层会起到非常重要的作用。甚至在该数据层的内部，你也能很轻松地使用JSON、XML，任何你想用的格式都行。我们还包含了一个客户端的ORM，这实际上可让你建立起数据间的关系，支持has-many、belongs-to等，这创造了极大的便利，在构建应用时，可以非常方便地获取所需的信息。

   

14. 我的理解是，Sencha Touch并非是往现有的应用中添加对移动设备的支持，而是构建移动应用，因为您有提到正确设定位置一类的事情，在桌面上和移动设备的触摸事件中都要准确无误可能会很难。还有没有别的一些事情和情况是您可以，或是需要构建特定的移动站点，而不是仅在桌面站点添加一些新功能的呢？

是这样，这同样取决于你的目标和你正在努力创建的东西。这不是一种响应式的设计框架，它不是要逐步地增强你的网站，这样说吧，它既适合于用在二十像素的屏幕上，但同时又能按照你的想法行事。比如，我有见到有的新闻网站，或博客就是某种程度的响应式网站，在这类网站上，有很长的滚动页面。又或提供桌面版本，让用户进行双击操作，放大内容等等，但这是你想要提供的体验吗？假设我是Netflix这家公司或是个汽车经销商，等等这一类的，我会希望用户进入应用之后，给他们提供这样的应用体验，他们可以添加自己喜爱的东西，把东西添加到某种列表中，完全根据舒适的用户体验来考虑。

   

15. 您怎么看待您的客户使用Sencha Touch来构建应用？我的意思是这些技术这么强大，这一定是一些以前未有过的新的应用类型了？

确是如此，这很有意思，因为先是一系列的网站和移动网站，接着是应用，现在是你可在这两者之间进行各种实现的一整个中间地带，我们已见到有由完备数据驱动的会计、财务等一类的应用是用Sencha Touch来构建的。Boston.com有一个非常漂亮的Boston交易站点，但这些漂亮体验实际也是由一个我曾工作过的公司为架构师们创建的，这实质上是一些组合网站，但它们的内容很丰富，它们有图像滚动播放功能，你可以看遍他们所有的图像。你在一个响应式环境中是无法实现这些体验的，因为这些客户期待的是这类更高层次的体验。

   

16. Flash或是Flex一类的其他富web平台有提供这些体验吗？您在这方面怎么看？

我认为这些体验一般来说都是可实现的，我曾是一位Flash开发者，不幸的是，不管出于什么原因都好，Flash从未在iPhone的浏览器中出现过，因此就服务于网站、服务于一个通过URL访问的完整web应用来说，它们暂时还无能为力。

   

17. 您之前有提过CSS4，您如何看待HTML平台在不久的将来的演变情况？您可以做些预测吗？或是其他哪些东西可让开发者的工作变得更轻松一些？除了位置控制之外还有哪些忘了提的？

是这样，总的来说，HTML5某种程度上，遗憾地说，分裂了社区，这些“标准人”的兴趣点是新的标签、新的语义、辅助层，然后接着是围绕部分标准创建的一些应用，在这些应用中，你有新的输入类型，设备API正在合并，很显然我对这一方面的内容更感兴趣一些，正如我们之前谈到的那样，设备API是兴趣的一个重点所在，我想接下来的一两年内就会有极大的发展。

   

18. 我猜一些客户会向要求您实现一些特别的事情，比如说让web应用振动手机。

没错，要求振动功能的不算特别多，但推送通知和摄像头，这个浏览器现在实际上已支持了，以及许多的这类事情是最多的，而且我相信这类要求会越来越多。