写点什么

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

  • 2012-03-04
  • 本文字数:2507 字

    阅读完需:约 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 开发相对于原生应用,有优势也有劣势,这个可以展开去说很多,但是最决定性的因素还是团队已有的技术能力。

2012-03-04 06:128716
用户头像

发布了 501 篇内容, 共 266.1 次阅读, 收获喜欢 61 次。

关注

评论

发布
暂无评论
发现更多内容

喜讯!云起无垠获“中国产业互联网发展联盟IDAC双奖”

云起无垠

Apache IoTDB v1.3.3 发布|新增数据订阅,DataNode 主动监听并加载 TsFile 等功能

Apache IoTDB

选择ETL工具需要注意什么技术性问题?

RestCloud

数据分析 ETL 数据集成

作为产品经理,如何分析和管理你的产品需求

易成研发中心

产品需求

构建真实可靠指标平台:五大核心特征助力企业深度数智化

Aloudata

指标管理 指标平台 指标开发

CSA GCR 2024 | 百度安全DDoS防护服务荣获安全磐石奖等多项殊荣

百度安全

【JIT/极态云】技术文档--组织架构简介

武汉万云网络科技有限公司

低代码

软件测试丨全面解析 Allure 2 的安装与运用

测试人

软件测试

有哪些ppt一键生成软件?这6个AI不容错过!

职场工具箱

效率工具 职场 PPT 办公软件 AI生成PPT

Redis大Key问题如何排查?如何解决?

王磊

天润融通携手挚达科技:AI技术重塑客户服务体验

天润融通

天润融通解决方案:如何避免门店投诉升级为消费者维权

天润融通

人类级别语音 AI 路线图丨 Voice AI 学习笔记

声网

万字长文带你深入Redis底层数据结构

不在线第一只蜗牛

数据库 redis

开放原子校源行(天津大学站) 即将启幕,龙蜥技术专家分享开源技术与实践

OpenAnolis小助手

操作系统 龙蜥社区

香港 Web3 宣言两周年专访 HashKey Tokenisation 总经理 Anna Liu:探索代币化的未来

TechubNews

洞悉数据,守护安全!和鲸助力2024年浙江省交通投资集团数字化主题活动圆满闭幕

ModelWhale

人工智能 交通 数据竞赛

ChatGPT 开启「眼睛」,实时摄像头对话来了;昆仑万维推出实时语音助手 Skyo丨 RTE 开发者日报

声网

终于能随时解决信息焦虑了

最新动态

快递员上门取件API接口接口Domo下载

快递鸟

快递

探索OS升级迭代的兼容性和安全性!龙蜥社区走进中科方德MeetUp开始报名

OpenAnolis小助手

操作系统 龙蜥社区 龙蜥meetup

HarmonyOS NEXT用户专属装扮免费体验!华为主题内容大焕新!

最新动态

如何设计实施 Git 工作流程以提升软件研发效能?

思码逸研发效能

git DevOps 编程语言 研发效能 研发效能管理

探索1688拍立淘API接口:图像搜索技术引领电商新潮流

代码忍者

API 接口 pinduoduo API

存算分离的过去、现在和未来

Databend

第三代指标平台相较于前两代的显著优势分析

Aloudata

指标管理 指标平台 指标开发

倒计时1天!龙蜥社区开源软件供应链及操作系统安全MeetUp即将在广州召开

OpenAnolis小助手

操作系统 龙蜥社区 龙蜥meetup

软件测试丨JUnit5动态测试与生命周期解析

测试人

软件测试

Python脚本消费多个Kafka topic

不在线第一只蜗牛

Python kafka

专访HTML5版Clear应用作者尤雨溪_Apple_崔康_InfoQ精选文章