开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

iPhone Web App开发杂感

简介:
+关注继续查看

iPhone的SDK还需要两个月才出来……现在要给iPhone开发app的话,唯一的官方推荐方式就是走web app的道路……

水果牌的魅力无穷……即便有browser的局限,还是有不少精彩的iphone web app浮现……

Facebook的iPhone版本,简直就做得跟原生程序无异……当之无愧的Best iPhone Web App……

这或许也是iPhone上的Mobile Safari够强……它真的很强悍……现代浏览器该支持的它都有……若要挑剔的话,我可以说它js的执行速度太慢……但这是处理器的问题,非战之罪……

只要有足够想象足够技术,iPhone能够提供一个相当美好的舞台……而Google的手机平台Adroid使用的浏览器与iPhone亦是同核心……明年底,GPhone出来后,iPhone Web App应该都能够摇身一变成为GPhone Web App才对……

手机原生程序固然可以享受到各种Web App无法做到的东西……比方说3D,本地储存等等……但这是有代价的……Windows Mobile / Sybiam / iPhone / Adroid,难道我们需要维护四个程序版本?而Web App的话,相信未来几年内就能够将他们全部一网打尽……

浏览器内的世界已经可以很精彩了……偶个人对Web App的发展还是非常有信心的……

扯远了……

开发iPhone Web App时,偶大部分的时间都是十分开心……因为我只需要照顾好MobileSafari一个浏览器就够了……我可以毫不犹豫的使用-webkit-border-image这样酷的CSS效果……

但MobileSafari也是有bug的……最纳闷的一个CSS bug就是它无法在页面上固定位置显示一个东西……比方说菜单……而偏偏在页面上显示固定元素做导航在iPhone上面对用户交互是十分关键的……CSS搞不定,javascript呢?很悲惨的是用户拖动页面这个事件根本拿不到……应该有别的js奇技可以搞定这个……但是,这个是bug……相信这个bug会水果牌会很快搞定的……我个人是觉得投入精力去绕过这么个bug很划不来……至少,facebook也没有……

facebook是家伟大的公司……它的iPhone版很酷……而其开发者Joe Hewitt(不认识?Firebug作者是也!)把facebook iPhone版页面切换引擎iui给开源了……iui很好,很强大~ :P


因为开发的web app包括IM,使用AJAX是必然的了……实际上,偶使用了超大量的Ajax……

在选择Ajax库的时候,着实费了一番功夫……最终是选择了jQuery……主要原因是在普通web上用惯了……转其他库的话,重新上手需要时间……

一开始犹豫主要是担心jQuery太庞大……怕iPhone抗不住……可实际测试的结果……MobilSafari运行jQuery游刃有余……

另一方面的衡量是对于OO的支持……jQuery代表的是Event Base的开发哲学……OO并不是jQuery的选择……这点在jQuery作者John Resig的一个演讲中有提到……

偶的Web App相对比较复杂……不遵循OO的话,很担心代码后期的维护以及扩展……不过后来也就释然了……不是非OO不可……代码好坏最重要的还是看程序员本身的功力……如果说OO是神刀的话……有的人 “即便有神刀在手,亦无法成为刀中之神”……而且,也不是说用了jQuery就不能OO……我完全可以从别的库如Prototype / Mootools等挖出他们对OO支持的部分来用……至于$,还是觉得jQuery的爽~

如果不是jQuery用惯了的话,我很可能会选择mootools……因为它够轻量……

号称对iPhone有特别支持的js库是Dojo……而Dojo亦对Comet有支持……Cometd便是Dojo基金会那伙人搞出来的……偶做的Web App有包含Web IM,本来看上去Dojo会是合适的选择……但最终还是放弃了……它太庞大了……如果我用上Dojo的话,可能以后所有的东西都得基于Dojo……就算服务器端不用它的Cometd,我还是需要去使用使用它的bayeux协议……bayeux协议看了就很晕……这条贼船太大……上去了就下不来……所以,Dojo反倒是偶最先排除的js库……

不算UI设计……整个Web App开发了大概是2个人月……但,优化、修改又用去2.5个人月……

iPhone跑JS是很慢的……虽然开发的时候已经有小心注意效率……但第一版出来的结果不理想……主要原因是大家第一次做这么复杂的Web App,欠缺经验……所以,狠下一番功夫去做优化,若干模块几乎就是重写了……

