Hybrid APP Introduction

I'm a back-end programmer, but also I like learn some new things such as front-end programming. When I worked at JD.COM, we need to find a method to build a new module or new App in Android or Iphone smartphone. Hybrid App is a useful method to realize it.

Transcript

1. Eric.Xiao ericssonxiao@gmail.com http://www.linkedin.com/in/ericssonxiao
2. Hybrid App
3. 目前碰到的问题是什么？ ž 弱网络或短暂无网络情况下，用户使用客 户端的问题。 ž 开发一个Native App的应用，费时，费力， 成本高，所以想要降低成本。 ž 学习一下Java语言当时的口号，一次编 译，到处运行，所以想要跨平台，一份代 码搞定所有问题。 ž 到发版的时候，各种发版，各种平台，还 有苹果平台的审核，长达一个月，都有可 能。
4. 目前碰到的问题是什么？ ž 发了版本了，出BUG了，无法改，只好 等待下一版本。 ž 再来谈谈工程化，敏捷软件开发，想要快 速迭代。 ž Native App 平台依赖强，升级成本高 ž JS跟CSS，依赖于后端产出的HTML ž 有的业务逻辑在前端，有的在Model层， 更多的是在View层
5. 比较一下吧！
7. 再来一个趋势图
8. 我们的愿景是： ž App可以随时发版，解决各种线上问题 ž App可以离线使用，不依赖平台，减少用 户升级版本时，造成的用户流失。 ž App开发快，可迭代，可以并行开发，前 后台分离，职责清晰。 ž App可以唤起手机的各种功能 ž App可以插件式的升级各种功能 ž App便于测试，可以做UI自动化测试，及 其他各种自动化测试。
9. 我们的选择是：
10. 因为我们是H5垂直研发组
11. 原来的系统
12. 新系统设计
13. 为实现新系统，引入NodeJS ž 前端熟悉的语言，學習成本低 ž 都是JS，可以前后端复用 ž 体质适合：事件驱动、非阻塞I/O ž 适合IO密集型业务 ž 执行速度也不差 今天没有时间讲NodeJS, 还需要学习，并在具 体的项目中使用，产生一些使用经验以后，留 在以后分享。
14. 前后端职责划分： 分离是为了职责专注，改变是为了让产品更好！ 这个过程中肯定会碰见问题，需要大家齐心合力，努力解决。
15. 淘宝使用这样的架构，压测性能 对比
16. 回归正题 ž 先讨论一下前端浏览器部分的开发
17. 我们的研发工具 ž Yeomanè Yo, Grunt, Bower ž Javascript + Html5 + CSS3 ž LESS or SASS ž Node.js ž Java ž Redis + Memcached ž ActiveMQ or Kafka ž Mysql or MongoDB
18. Yeoman介绍 ž Yeoman是一个工具的集合，包含三个工 具：Yo, Grunt, Bower.
19. Yeoman介绍
20. Yeoman 安装 安装Yeoman的命令： 创建一个新的目录： 运行Yo命令，创建AngularJS项目：
21. Yo 创建AngularJS项目
22. Yo 创建AngularJS项目
24. 创建成功
25. Yo命令
26. Bower命令
27. Grunt 命令
28. HTML5离线存储技术 ž Application Cache — 本地缓存应用所需文件 ž LocalStorage & SessionStorage — 键值对（key-value）存储数据 ž Web SQL — 关系数据库，通过SQL语句访问 ž IndexDB — 索引数据库
29. Application Cache ž HTML5支持应用资源的离线存储，每一 个WEB应用可以将网站的静态资源，图 片，js，css等缓存到本地的浏览器中。 ž 通过使用缓存清单（cache manifest）做 控制。 ž 减轻服务器的负载 ž 解决在弱网络或短暂无网络环境下，用户 使用的问题，节省带宽，优化用户体验。
30. Application Cache浏览器支持情况：
31. Application Cache 注意事项 ž 站点离线存储的容量限制是5M ž 如果manifest文件，或者内部列举的某一个文件不能正常下载， 整个更新过程将视为失败，浏览器继续全部使用老的缓存 ž 引用manifest的html必须与manifest文件同源，在同一个域下 ž 在manifest中使用的相对路径，相对参照物为manifest文件 ž CACHE MANIFEST字符串应在第一行，且必不可少 ž 系统会自动缓存引用清单文件的 HTML 文件 ž manifest文件中CACHE则与NETWORK，FALLBACK的位置顺 序没有关系，如果是隐式声明需要在最前面 ž FALLBACK中的资源必须和manifest文件同源 ž 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问 缓存中的资源。 ž 站点中的其他页面即使没有设置manifest属性，请求的资源如果 在缓存中也从缓存中访问 ž 当manifest文件发生改变时，资源请求本身也会触发更新
32. Web服务器要添加的配置：
33. Manifest 文件 ž Manifest文件有变化才更新 ž 一次必须更新Manifest中的所有文件 ž 下次生效
34. Application Cache更新机制
35. LocalStorage & SessionStorage
36. LocalStorage & SessionStorage ž HTML5中定义的WebStorage API的规范， 定义了浏览器存储资料的机制，包含 localStorage 和 SessionStorage ž LocalStorage可以长期存储数据，没有时 间限制，一天，一年，两年甚至更长，数 据都可以使用 ž SessionStorage只有在浏览器被关闭之 前使用，创建另一个页面时同意可以使用， 关闭浏览器之后数据就会消失 ž 最多存储5M的数据
37. LocalStorage & SessionStorage 浏览器支持情况：
38. LocalStorage & SessionStorage 浏览器支持情况：
39. Cookie, LocalStorage, SessionStorage区别
40. LocalStorage使用 Window.localStorage.setItem(key,value);//存储 数据 Window.localStorage.getItem(key);//读取数据 Window.localStorage.removeItem(key);//删除数 据项 Window.localStorage.clear();//删除所有数据
41. SessionStorage使用 Window.sessionStorage.setItem(key,value);// 存储数据 Window.sessionStorage.getItem(key);//读取数 据 Window.sessionStorage.removeItem(key);//删 除数据项 Window.sessionStorage.clear();//删除所有数 据
42. 为支持多个浏览器，建议使用 Store.js https://github.com/marcuswestin/store.js.git
43. Web SQL ž Web SQL不是HTML5规范的一部分，它通 过一套API来操作浏览器中的数据库。 ž 1）打开数据库openDatabase()方法： — 此方法创建数据库对象，既可以使用已有的数据 库，也可以创建新的数据库。 ž 2）事务transaction()方法： — 此方法可以用于控制事务处理，执行提交操作或 回滚操作。 ž 3）执行SQL命令executeSql()方法： — 此方法用于执行SQL查询。
44. Index DB ž HTML5 的一个重要特性是本地数据持久 性，它使用户能够在线和离线访问 Web 应用程序。 ž IndexedDB API 取代了 Web Storage API， 后者在 HTML5 规范中已不推荐使用。 ž IndexedDB 具有多个优势，其中包括索 引、事务处理和健壮的查询功能。
45. Web SQL浏览器支持情况：
46. IndexDB 浏览器支持情况：
47. Web SQL
48. IndexDB
49. Q&A
50. Contact Me