海豚浏览器CTO刘铁锋：MobileWebApp发展现状及展望

在计算机的发展过程中，目前移动设备的时代可谓是潜力最大，发展最为迅猛，也是竞争最为激烈的一个时代。硬件的发展速度几乎令所有的消费者惊叹，如果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前瞻和实践，以及智能浏览器发展 
请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，qq群见官方博客右侧。