最近一直搞移动开发WebApp方向，领导让出个整体方案，写了一晚上文档，索性发到博客上与大家讨论讨论。如有不对的地方，请多指导。

常用的移动应用程序框架

1、  Jquery mobile:

特点：

（1）强大的AJAX驱动导航：

　　  无论页面数据的调用还是页面间的切换，都是采用AJAX进行驱动的，从而保持动画转换页面的干净与优雅。

（2）以Jquery 与Jquery UI为框架核心

       凡是会Jquery的人都可以轻松上手开发Jquery mobile的简单网站。

（3）强大的浏览器兼容性平台支持性。

       Jquery mobile继承了Jquery的兼容性优势，不只是支持IOS和安卓系统，还支持windows Phone、黑莓、WebOS、Meego等众多平台系统

（4）框架轻量级

       Jquery mobile 压缩后只有十几KB.

  (5) 强大触摸与其他鼠标事件

       Jquery mobile提供了一些自定义的事件，用来侦测用户的移动触摸动作，如tap(单击)、tap-and-hold（单击并按住）、Swipe(滑动)等事件，极大提高了代码开发效率。

（6）强大的主题化框架

     借助于主题化的框架和ThemeRoller应用程序，Jquerey mobile可以快速地改变应用程序的外观或自定义一套数据产品自身的主题，有助于树立应用产品的品牌形象。

缺点：

（1）       运行速度在一些低配安卓系统上不是太流畅。

（2）       按照自带提供的主题风格建立简单的网站很速度，但是按照自定义风格需要了解他内部的主题驱动以及特有的驱动机制。

2、  Sencha Touch 2

特点：

（1）       世界上第一个基于HTML5的Mobile App框架，基于ExtJS。Sencha Touch是一个独立的库，无需依赖其他库，如Jquery。

（2）    采用以JavaScript为核心的方法，基本上不需要写HTML

（3）    支持大量原声系统内部的API。

（4）    提供大的对象模型，非常丰富的触摸事件和自定义事件。

（5）    提供内置的服务器和本地存储的抽象层与强大的数据包，开发人员很容易通过本地存储保存各种数据，可在关系数据基础上轻松运行CRUD操作。

（6）    支持HTML5的各种标准规法并对其进行封装，例如本地存储，地理地位、音视频等

（7）    自身提供强大的本地打包功能，可以在Mac和window上直接打包生成安装程序。

缺点：

（1）       只支持WebKit内核浏览器，意味着只能支持IOS和Android操作系统

（2）       由于开发语言不是基于HTML标签，而是类似客户端的MVC风格编写的JavaScript代码，相对来说，学习周期较长。

3、  Kendo UI

特点：

（1）       页面展示效果很优秀，仅次于Sencha Touch。

（2）       拥有众多的常用组件，最具特色和强大的有 Grid 表格组件，是开发人员快速开发报表等信息。

（3）       根据数据模型可以创建丰富漂亮的图标和仪表盘。

（4）       也是基于Jquery库，所以对于熟悉Jquery开发人员，开发起来不会很费劲。

缺点：

（1）       由于效果仅次于Sencha Touch，所以学习成本也仅次于Sencha Touch。

（2）       部分组件收费。

（3）       对中文文档支持的不够多。

常用的web框架

1、  Bootstrap:

特点：

（1）       当今很流行很火的HTML模板框架，能帮助开发人员快速出色的前段UI.

（2）       跨设备、跨浏览器、提供对PC与移动设备支持。

（3）       和移动框架一样，支持响应式布局

（4）       Bootstrap 支持HTML5标签和语法，要求建立在HTML5文档类型基础上进行设计和开发。

（5）       选用SASS、LESS作为CSS预处理语言，帮助开发者动态构建CSS样式。

（6）       可以搭配Jquery框架一起使用。

（7）       拥有众多样式库和组件支持。

缺点：

Bootstrap能快速构建出时尚和现代感的UI，但是由于建立在HTML5文档类型基础上，所以只支持现代浏览器，不支持IE9以下的浏览器。经过验证对IE11浏览器兼容的不够好。

2、  EasyUI

特点：

（1）       很常用的Jquery UI框架集合，能帮助开发人员快速建立功能强大并且美观的UI界面。

