Mobile Web App发展现状及展望

标签: 移动专区 Web App 移动 | 发表时间:2012-03-02 09:35 | 作者:chenbo
出处:http://www.programmer.com.cn

文/刘铁锋

在计算机的发展过程中,目前移动设备的时代可谓是潜力最大,发展最为迅猛,也是竞争最为激烈的一个时代。硬件的发展速度令所有的消费者惊叹,如果2008年给你一部主频528MHz,内存192M,屏幕3.2寸,分辨率320*480的手机,你可能会觉得非常前卫,因为CPU和分辨率足够高。而放到三年之后的今天,这部机器已经沦落到无人问津,成为古董机型的地步。不错,这就是G1的配置。而现在双核1.5G的CPU,4寸,甚至5寸的超大屏手机已开始成为用户心中的主流手机。毫无疑问,这种手机的处理能力已经开始能够赶上PC的处理能力。而传说中的模块四核的Pad,更有赶超PC发展速度的势头。

在硬件处理能力不断强大的同时,移动设备的操作系统的竞争也开始越来越激烈,不仅仅是iOS, Android还有不知道市场反响如何的Windows Phone。而仅仅是这三种平台,就已经开始让传统PC转向移动的开发者以及企业开始头疼。与此同时,HTML 5能力的不断强大,使得Web App和Native App之争不断升温,在移动设备上的讨论尤为突出。但无论如何,当硬件能力的进一步强大,性能问题得到改善之后,快速开发程序的能力以及构建程序的成本会成为影响和推动技术选择的一个重要原因。

Mobile Web App的现在

作为一个坚定的Web App的支持者,笔者认为,开发难度和跨平台的需求会在技术和商业两个方面都会推动Web App得到越来越广泛的应用。市场对Web App的接受程度也在不断地得到印证,大家所熟知的Mobile Web App先行者Finance Time ,在短短的三个月的时间内已经获得超过100万的下载量。相比起很多原生的程序,这个下载量不算太高,但其几乎匹敌原生应用的体验,已经让很多人留下了深刻的印象。

不仅仅如此,还有很多其他的数据可以用来分析Web的趋势。如大家所熟知,Facebook也一直在推进Web的发展。Facebook不仅收购了HTML 5的移动应用开发商Strobe,同时 Facebook也正式推出了名为Spartan的HTML 5移动开发平台,其目标就在于更好地帮助开发者开发Web App。不仅如此,最近有消息传出,作为在Web App开发的最火的工具/框架之一Sencha的技术推广经理跳巢去了Facebook。足以见得Facebook在这个方面在不断积蓄力量以求更大的突破以及发展。而另一则Adobe放弃在移动设备上支持Flash的消息,更让人看到了HTML 5在同一技术标准以及能力上的突破。

与此同时,国内对Web App的技术的关注也非常活跃。一个致力于探讨和分析业界对Web App的最新进展和发展趋势的博客Web App Trend的已经出现,并且质量相当之高。不仅仅如此,PhoneGap中文站也已经浮出水面,为国内的开发者带来了全中文的教程以及学习资料。

这一切都在说明业界对Web App不仅仅停留在口号,而是有更多的实质性的推动。

Web App开发现状

回到一个实质性的问题,什么才是Web App?  引用Web App Trend博客里面的一篇博文的内容,有着如下的定义:

“要给出完整的Web App的定义是一件很复杂的事情,因此我们在此只给出一个简单的定义: Web Application是指通过使用Web和Web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用Web浏览器。 “

简单来说,就是利用Web技术,能够做出超越传统理解网站的功能,让它更具有交互体验,让这个App看起来和用起来更像Native App。这样就非常清楚Web App和Native App的差别具体在哪里了。之前的文章笔者探讨过,在目前的技术储备上Web App同样也开始用户Cache, Drag&Drop等等Native App所必备的功能。

那么从开发层面来看,Web App的开发和Native App的开发又有怎样的差距和距离呢?

让我们回想一下一个Native App的开发过程:

界面开发。一般来说,Native App的界面开发拥有非常强大的控件库。不管是对用户交互的Button、 Checkbox , 还是用户输入的textbox、RichTextbox,或是用户展示的ListView或者GridView之类的控件(不同的开发平台下控件的名称未必一致),控件库里面已经为这些控件的展现方式。为属性设置、事件响应等基本的开发需求做好的充分了准备。绝大部分的开发者只需要拖拽控件,然后就可以实现自己的逻辑代码,而无需做太多的准备工作。

事件响应/数据绑定。在绝大部份的场合下,对于数据的处理成为了Native App开发中间的重要工作。这部分的工作的本质就是把从网络上传输的一组数据(不管是从数据库,还是从Web Services)转换成为业务逻辑中所定义的对象,然后绑定到相应的数据控件中。而事件响应的过程则是相反的过程,根据用户的响应,修改相应数据控件里面的值或者状态,然后通过数据处理逻辑回传到数据库或者Web Services中。在这个过程中一般来说Native App的开发过程中,同样有逻辑处理非常完善的库来帮助实现这个工作。比如说Android里面的Content Provider或者Adapter。

