当前位置: 代码迷 >> Web前端 >> 海豚浏览器CTO刘铁锋:Mobile Web App发呈现状及展望
  详细解决方案

海豚浏览器CTO刘铁锋:Mobile Web App发呈现状及展望

热度:375   发布时间:2012-07-15 20:20:06.0
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望

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

在硬件处理能力不断强大的同时,移动设备的操作系统的竞争也开始越来越激烈,不仅仅是iOS, Android还有不知道市场反响如何的Windows Phone。而仅仅是这三种平台,就是已经开始让传统PC转向mobile的开发者以及企业开始头疼。与此同时,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刘铁锋为《程序员》杂志的专栏文章。

?

译文来源:http://www.webapptrend.com/
?WebAppTrend是一个独立的技术博客,关注Web?App前瞻和实践,以及智能浏览器发展?

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,Q Q群见官方博客右侧。
  相关解决方案