jQuery的$对CSS selector是很强悍……但是功能强大并不代表它快……一开始做的时候甚至有时select了一堆Element出来,然后使用each……慢就一个字……后来全部另外想方法重写了……效率前后相差可达数十倍……

在UI上,则是开心了使用了iui……iui跟jQuery共存得很好……
 


整体上来说,开发iPhone Web App最大的问题在于用户操作上……实际上,这也是Apple提供的开发指南中首先强调的一点……Understand User-iPhone interaction……

它的可显示面积最多只有320x396……然后,还有横屏、竖屏……MobileSafari地址栏显示、隐藏……输入键盘打开、关闭……设计时必须考虑到这种种情况……如果说要在用户输入时做动态提示……那么需要记得用户输入的时候键盘是打开的,千万不要把提示放在被键盘盖住的地方……

纯手指触摸屏操作……这意味着屏幕上的所有可点击元素(按钮等)都必须够大,最好还要相隔够远……一行最好只有一个……不然,用户很容易点错……

当然,我们也可以完全选择按照iPhone它自己的UI风格去做……顶部一个标题,标题旁最多两个按钮……然后正式内容再采用那个List风格…… 但问题是,iPhone本身有一个Home按钮可以用……Web App没有,Home一按,就直接退出Safari了……另一个关键问题是MobileSafari的页面滚动默认是整个页面的滚动……你无法让用户只滚动页面中的一个Div/iframe,而保持其他部分不动……(Well,实际上,是可以只滚动一个Div,只是需要用两个手指!)……

这就意味如果Web App够复杂(比方说偶开发的这个),就不能照搬Apple的风格了……

总的来说,开发iPhone Web App是件很有挑战性,也可以是很惬意的事情……Web + 手机是当下以及下来一两年内最热门的开发话题……时势如此,英雄又是在哪里呢?



本文转自 Wuvist 51CTO博客,原文链接:http://blog.51cto.com/wuvist/847736

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云上云方案:Web与移动App云上部署解决方案及服务指南
对于绝大部分的上云用户来说,部署Web与移动App是最常见的,很多新手用户不知道上云时该如何选择阿里云产品与配置,为此,阿里云专门针对这部分用户的需求推出了Web与移动App云上部署解决方案,下面是方案详情介绍。
0 0
Web网站一键转「可深度定制的」App
在本文中,我们将介绍一个骚操作,通过开心App[1]将我们想要转换的网址或者代码包一键转化成可深度定制的专属App,这是送给未涉及安卓开发、IOS开发的小伙伴们的一个福利呀,在此案例中小伙伴们不用吭哧吭哧写代码,会鼠标拖拽就好了。
0 0
项目下没有Web App Libraries
项目下没有Web App Libraries应该如何做?本文带大家解决这个问题。
0 0
Flutter设置App的应用名字和应用logo图标的方法(android ios web)
在前面的几期给大家介绍了flutter的安装以及一些简单的配置,还运行了helloword 那么接下来就带领大家了解如何设置应用名称以及图标 Flutter设置App的应用名字和应用logo图标的方法,
0 0
APP或者Web的兼容性测试的设计方法都是这样的
APP或者Web的兼容性测试的设计方法都是这样的
0 0
最后3天,优惠低至3折起:云真机、WEB前端监控、APP监控、自动化测试
UC研发效能 岩鼠云真机面向企业免费开放活动即将于5.1号结束。 为继续支持企业全面复工,我们将于2020.4.29号~2020.5.31号推出第二波福利【暖春行动】。 云真机、WEB前端监控、自动化测试、APP监控等多种服务推出暖春礼包,重磅好礼低至3折起!
0 0
基于日志服务的GrowthHacking(1):数据埋点和采集(APP、Web、邮件、短信、二维码埋点技术)
数据质量决定运营分析的质量 在上文中,我们介绍了GrowthHacking的整体架构,其中数据采集是整个数据分析的基础,只有有了数据,才能进行有价值的分析;只有高质量的数据,才能驱动高质量的运营分析.可以说,数据质量决定了运营质量。
3284 0
手机APP应用如何从公网访问本地WEB应用
手机APP应用公网访问本地WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍具体的实现步骤。 1. 准备工作 1.1 安装并启动WEB服务端程序 默认安装的WEB服务端的端口是80。
1133 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
PWA:移动Web的现在与未来
立即下载
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载
LEAN APP Instagram Architectur
立即下载