hybrid app简要介绍

Eric.Xiao ericssonxiao@gmail.com

http://www.linkedin.com/in/ericssonxiao

Hybrid App

目前碰到的问题是什么？

� 弱网络或短暂无网络情况下，用户使用客户端的问题。

� 开发一个Native App的应用，费时，费力，成本高，所以想要降低成本。

� 学习一下Java语言当时的口号，一次编译，到处运行，所以想要跨平台，一份代码搞定所有问题。

� 到发版的时候，各种发版，各种平台，还有苹果平台的审核，长达一个月，都有可能。

目前碰到的问题是什么？

� 发了版本了，出BUG了，无法改，只好等待下一版本。

� 再来谈谈工程化，敏捷软件开发，想要快速迭代。

� Native App 平台依赖强，升级成本高 �  JS跟CSS，依赖于后端产出的HTML � 有的业务逻辑在前端，有的在Model层，

更多的是在View层

比较一下吧！

再来一个趋势图

我们的愿景是：

� App可以随时发版，解决各种线上问题 � App可以离线使用，不依赖平台，减少用

户升级版本时，造成的用户流失。 � App开发快，可迭代，可以并行开发，前

后台分离，职责清晰。 � App可以唤起手机的各种功能 � App可以插件式的升级各种功能 � App便于测试，可以做UI自动化测试，及

其他各种自动化测试。

我们的选择是：

原来的系统

新系统设计

为实现新系统，引入NodeJS

� 前端熟悉的语言，學習成本低

� 都是JS，可以前后端复用

� 体质适合：事件驱动、非阻塞I/O � 适合IO密集型业务

� 执行速度也不差

前后端职责划分：

淘宝使用这样的架构，压测性能对比

回归正题

� 先讨论一下Hybrid App 内嵌web部分的开发

我们的研发工具

� Yeomanè Yo, Grunt, Bower �  Javascript + Html5 + CSS3 �  LESS or SASS � Node.js �  Java � Redis + Memcached � ActiveMQ or Kafka � Mysql or MongoDB

Yeoman介绍

� Yeoman是一个工具的集合，包含三个工具：Yo, Grunt, Bower.

Yeoman介绍

Yeoman 安装 安装Yeoman的命令：

创建一个新的目录：

运行Yo命令，创建AngularJS项目：

Yo 创建AngularJS项目

Yo 创建AngularJS项目

创建成功

Yo命令

Bower命令

Grunt 命令

HTML5离线存储技术

� Application Cache � 本地缓存应用所需文件

�  LocalStorage & SessionStorage � 键值对（key-value）存储数据

� Web SQL � 关系数据库，通过SQL语句访问

�  IndexDB � 索引数据库

Application Cache

� HTML5支持应用资源的离线存储，每一个WEB应用可以将网站的静态资源，图片，js，css等缓存到本地的浏览器中。

� 通过使用缓存清单（cache manifest）做控制。

� 减轻服务器的负载 � 解决在弱网络或短暂无网络环境下，用户

使用的问题，节省带宽，优化用户体验。

Application Cache浏览器支持情况：

Application Cache 注意事项

�  站点离线存储的容量限制是5M �  如果manifest文件，或者内部列举的某一个文件不能正常下载，

整个更新过程将视为失败，浏览器继续全部使用老的缓存 �  引用manifest的html必须与manifest文件同源，在同一个域下 �  在manifest中使用的相对路径，相对参照物为manifest文件 �  CACHE MANIFEST字符串应在第一行，且必不可少 �  系统会自动缓存引用清单文件的 HTML 文件 �  manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序

没有关系，如果是隐式声明需要在最前面 �  FALLBACK中的资源必须和manifest文件同源 �  当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问

缓存中的资源。 �  站点中的其他页面即使没有设置manifest属性，请求的资源如果

在缓存中也从缓存中访问 �  当manifest文件发生改变时，资源请求本身也会触发更新

Web服务器要添加的配置：

Manifest 文件

� Manifest文件有变化才更新 � 一次必须更新Manifest中的所有文件 � 下次生效

Application Cache更新机制

LocalStorage & SessionStorage

LocalStorage & SessionStorage

� HTML5中定义的WebStorage API的规范，定义了浏览器存储资料的机制，包含localStorage 和 SessionStorage

�  LocalStorage可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用

� SessionStorage只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

� 最多存储5M的数据

LocalStorage & SessionStorage浏览器支持情况：

LocalStorage & SessionStorage浏览器支持情况：

Cookie, LocalStorage, SessionStorage区别

LocalStorage使用

Window.localStorage.setItem(key,value);//存储数据 Window.localStorage.getItem(key);//读取数据 Window.localStorage.removeItem(key);//删除数据项 Window.localStorage.clear();//删除所有数据

SessionStorage使用

Window.sessionStorage.setItem(key,value);//存储数据 Window.sessionStorage.getItem(key);//读取数据 Window.sessionStorage.removeItem(key);//删除数据项 Window.sessionStorage.clear();//删除所有数据

为支持多个浏览器，建议使用Store.js

https://github.com/marcuswestin/store.js.git

Web SQL �  Web SQL不是HTML5规范的一部分，它通

过一套API来操作浏览器中的数据库。 �  1）打开数据库openDatabase()方法：

�  此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库。

�  2）事务transaction()方法： �  此方法可以用于控制事务处理，执行提交操作或回滚操作。

�  3）执行SQL命令executeSql()方法： �  此方法用于执行SQL查询。

Index DB

� HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。

�  IndexedDB API 取代了 Web Storage API，后者在 HTML5 规范中已不推荐使用。

�  IndexedDB 具有多个优势，其中包括索引、事务处理和健壮的查询功能。

Web SQL浏览器支持情况：

IndexDB 浏览器支持情况：

Web SQL

IndexDB

Q&A

Contact Me