数据状态管理。数据的状态管理是指根据实习的开发需求所带来的本地缓存,配置文件读取等等操作。比如聊天应用,文本编辑应用或者基本的信息管理系统都有能力直接从本地的磁盘中读取之前的操作记录或者缓存信息。从而让程序能够有能力很快地启动并且展示。比如聊天程序中的联系人列表,比如邮件客户端里的本地邮件等等。这些都依赖于有本地的存储和缓存,来让用户更快地获取信息。

这里没有强调具体和网络操作,具体和业务相关的逻辑处理等具体需求。对比在Web App开发的过程来说,情况则不太一样。

由于传统的Web 展示能力有限,传统的Web开发过程中,由于位于前端。因此界面的开发本质上让位于了CSS所创造的效果以及Javascript所包装出来了各种各样交互效果。这部分的工作更多地集中在样式的调整以及和动画效果制作上。

对于所谓的事件响应,数据绑定等等方面,在早期的开发过程中基本上不存在这个概念,完全跳转回服务器,然后重新刷新页面。在AJAX引入之后,利用Javascript + XMLHttpRequest,使得HTML的页面逻辑可以转移到Javascript中实现和完成。

对于数据的状态管理部分。本质上来说,早前的Web基本不存在这个概念,仅有的Cookie能力有限,仅能部分保存状态。直到Web Storage开始实现,甚至是Web Database的出现,才增强了Web在这个方面的编程能力。

那么,回过头来看Web App和Native App之争的本质是什么? 无非就是Web App是否能够完整实现Native App所能作的事情。这样Web App在开发简单,跨平台方面的能力才能充分凸显出来。但对现阶段的状况来说,当期望把Native App所拥有的功能转向到Web App时,不可避免地因为工具的缺失,甚至是开发理念的缺失,导致了在开发中始终存在不够的状况。可以坦率地说,现在Web App的开发中,还处于构建不同的开发工具和开发库,甚至是在摸索开发模式的过程中,还尚未成熟。

当然,这不是不能解决的问题。Web App开发,尤其是Mobile Web App 的很多工具和框架已经开始组建建立。

界面开发。如前面所说,非常强的Native App界面控件成为了提高效率的有效保证。在Mobile Web App开发中,Sencha以及jQTouch已经提供了非常强大的界面开发支持。同时在界面库方面,jQuery Mobile可以认为是一种增强型的javascript库,能够有效地帮助用户来解决和提升开发效率。

事件响应/数据绑定。如果和Native App相比,这块本来就不是Web开发的强项,但是也许根据开发的需要,未来会衍生出包装的非常完善的一站式解决方案。比如可以直接把一组RSS里面的内容,更加方便地变成具有交互能力的List或者功能。

数据逻辑/缓存处理。Web Storage已经提供的技术的支持,需要的就是最佳的开发实践,甚至是利用缓存的模式。对于简化开发的工作来说,应该会出现专门的Storage的管理模式,甚至是封装的非常完善的库。

现有Web App开发模式的问题以及挑战

从工具层面来说,Web App在工具方面的演化正在不断地进步。但是在现有的Web App开发过程中,依然存在非常多的问题和挑战。

性能问题。性能问题依旧是非常大的挑战。由于Web App的开发几乎完全构建在Webview的基础之上,因此在Webview上对事件的处理以及响应的能力就直接决定了用户的体验。在这里有两方面的性能,一个性能是对事件响应的速度。在Web上控件的响应速度比原生的控件响应速度要慢;另外一个是直接在渲染和执行速度上面的速度。

分辨率的问题和适配的问题。和Native App的开发方式一样,不同的分辨率,横竖屏切换,以及对于不同机型的识别,甚至与对不同的web 浏览器内核的适配,同样存在一样的问题。同样需要比较多的调试和适配的工作。

离线的问题。和Native App相比,可能这是最应突破的一件事情。一是这是一个0或者1的问题,实质上是突破了原有的Web开发的限制,二是界面和逻辑数据的分离。对于Web的页面来说,这可以认为是界面,中间涉及到分离的js, css文件以及没有更新的img等静态元素的缓存问题,同时也存在把动态数据元素(比如某个控件里的状态,比如离线邮件中的邮件信息)缓存以及载入的问题。这需要重新建立起一套解决方案来实现。

跨平台问题。Web App和Native App另一个不同在于访问硬件资源上的不同。由于受限于浏览器的功能,有很多的硬件资源不能直接访问。所幸的是PhoneGap为在多个平台上开发提供了非常的好的解决方案,使得Web App拥有了能够在多个平台上执行的能力。有理由相信这个问题能够被解决的越来越顺畅。

总结

