10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

专访 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:128980
用户头像

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

关注

评论

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

📊Univer Go : 通过AI一键翻译电子表格单元格内容,轻松提效

梦数技术团队

Python JavaScript 前端 Excel spreadsheet

平台工程的未来:平台即运行时

俞凡

最佳实践 大厂实践 平台工程

行业风向标|「博睿数据2024年度精选案例集——观测先锋」重磅发布

博睿数据

Apache Doris 2.1.8 版本正式发布

SelectDB

数据库 大数据 开源 数据仓库 湖仓一体

利用大语言模型(LLM)增强软件测试自动化的最佳实践

测试人

软件测试

AI与人类智能:互补还是取代?

天津汇柏科技有限公司

AI 人工智能

从Tiktok 用户涌入小红书事件看OLTP 数据库如何应对突发流量

晨章数据

NoSQL 数据库 kv 数据库、

英伟达 RTX 5090 震撼发布,RTX 4090 会降价吗?

Finovy Cloud

显卡 4090 5090

五金行业MES生产管理系统有哪些优势?

万界星空科技

制造业 mes 万界星空科技 五金行业 五金制品行业

游戏与硬件深度协同,打造更精细的体验优化

HarmonyOS SDK

harmoyos

加入Karmada用户组!连接全球同行共建多集群生态

华为云原生团队

云计算 容器 云原生

正式成为CNCF的一员,我们是如何做到的 | Sermant 2024年度总结

华为云开源

微服务 开源项目 微服务治理 sermant

兼具个人成长、科技新知、文学艺术,这份华为阅读新春书单请查收

最新动态

KwaiCoder-23BA4-v1:以 1/30 的成本训练全尺寸 SOTA 代码续写大模型

快手技术

人工智能 快手 #大模型 Kwaipilot 代码续写大模型

社交软件红包技术解密(六):微信红包系统的存储层架构演进实践

JackJiang

网络编程 即时通讯 IM

改变财务规划思维方式,迎接创新技术新时代

智达方通

财务分析 预算管理 财务规划 创新技术

人设崩塌还是对行业心寒?ZachXBT:这么多年终究是错付了

TechubNews

比特币 加密市场

陪玩预约系统搭建,打造专业游戏陪玩平台 聚焦游戏畅玩,定制专属陪玩预约

DUOKE七七

数据从前端传到后端入库过程分析

能源恒观

java数据类型

第84期 | GPTSecurity周报

云起无垠

博睿数据获中国信通院泰尔终端实验室致谢!

博睿数据

百度智能云曦灵推出春节功能:一张照片即可生成拜年视频!

科技热闻

2024 TiDB 社区年度总结,又携手共进了一年,2025年,一起迎接变化,挑战变化!

TiDB 社区干货传送门

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