专访HTML5版Clear应用作者尤雨溪

Clear是一款非常受欢迎的移动应用，尤雨溪在两天时间内打造了一个 HTML5版的Clear应用，并开放了 源代码，InfoQ中文站对其进行了专访。

InfoQ：能否对你自己的经历做一个介绍？以及为什么会选择HTML5和CSS3技术作为自己的主攻方向？
尤雨溪：我个人的经历其实比较绕。 我从高中就开始玩Flash做设计，但是一直是单纯作为兴趣，那时候也不会编程。高中毕业来美国读本科，一开始随大流读经济，后来觉得实在不喜欢，但是学校又不是设计院校，所以最后专业是艺术和艺术史，顺带关注新媒体艺术和设计。毕业之后想接触更多这方面的东西，所以就到了纽约读艺术硕士，也就是我现在所在的这个项目，叫做MFA in Design and Technology。
所以严格来说，我的兴趣点在设计和编程交叉的地方。学编程的动机是因为我想把自己设计的东西亲手做出来。计算机方面的课我只上过两节，算是打了点基础吧。其实最早我玩Flash，单纯是因为Flash在视觉上的表现力很好。但后来看到了越来越多关于HTML5的新功能展示，觉得它确实有巨大的潜力。另一方面，它以后是会成为通用标准的，而不像Flash是一个Adobe私有的技术，这让它的应用前景要广阔得多。

InfoQ：为何会选择CSS3作为你实现HTML5版Clear的主要技术？
尤雨溪： 我很喜欢Clear的一个地方就是它的流畅感，而这种流畅感一直以来在HTML5应用里，尤其是在移动设备上比较少见。在CSS3出现之前，jQuery的动画如果优化得好，在台式机浏览器中还算流畅，但是在iOS上和原生应用的差距还是比较大的。这里面的主要原因不是JavaScript的速度慢，而是每次元素移动的时候，页面的重新渲染太慢。而渲染慢的原因，则是因为页面渲染过程一直以来都是靠CPU实现的。CSS3的一个优势就是可以调用GPU来加速渲染过程，使得动画变得流畅。我以前研究过一些在iOS上利用CSS3模拟原生拖拽效果的开源项目，所以这次看到Clear的时候就觉得CSS3可以用来很好的重现这种交互的感觉。

InfoQ：HTML5版Clear开发的难点有哪些？如何解决的？
尤雨溪： 最大的难点就是多个不同的手势的精确触发。Clear当中，单个条目有轻触、左拖拽、右拖拽和长按后拖拽四种手势，同时整个页面又有轻触、上下拖拽、pinch in和pinch out四种手势。 因为HTML5的触控API还是比较原始的，只有ontouchstart, ontouchmove和ontouchend这三种事件，要能够精确地判断这些手势，又不会互相影响或是重复触发，是当时让我比较头疼的问题。因为当时只想尽快把效果做出来，所以采用了比较粗暴的做法，就是设置了很多boolean变量用来判断当前的触控状态，但其实并没有完美地解决，放出的源代码里还是有些bug存在的。最近实在太忙，过段时间会抽空完善这个问题。

InfoQ：CSS3在移动平台上的兼容性如何？你在iOS上开发的时候是否遇到过问题？
尤雨溪： 目前来说，兼容性还算不上理想。一些静态的属性，像border-radius, box-shadow这样的，已经可以放心使用了。但是transform和transition这两个属性，各个浏览器的表现还是会有所区别。我在做HTML5 Clear的时候并没有在别的设备上测试，据John Gruber在他的博客上所说，似乎除了iOS之外其他的浏览器多少都有一些问题。不过，如果是把HTML5应用包裹在一个webkit外壳里面作为原生应用发布，就不用担心兼容性的问题了。

InfoQ：这款应用的开发只花了两天时间，如果给你更多的时间，你会在哪些方面做进一步改进？  
尤雨溪： 可以改进的地方太多了。两天的时间做出来的其实只能算是一个效果展示吧。第一，当然是更稳定的触控响应，解决一些存在的bug；第二，利用HTML5的LocalStorage，可以让用户保存自己创建的条目。第三，补上原应用中有一些因为时间关系被省略的功能，比如pinch out的时候创建新条目等等。第四，更好的代码结构。因为一开始图省事，就用了自己写的很简单的架构。如果要真正做成可用的应用的话，还是用上Backbone.js这样的框架比较好。

InfoQ：CSS3越来越得到社区的认可，你觉得CSS3适用于哪些应用领域，游戏类？工具类？
尤雨溪： 在HTML5游戏方面，我觉得未来还是属于Canvas的。桌面端Canvas的表现已经很抢眼了，而移动端Canvas的瓶颈也是在渲染效率上。2D Canvas的硬件加速还不是很完善，但相信不久的将来就会逐渐成熟。只要渲染效率的瓶颈解决了，Canvas肯定是做2D游戏的不二选择。相比之下，动态效果只是CSS3的一个小部分， 虽然做相对简单的游戏也可以，但它的本职功能还是定义DOM元素的外观和交互效果，所以应该还是会主要用在一般网页和工具类应用中。

InfoQ：我看你在应用中利用了zepto.js框架，能否给大家介绍下它的优缺点？ 
尤雨溪： Zepto.js其实就是一个针对移动设备优化过的轻量jQuery，但也可以用于桌面端的主流现代浏览器（除IE外）中。它的作者Thomas Fuchs同时也是 script.aculo.us的作者和Prototype.js的团队成员。 随着jQuery的体积越来越大，一些开发者也开始抱怨里面有很多其实他们用不着的东西。而在针对移动浏览器的开发中，jQuery里很多用来保证IE8或以下版本兼容性的代码也是没有必要的。Zepto.js的思路是在继承jQuery的核心功能的同时尽可能地让文件轻巧，目前压缩后的文件只有20kb左右。要说缺点的话，大概就是不支持IE吧。

InfoQ：CSS3目前面临了很好的机遇，你觉得它还有哪些需要完善的地方？
尤雨溪： 我觉得这个问题不能单独拿CSS3出来说，因为它是HTML5这个大概念的一部分。真正面临很好机遇的是HTML5，包括CSS3和各种新的JavaScript API。其实我也还没有完全掌握每一个新功能的细节，所以也不敢说它有什么应该完善的地方，唯一的希望就是W3C定标准的进程要是能更快一些就好了，这样以后就不用写CSS的时候加一大堆vendor prefix了。

InfoQ：你认为Clear出于什么原因采用了原生开发，而不是CSS3开发？
尤雨溪： Realmac Software之前是做Mac应用的，所以做iOS原生应用是很自然的事情。Clear对交互细节的要求很高，如果对CSS3不熟悉的话一般也不会想到可以用它来实现。HTML5开发相对于原生应用，有优势也有劣势，这个可以展开去说很多，但是最决定性的因素还是团队已有的技术能力。

崔康 热情的技术探索者，资深软件工程师，InfoQ编辑，从事企业级Web应用的相关工作，关注性能优化、Web技术、浏览器等领域。