（2）       基于Jquery库，拥有众多强大的JS组件。

（3）       支持JS与HTML两种宣传方式，让开发更加灵活

（4）       支持HTML5标签

（5）       众多文档和教程支持。

缺点：

    不支持移动设备，适合构建系统的后台UI。

关于框架的选择，根据项目的需要分为PC项目、移动项目与PC+移动项目。

一、PC项目：如果不要求浏览器，可以选择bootstrap，原因：可以快速搭建漂亮而大气的UI界面。如果要求兼容所有浏览器，可以选择EasyUI, Jquery UI 等等。

二、移动项目： 推荐使用Jquery mobile ，原因：Jquery mobile虽然没有Sencha Touch所展示的效果强大，但是学习周期短，对众多平台和设备都兼容，是基于HTML标签方式，而且自带了很多常用的组件和事件，开发者可以快速搭建起适应各个平台的移动站点或者WebApp。这是以上两个框架比拟不了的。

通常移动项目分为三种类型：Native App (原生应用)、WebApp（web应用）、Hybrid App(混合应用)。

Native App 优点：界面华丽、运行流畅，用户体验很好、但是开发与维护成本较高而且不可以跨平台。

WebApp 优点：开发与维护成本低，拥有良好的跨平台性，更新版本容易、也可以通过HTML5新特性以及中间件平台（PhoneGap、AppCan）可以调用设备底层API以及本地安装打包实现类似于Native App效果的应用。但是现阶段WebApp用户交互体验与流畅性较Native App差些。不过相信web App将会成为以后市场的主流。

Hybrid App：介于webApp 与 Native App两者之间的app，Hybrid App混合模式移动应用，拥有 Native App 的良好的用户交互体验的优势和 web app跨平台开发的优势，目前众多主流应用都是基于这种方式开发的，比如：百度搜索、Facebook等，通过自己研究，国内第二大移动通信软件陌陌也是基于这种方式开发的。

移动项目的解决方案，根据项目的不同，推荐如下：

方案1: phoneGap (AppCan )+ Jquery mobile +HTML5.  之所以这么组合因为phoneGap 是很流行的国外开源的中间件平台，支持设备众多。Jquery mobile能帮助开发人员快速建立web应用，配合HTML5一些新特性，比如追踪用户定位、多媒体播放、消息实时推送、本地存储等功能实现原声应用的效果。虽然phoneGap也有些学习成本，但是被Adobe公司收购后，可以结合Adobe公司的工具很容易使用phoneGap打包应用程序用于本地安装。AppCan和phoneGap类似，是国内的中间件平台，由于起步晚，所以了解的不是很深，但是，官方网站提供的文档非常详细，相信深入了解后他会是一个很好的工具。

方案2：IOS\ Android + Jquery mobile 之所以这么组合因为原生应用有良好的用户交互体验，可以灵活的使用原生特性与webapp的特性，也可以用来做个外壳，然后通过webview\ uiwebview 加载Jquery mobile 来实现具体功能。

三、PC+移动项目

方案1：Bootstrap + Jquery组件。在项目的界面结构布局简单的情况下，可以使用Bootstrap来一次性实现，因为Bootstrap支持响应式布局，可以根据不同的分辨率显示不同的布局结构。比如菜单在PC端分辨的情况下横向显示在页面的头部，等分辨率变小时，会自动隐藏或者移动页面的左侧变成竖向显示。这样选择大大节省开发时间，一次开发，多个平台都可以用。

方案2：Bootstrap/easyUI/JqueryUI + Jquery mobile。在项目结构复杂的时候，就要分开开发，PC可以用bootstrap 等框架，移动端可以跟据 移动项目的解决方案来开发，大多数都是采用这种开发模式。例如淘宝网等。这样开发的优势是，没有局限性，在开发PC端时不用顾虑移动端要怎么显示，可以随意设计丰富界面，而移动端可以随意设计成移动端显示的效果也不必顾虑PC上如何布局。后台可以用web services提供数据给移动端显示，如果需要两者实时交互，可以使用.net的WCF技术，也可以用现在流行的轻量级node.js作为后台服务，用HTML5最新特性WebSockets API进行实时交互或者消息推送功能。