海豚浏览器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群见官方博客右侧。