etao mobile ux --------- MIX

etao mobile ux 在支付宝芝士会中分享无线解决方案mix

Transcript

1. Mobile Is X 12年10月11⽇日星期四
2. Agenda 异翅 总体介绍mix - 10min 完颜 介绍 Detect - 15min ⽞玄寂 介绍资源管理⽅方案 - 15min 渚熏 介绍组件开发以及项⺫⽬目 开发 - 20min 徐宁 介绍打包、发布、代码托管等 - 15min 12年10月11⽇日星期四
3. MIX 12年10月11⽇日星期四
4. agenda • 什么是Detect.js？ • Detect之Network检测介绍 ‣ 需求背景 ‣ 核⼼心过程 ‣ 结果对象 ‣ 完整流程 ‣ 问题/TODO/Extra • Detect的构想 https://github.com/mixteam/detect.js 12年10月11⽇日星期四
5. 什么是Detect.js • ⼀一个移动前端环境检测包 • 移动环境多种多样： ‣ 不同的⺴⽹网络类型和⺴⽹网速 ‣ 不同的屏幕尺⼨寸 ‣ 不同的硬件配置和性能 ‣ 不同的HTML5/CSS3特性 ‣ 不同的API ‣ 不同的UA信息 • 需要区分应对，保证效能最优化 12年10月11⽇日星期四
6. Detect之Network检测介绍 需求背景： 12年10月11⽇日星期四
7. Detect之Network检测介绍 核⼼心过程： 12年10月11⽇日星期四
8. Detect之Network检测介绍 核⼼心过程：图⽚片设置 Boomerang图⽚片设置⽅方案 每⼀一个images size 在对应的timeout内（绿），都代表着⼀一个带宽值 https://spreadsheets.google.com/ccc?key=0AplxPyCzmQi6dDRBN2JEd190N1hhV1N5cHQtUVdBMUE&hl=en_GB 12年10月11⽇日星期四
9. Detect之Network检测介绍 核⼼心过程： 图⽚片设置 Timeout = 600ms 1k -> 16kbps (最⼩小极限) 3.5k -> 56kbps (gprs) 8k -> 128kbps 24k -> 384kbps (3G) 32k -> 512kbps (3G/WIFI) Total = 68.5K 12年10月11⽇日星期四
10. Detect之Network检测介绍 结果对象： "network":{ "type":false, "brandwidth":616661, "grade":"fast", "online":"online” } 12年10月11⽇日星期四
11. Detect之Network检测介绍 完整流程： http://img01.taobaocdn.com/tps/i1/T1Tz6OXn4rXXa1xWgz-2208-1287.png 12年10月11⽇日星期四
12. Detect之Network检测介绍 问题： 结果⽆无法同步输出 解决： ⽀支持传⼊入执⾏行回调（治标不治本） 记⼊入本地存储，下次刷新同步 中间跳转⻚页⾯面 12年10月11⽇日星期四
13. Detect之Network检测介绍 TODO： HTML5 WebTiming 多普勒测量DNS+TCP延时(facebook) … 12年10月11⽇日星期四
14. Detect之Network检测介绍 Extra: HTML5 WebTiming window.performance.timing DNS = domainLookupEnd - domainLookupStart TCP = connectEnd - connectStart Android 4.0 + 12年10月11⽇日星期四
15. Detect之Network检测介绍 Extra: 多普勒测量DNS+TCP延时 1.http://a.xx/test?HTTP1.0&t=1&size=0k 2.http://a.xx/test?HTTP1.1&t=2&size=0k 3.http://a.xx/test?HTTP1.1&t=3&size=0k 4.http://a.xx/test?HTTP1.1&t=4&size=10k 5.http://a.xx/test?HTTP1.1&t=5&size=40k T1=DNS + new connection + RTT T2=new connection + RTT T3=RTT DNS延迟 = T1-T2 TCP延迟 = T3-T2 10K/(t4-t3) ~ TCP bw (40k-10k)/(t5-t4) ~ TCP bw http://www.facebook.com/note.php?note_id=10150212498738920 12年10月11⽇日星期四
16. Detect的构想 组件/功能： Detect (core) Network – ⺴⽹网络类型&⺴⽹网速 UA - UserAgent Ability – HTML5/CSS3/ECMA5 (upcoming) Device-api – 设备特性 (upcoming) Hardware -硬件配置、性能 (upcoming) 平台化/⾃自动化 12年10月11⽇日星期四
17. agenda “休闲⼀一刻” “糖精” “⽉⽊木糖醇” 12年10月11⽇日星期四
18. “休闲⼀一刻”from ⽟玉伯 12年10月11⽇日星期四
19. ⻚页⾯面中引⼊入script 这是犀⽜牛书⾥里推荐的写法， ⽤用来写写博客⺴⽹网站没什么问题。 12年10月11⽇日星期四
20. 当单个script变⼤大时 近8000⾏行的单⽂文件，多⼈人协作不⽅方便。 解决办法：拆。 12年10月11⽇日星期四
21. 拆开后的烦恼 拆开后能缓解可维护性，但性能不佳 1）请求数太多 2）同步阻塞 12年10月11⽇日星期四
22. 请求数太多解决⽅方案：combo 同步阻塞严重，严重影响⽆无缓存时⻚页⾯面打开速度 同步阻塞解决⽅方案：Loader …… seajs 12年10月11⽇日星期四
23. seajs 漫天304 12年10月11⽇日星期四
24. Tran 22% DNS 27% RTT 25% Conn 25% 2G Tran 10% DNS 31% RTT 33% Conn 26% 3G Tran 10% DNS 33% RTT 40% Conn 17% wifi DavidWei－MobilePerformanceVelocity2011 12年10月11⽇日星期四
25. Tran 22% DNS 27% RTT 25% Conn 25% 2G Conn RTT DNS Tran Tran 10% DNS 31% RTT 33% Conn 26% 3G Tran 10% DNS 33% RTT 40% Conn 17% wifi DNS Resolution TCP connection setup (3way-handshake) Round trip time DavidWei－MobilePerformanceVelocity2011 12年10月11⽇日星期四
26. Tran 22% DNS 27% RTT 25% Conn 25% 2G Conn RTT DNS Tran Tran 10% DNS 31% RTT 33% Conn 26% 3G Tran 10% DNS 33% RTT 40% Conn 17% wifi DNS Resolution TCP connection setup (3way-handshake) Round trip time DavidWei－MobilePerformanceVelocity2011 http://velocity.oreilly.com.cn/2011/ppts/MobilePerformanceVelocity2011_DavidWei.pdf 12年10月11⽇日星期四
27. 12年10月11⽇日星期四
28. 以⼿手机淘宝 - 我的淘宝 为例 12年10月11⽇日星期四
29. 以⼿手机淘宝 - 我的淘宝 为例 12年10月11⽇日星期四
30. 以⼿手机淘宝 - 我的淘宝 为例 dz.js 12年10月11⽇日星期四
31. 以⼿手机淘宝 - 我的淘宝 为例 dz.js 12年10月11⽇日星期四
32. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh 12年10月11⽇日星期四
33. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh 12年10月11⽇日星期四
34. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh result 12年10月11⽇日星期四
35. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh result 12年10月11⽇日星期四
36. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh reason result 12年10月11⽇日星期四
37. 以⼿手机淘宝 - 我的淘宝 为例 dz.js refresh reason result 12年10月11⽇日星期四
38. ⼀一些必须要知道的事情 浏览器回退与前进可使max-age⽣生效，但其亦并不可靠 浏览器刷新会重新请求资源，由于Last-Modified依旧⽣生效，将返回304 ⼿手动在浏览器地址栏中输⼊入地址，则会⽆无视当前缓存重新请求 即使地址和当 前⻚页地址保持⼀一致 点击当前⻚页地址栏，输⼊入法弹出后点击键盘go， 则会⽆无视当前缓存重新请求 12年10月11⽇日星期四
39. 如何解救 - applicationCache 12年10月11⽇日星期四
40. 如何解救 - applicationCache http://www.slideshare.net/pigcan/applicationcache（ppt） http://www.slideshare.net/pigcan/applicationcache-12783359（文稿） 12年10月11⽇日星期四
41. 30个条⺫⽬目意味着什么 再来回顾下manifest具体的执⾏行： ⾸首次访问含有manifest属性的站点的时候： 1. ⾸首先进⾏行的过程是如同没有manifest属性时候是⼀一致的（⽂文档与资源⽂文件的下载） 2. 接下来会触发manifest清单所列⽂文件的下载 这是两个同步的过程。 12年10月11⽇日星期四
42. applicationCache是糖精 1. 含有manifest属性的当前请求⻚页⽆无论如何都会被缓存（对于动态⻚页⽽而⾔言很致命）tms何去何从 2. 更新需要建⽴立在manifest⽂文件的更新，⽂文件更新后是需要⻚页⾯面再次刷新的（需要2次刷新才能获取新资源） 3. 更新是全局性的，⽆无法单独更新某个⽂文件（⽆无法单点更新） 4. 对于链接的参数变化是敏感的，任何⼀一个参数的修改都会被（master）重新缓存（重复缓存含参⻚页⾯面） 5. 所有⾃自定义UI事件都发⽣生在load事件执⾏行完毕后 （UI事件执⾏行反馈结果太过延时） 12年10月11⽇日星期四
43. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK 12年10月11⽇日星期四
44. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK ⽆无携带cookie 12年10月11⽇日星期四
45. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK 资源⽂文件输出到⻚页⾯面，并存储，并记录版本cookie cookie 12年10月11⽇日星期四
46. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK 资源⽂文件输出到⻚页⾯面，并存储，并记录版本cookie cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html 12年10月11⽇日星期四
47. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html 携带cookie 12年10月11⽇日星期四
48. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html cookie记录的版本信息未更改，输出⻚页⾯面，loader调⽤用存储 12年10月11⽇日星期四
49. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html cookie记录的版本信息未更改，输出⻚页⾯面，loader调⽤用存储 cookie记录的版本信息未更改，输出⻚页⾯面，但这之前⽤用户⼿手动清除缓存，loader需异步加 载资源⽂文件（需描述⽂文件） 12年10月11⽇日星期四
50. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html cookie记录的版本信息未更改，输出⻚页⾯面，loader调⽤用存储 cookie记录的版本信息未更改，输出⻚页⾯面，但这之前⽤用户⼿手动清除缓存，loader需异步加 载资源⽂文件（需描述⽂文件） cookie记录的版本信息更改，输出版本差异间修改的资源⽂文件到⻚页⾯面，loader调 ⽤用缓存 12年10月11⽇日星期四
51. 新技术⽅方案 Loader + LocalStorage + Cookie Loader = seajs + pluginSDK cookie note： 资源输出⽅方式涉及最佳实践参考gmail http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html cookie记录的版本信息未更改，输出⻚页⾯面，loader调⽤用存储 cookie记录的版本信息未更改，输出⻚页⾯面，但这之前⽤用户⼿手动清除缓存，loader需异步加 载资源⽂文件（需描述⽂文件） cookie记录的版本信息更改，输出版本差异间修改的资源⽂文件到⻚页⾯面，loader调 ⽤用缓存 本地存储耗尽，loader根据描述⽂文件单独发送请求 12年10月11⽇日星期四
52. plugin-storage（新⽅方案似⽉⽊木糖醇） 1. 通过插件的⽅方式让seajs⽀支持了⽂文件夹⽅方式的版本管理（后续⽀支持⽂文件名形式）； 2. 对js的存储（存于localStorage）可配置，⽀支持存储js的单点更新（更新⽅方式模拟manifest实现）； 3. 插件内置combo⽀支持，对combo请求亦可版本管理和获取后细粒度拆分存储。 更多攻略详⻅见 http://ux.etao.com/posts/449 12年10月11⽇日星期四
53. plugin-storage（新⽅方案似⽉⽊木糖醇） 1. 通过插件的⽅方式让seajs⽀支持了⽂文件夹⽅方式的版本管理（后续⽀支持⽂文件名形式）； 2. 对js的存储（存于localStorage）可配置，⽀支持存储js的单点更新（更新⽅方式模拟manifest实现）； 3. 插件内置combo⽀支持，对combo请求亦可版本管理和获取后细粒度拆分存储。 更多攻略详⻅见 http://ux.etao.com/posts/449 12年10月11⽇日星期四
54. plugin-storage（新⽅方案似⽉⽊木糖醇） 1. 通过插件的⽅方式让seajs⽀支持了⽂文件夹⽅方式的版本管理（后续⽀支持⽂文件名形式）； 2. 对js的存储（存于localStorage）可配置，⽀支持存储js的单点更新（更新⽅方式模拟manifest实现）； 3. 插件内置combo⽀支持，对combo请求亦可版本管理和获取后细粒度拆分存储。 更多攻略详⻅见 http://ux.etao.com/posts/449 12年10月11⽇日星期四
55. plugin-storage（新⽅方案似⽉⽊木糖醇） 1. 通过插件的⽅方式让seajs⽀支持了⽂文件夹⽅方式的版本管理（后续⽀支持⽂文件名形式）； 2. 对js的存储（存于localStorage）可配置，⽀支持存储js的单点更新（更新⽅方式模拟manifest实现）； 3. 插件内置combo⽀支持，对combo请求亦可版本管理和获取后细粒度拆分存储。 更多攻略详⻅见 http://ux.etao.com/posts/449 12年10月11⽇日星期四
56. 总结⼀一下 我们总是不停的碰到问题，接下来分析问题，并解决问题，⼜又碰到问题 -- 12年10月11⽇日星期四
57. agenda 流程 托管&协作 12年10月11⽇日星期四
58. 流程 12年10月11⽇日星期四
59. 托管&协作 12年10月11⽇日星期四
60. agenda 组件开发 项⺫⽬目开发 12年10月11⽇日星期四
61. 组件的定义 • 拥有样式和⾏行为的公⽤用元素可以认为是组件 • 组件适⽤用于组合，并不适⽤用于继承 • 组件的包装粒度必须适中 12年10月11⽇日星期四
62. 组件的编写 12年10月11⽇日星期四
63. 组件的编译和调试 编译：把专注⾏行为的JS⽂文件、专注结构的MU⽂文件以及专注 样式的LESS编译成可⽤用于Seajs加载的模块 调试：编译的同时⽣生成⼀一个HTML⽂文件，可⽤用于调试，并实时 监控⽂文件的变更。 12年10月11⽇日星期四
64. 组件的使⽤用 • 在视图层模版中，⽤用⾃自定义Tag的⽅方式引⼊入组件。 • 组件绑定于视图中提供的⼀一组数据。 • 在视图中通过ID可以获取该组件。 • 组件⾃自⾝身维护局部更新。 12年10月11⽇日星期四
65. MIX框架结构 9!?
    D E
    $*   
    D E
    <0=7D E
    *63:5>& D E
    +A!?*6 D  E
    41CBD   E
    ., D E
    (@ /D   E
    " # 8 -
    -  )
    ; % )
    2 ' )
    12年10月11⽇日星期四
66. HelloWorld⽰示例 12年10月11⽇日星期四
67. HelloMIX⽰示例⼀一 修改helloworld.js 创建应⽤用helloworld/apps/hellomix 
    12年10月11⽇日星期四
68. 
    
    
    HelloMIX⽰示例⼆二 12年10月11⽇日星期四
69. thanks 12年10月11⽇日星期四