hybrid app简要介绍
TRANSCRIPT
Eric.Xiao [email protected]
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