BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 崔康 关注 0 他的粉丝 发布于 2012年3月5日. 估计阅读时间: 8 分钟 | 如何结合区块链技术,帮助企业降本增效?让我们深度了解几个成功的案例。

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账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

by no day

clear是什么东西啊,没看懂,就看到3条

。。。 by baby tai

弄个截图也好。。

不错的专访 by 滕 云

我对html5并没有深入研究过。现在手头的工作就是用phoneGap来生成各个移动终端的demo应用。html5确实在其中解决了很多问题。不知道phonegGap使用的是不是webkit内核,表现的是在IOS上和Android的兼容性不一样。再有一个问题也是手势的问题。看来html5用在移动设备上还需要所有相关的人全力以赴啊。成熟之后可想而知,是个很不错的利器。

Re: ! by 张 鑫

嗯 有点不知所云

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

4 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT