,Click to edit Master title,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,移动,Web,开发社区,移动,Web,开发实践之旅,主 讲：刚子,团队成员：威老、阿本,二零一一年金秋十月 于 杭州,移动Web开发实践之旅主 讲：刚子团队成员：威老、,内容提纲,移动,Web,开发和调试工具介绍,jQueryMobile,和,SenchaTouch2,实例演示,移动,Web,发展机遇和技术优势,移动,Web,开发框架分析和选择,移动,Web,技术资源和前景展望,内容提纲移动Web开发和调试工具介绍jQueryMobile,传统网站面临的挑战,随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于,Android,、,IOS,等多种平台存在，开发、维护成本高。,机遇与挑战并存,移动,Web,技术，利用浏览器、,HTML5,、,JavaScript,跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持,Android,、,IOS,等主流平台。,移动,Web,技术优势,通用性，移动站点、跨平台的客户端应用提供统一的解决方案。,较低的开发和维护成本，因为您只需要一次编码。,移动,Web,技术目前适合场景,以信息为主的应用，不适合对性能要求过高的产品。,移动,Web,发展机遇和技术优势,之需求分析,传统网站面临的挑战移动Web发展机遇和技术优势 之需求分析,Web,移动站点,（手机、平板电脑）,客户端应用,（,Android,、,IOS,）,客户端应用,（其他平台）,移动,Web,发展机遇和技术优势,平台示意图,Web移动站点客户端应用客户端应用移动Web发展机遇和技术优,移动,Web,开发框架分析和选择,以移动,Web,开发客户端为例，整体架构如下：,UI,层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架,jQueryMobile,和,SenchaTouch,。,移动中间件，处于,UI,层和终端系统之间，封装各系统差异，提供统一的,JavaScript,接口，操作系统资源，如：文件系统、摄像头等，推荐,PhoneGap,。,终端系统，处于整个应用的最底层，除非需要扩展,PhoneGap,接口，否则开发者可以不关心。,之总体架构,UI,层,移动中间件,终端系统,jQueryMobile,Sencha Touch,PhoneGap,Android,、,IOS,移动Web开发框架分析和选择以移动Web开发客户端为例，整,移动,Web,开发框架分析和选择,之,jQueryMoble,介绍,jQueryMobile,支持较多平台：,建立在,jQuery,框架之上，为其跨平台能力提供良好的基础。,支持较好的平台有：,Apple IOS 3.2-5.0Beta,、,Android 2.1-2.3,、,windows phone7,、,Blackberry,、,Firfox Mobile,、,Chrome Desktop 11-13,等，,请参照官网,。,布局自适应手机、平板电脑和,PC,。,结合,PhoneGap,，可生成跨平台移动客户端。,较丰富的组件支持，,官方组件演示链接,。,移动Web开发框架分析和选择 之jQueryMoble介,移动,Web,开发框架分析和选择,之,jQueryMoble,典型布局,jQueryMobile,典型的页面布局,根据,data-role,属性做组件渲染，,page,包含,head,、,navbar,、,content,，,page,为显示设备可视区域的一屏，多个,page,可以放在一个页面或一个独立的,HTML,页面。,开源项目参考,示例代码和界面为“移动,Web,开发社区”开源项目。,请,点击链接,查看源代码。,移动Web开发框架分析和选择 之jQueryMoble典,移动,Web,开发框架分析和选择,之,jQueryMoble,事件和数据加载,jQueryMobile,提供事件监听机制，在页面创建或显示时，提供回调函数。,如下面的示例代码，在分类页面创建时，用,JSONP,方式从服务器端，取回数据，然后填充页面内容。,也可用,JSP,、,PHP,等语言，在服务端打印内容。,移动Web开发框架分析和选择 之jQueryMoble事,移动,Web,开发框架分析和选择,之,Sencha Touch 2,Sencha Touch,对于开发者而言，可简单认为,Sencha Touch,是,ExtJS,在移动端的版本。,ExtJS,在,PC,领域，,UI,样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。,支持以,Webkit,为核心的平台,Android,、,iPhone,、,BlackBerry,。,Sencha,官网在,10,月,11,日发布,SenchaTouch2,开发者预览版，被称为历史性改变，下面列出部分新特性：,ExtJS4,为核心,支持类动态加载机制，按需使用,JavaScript,文件。,更清晰的,MVC,模式。,API,设计更加简单，比如：统一接口进行类定义和实例化操作。,自动化程度提高，不再需要对,View,、,Model,等组件手动注册。,Sencha Touch 2,官方指南中文版,10,月,14,日，“移动,Web,开发社区”发起了对,ST2,官方指南的翻译工作，了解更多特性请,链接这里,。,在此感谢社区成员：威老、,bamboo,、若天、桔子、,terry,为官方指南的翻译工作做出的贡献！,学习成本较高,纯,JavaScript,编码实现布局，需熟悉,MVC,开发模式和组件之间关系。,移动Web开发框架分析和选择 之Sencha Touch,移动,Web,开发框架分析和选择,之,Sencha Touch 2 MVC,模式介绍,MVC,模式介绍,数据模型层,Model,包括对数据的基本描述，如字段名称和类型；,Store,缓存来自,Model,的数据，,并且提供排序、过滤等方法，通常,Store,会和视图层、业务控制层打交道。,代表视图层,(View),，为数据提供展现方式，如：列表式展现或其他方式。,业务控制层（,Controller,）主要负责事件监听和业务处理。,右图是一个典型的,Sencha,Touch,应用目录,移动Web开发框架分析和选择 之Sencha Touch,移动,Web,开发框架分析和选择,之,Sencha Touch 2,一般开发过程,建立应用，配置应用命名空间、控制器和数据模型,新建讨论列表数据模型,Model,，,Proxy,为服务器端数据交换接口。,以“移动,Web,开发社区”客户端，讨论列表为例，介绍其开发过程。该客户端为开源项目，,请关注社区发布源代码。,移动Web开发框架分析和选择 之Sencha Touch,移动,Web,开发框架分析和选择,之,Sencha Touch 2,一般开发过程,新建数据存储,Store,，绑定,Model,，为视图层提供数据访问。,新建讨论列表视图，绑定,Store,。,控制器里注册事件监听和业务处理。,移动Web开发框架分析和选择 之Sencha Touch,移动,Web,开发框架分析和选择,之,Sencha Touch 2,一般开发过程,控制器里注册事件监听和业务处理。,总结,Sencha Touch,更加完善，团队有,ExtJS,开发人员，可优先选择。,jQueryMobile,适合一般信息类网站，快发速度快。,Sencha Touch 2,目前为开发者预览版，不建议在实际项目中使用。,移动Web开发框架分析和选择 之Sencha Touch,移动,Web,开发框架分析和选择,之,PhoneGap,PhoneGap,提供一组,JavaScript,接口，访问设备本地,API,，,而对其实行过程进行了很好的封装，支持多平台。,插件机制，可方便扩展,PhoneGap,接口。,提供对设备文件系统、摄像头、手机联系人、数据存储等能力。,移动Web开发框架分析和选择 之PhoneGap,移动,Web,开发框架分析和选择,之,PhoneGap,云编译,PhoneGap build,云打包应用,开发人员上传程序压缩文件到云编译平台：,之PhoneGap云编译,移动,Web,开发和调试工具,之,DreamWeaver CS5.5,Dreamweaver CS5.5,集成应用开发环境,集成,jQueryMobile,和,PhoneGap,框架，支持,Android,虚拟机。,详细安装方法请见,“移动,Web,开发社区”,网站。,移动Web开发和调试工具 之DreamWeaver CS,移动,Web,开发和调试工具,之远程调试工具,PhoneGap,远程调试工具,Weinre,，,官方网站链接,，,官方链接,在,PC,浏览器例如,Chrome,控制台，捕捉,PhoneGap,在移动设备上运行的错误，查看移动设备的,DOM,文档。,在官方提供的网页中，输入,JavaScript,命令，在终端设备执行，多用于查看,JavaScript,变量等。,移动Web开发和调试工具 之远程调试工具 Phon,移动,Web,技术资源,和前景展望,“,移动,Web,开发社区”,提供丰富的移动,Web,技术资源,前景展望,Touch 2,中文指南,Sencha Touch 2&PhoneGap,开源客户端（请关注,”,移动,Web,开发社区,”,发布源代码）,HTML5,技术的发展，为移动,Web,提供良好的基础。,开源框架发展前景看好，,PhoneGap,在被,Adobe,收购后，捐献给,Apache,开源组织。,Sencha Touch 2,在性能有很大改进，后续版本发布，我们始终保持关注。,移动Web技术资源和前景展望 “移动Web开发社区”提,Thank You!,主讲：刚子,Thank You!主,