如果从开发的工具以及各种支持来说,Mobile Web App开发现在尚处于比较早期的原始阶段,甚至也会出现很多因为性能问题导致不够实用的情况。但是,从技术的角度来看,并没有太多的致命门槛,而是出于构建框架,重建游戏规则的过程中。不仅仅是Facebook, Google这样在互联网上的巨头,连IBM这样的老牌公司也已经在开始搭建Mobile上的工具以及解决方案,这完全有理由详细,在Mobile上Web App的开发会越来越火热,让我们拭目以待。

 

作者刘铁锋,百纳信息技术有限公司CTO,W3C标准化组织成员。

 

本文选自《程序员》杂志2012年01期,更多精彩内容敬请关注01期杂志

《程序员》2012年杂志订阅送好礼活动火热进行中

 

相关 [mobile web app] 推荐:

Mobile Web App发展现状及展望

- - 技术改变世界 创新驱动中国 - 《程序员》官网
在计算机的发展过程中,目前移动设备的时代可谓是潜力最大,发展最为迅猛,也是竞争最为激烈的一个时代. 硬件的发展速度令所有的消费者惊叹,如果2008年给你一部主频528MHz,内存192M,屏幕3.2寸,分辨率320*480的手机,你可能会觉得非常前卫,因为CPU和分辨率足够高. 而放到三年之后的今天,这部机器已经沦落到无人问津,成为古董机型的地步.

Mobile App 将死?!

- - Tech2IPO
日前,Mozilla 产品副总监 Jay Sullivan 称移动应用不久即将成为历史,未来将是移动 Web 应用的天下. 光盘好歹还能当杯垫,可怜 Mobile App,难道就这样一下跌落进历史的垃圾堆. Mozilla 的产品副总监杰 • 沙利文 (Jay Sullivan, 上图) 日前表示,移动终端应用(Mobile App)没有未来,真正有前途的是移动 Web 应用(Mobile Web App).

雷锋学堂:谈谈Mobile Web App的设计

- - 雷锋网
【编者按】本文作者:邓腾( @千年牛皮糖),百度无线交互设计师. 在本文中,作者将给大家谈谈Mobile Web App的设计方法,内容包括:Web App定义、Web App的特点、发展现状及设计等等. Native App与Web App的争论从未停息过,尽管很多人在批判Web App的各种不是,但也阻止不了各种各样的Web App如雨后春笋般出现,尤其是伴随智能手机的普及而受到重视的Mobile Web App.

mobilebone.js-mobile移动web APP单页切换骨架

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4381. 一、mobilebone.js吹牛不打草稿. mobilebone.js是鄙人2014下半年个人开源项目代表作. 先容我吹嘘一番,反正吹牛又不要交税. 跟传统网页浏览的差别仅仅在于无刷新. 例如,我们浏览首页,首页上有个如下HTML链接:.

Mobile Web调试工具Weinre

- - 移动开发 - ITeye博客
现在、将来,用移动设备上网越来越成为主流. 但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛. 而Weinre就是解决这难题的利器.   Weinre的本意是Web Inspector Remote,它是一种远程调试工具. 功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用.

Mobile app视觉传达的魅力

- 青蛙小子  - 所有文章 - UCD大社区
时下移动开放平台众多,苹果、谷歌、微软、诺基亚都有自己的移动开发平台,想让自己的产品在众多的开放平台中留住用户,只靠品牌是不够的,产品用户体验比品牌更重要. 我们可以充分的利用移动设备的特性,运用视觉传达的表现方式,去创造具有优秀的用户体验的app应用软件. 在如今这个智能手机时代,大屏幕高分辨率触摸屏的智能手机在市场上即将呈现普及的趋势.

HTML5 vs Mobile App 谁将是主流

- 小趴 八足趴 八足 ramener - 互联网的那点事...
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 有了HTML5以后怎么装APP. 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一.

Mobile App 七大 UX 設計經驗

- - Inside全文
圖片來源: uxpassion. 投稿作者:Leon Lu([email protected]). 喜歡研究軟體架構的美,雖然每次架構設計還是常有不足;喜歡專案管理方法論的妙,雖然每回專案時程還是常 Delay;喜歡與三五好友大談移動科技的樂,天馬行空是我們的樂趣. 產品使用的第一印象是至關重要的,因為使用者在意的是產品使用過程中是否和當初的 First Impression 一樣的令人樂不釋手.

创建Chrome Web app

- Hobbes - Marshal's Blog
编写了一个Chrome下使用的Web app. 点击这个应用,就可访问我的博客. 其实有它特殊的好处,直接访问网站,程序无法自动获取HTML5的权限,比如存储限制. 安装应用,相当于安装了一个配置文件,浏览器将打开必要的权限. 如果你也使用Chrome,可以通过这里下载安装. 开发这样的应用并不难,过程类似以前开发Chrome扩展(编写最简单的chrome扩展).

iOS Web App初步

- - 新浪UED
iOS Web App开发,配合HTML5,是目前比较热门的话题. 今天,先抛开HTML5,我们来尝试在PhoneGap框架上进行简单的开发. PhoneGap是一个使用HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台. 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.