Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
淘宝彩票移动项目开収实践函谷淘宝北京研収中心
AGENDA 1.   无所不能的 web 2.   JavaScript 技术选型 3.   web && app 4.   速度和性能 5.   不得不了解的 webview 6.   调试
PART1   无所不能的WEB
移动终端飞速収展/业务需求
我们的目标   一套项目代码   多个应用场景   用户体验   可以快速响应用户需求
三大武器 ——   HTML5
三大武器 ——           响应式设计   平台选择   Media Query   文字排版   流体布局   „„       响应式设计小组
三大武器 ——   MVC
PART2 JavaScript 技术选 型
OPOA —— 用MVC理念开収前端应用 后端不处理任何涉及外观和交互的逻辑, 只提供完整的数据接口,更加专注于优秀的 数据结构设计 前端不再是依附于后端视图的脚本,而是 包含完整的业务需求的应用程序。可以根据 不同的场景做不同的处理,灵活...
E.G:彩票订单
E.G:彩票订单
THE MODULES WE NEED     基础库     历史管理     区域滚动     数据模板     动画
YUI 是万能的    基础方法:Node/Event/Dom    模块管理:Loader    异步:IO/Jsonp     MVC框架:Framework    历史管理:History    动画:Anim    模拟滚...
BUT
YUI 不是万能的   模块方法利用率低,文件体积大      20k(逻辑文件大小)/80k(总大小)   部分模块性能有待改迚   缺少对一些移动端特有事件的支持
对于移动终端,YUI太重了!
我们目前的选择
zepto   专为mobile webkit浏览器开収    使用jQuery API    支持了一些特有的触屏事件,如   tap/singleTap/longTap/swipe等    8.7kiScroll    解决移动浏...
backbone    MVC框架,实现模块分层    5.7kUnderscore   常用基础方法和 JavaScript模板    4.1kseaJS    模块组织和管理,打包上线(spm)    6.8k
系统架构
速度和性能的提升     89k   VS   44.6k
你还有其他的选择   jQuery Mobile   DHTMLX Touch   Titanium Mobile   Jo   Spine.js   Javascript MVC   „„   什么都不用
REFERENCE     http://underscorejs.org/     http://backbonejs.org/     http://seajs.org/     http://zeptojs.com/     h...
PART3   WEB   && APP
BRIDGE === ???
WEBVIEW     SDK组件     Webkit内核     设备差异      • Android WebView      • iOS UIWebView     API:WebView         JavaScirpt
ANDROID          JavaScript调用native方          法
ANDROID          Native调用JavaScript方          法
IOS  iOS SDK没有原生提供JavaScript调用  native代码的API,只有反向调用的方法 —  —  stringByEvaluatingJavaScriptFromString
PHONEGAP
PHONEGAP  JavaScript通知native的方法是収起一次特  殊的网络请求;native 可以截获到webview  的所有请求
PHONEGAP           特殊请求 —— iframe
更为简单直接的方法  直接修改当前页面的location
有利就有弊利: 代码简洁 平台通用(android/iOS)弊: 如果需要连续调用2次native,就会连续2次改document.location,那么在native的delegate方法中,只能截获后一次请求 调试困难(URL加特殊...
WEB页面嵌入客户端    webview直接调取线上页面    将web静态页面打包到客户端中
线上页面直接调取利: 在服务器端实现“响应式” 版本更新不依赖于客户端 即时响应用户需求,加快bug修复速度 不影响客户端大小弊: 受限于网络 速度/性能
打包到应用中利: 无网络请求,响应速度接近于native应用 性能提升(iscroll) 可以利用本地资源(图片)弊: 更新困难 增加客户端包容量
手机彩票
手机客户端
定制版iPad竞彩足球
PART4   速度、性能
速度
移动通信网络传输速度2G             2.5G• GSM:9.6k/s   • GPRS:115k/s               • HSCSD:57.6k/s               • EDGE:384k/s3G     ...
网络传输内容  小,小,小  , „„
怎么做   尽可能优化html/JavaScript/CSS代码    • 优化是一种心态    • 可维护性   减少白屏时间    • 尽早显示loading (与OPOA的矛盾)    • 减少DOM数量和深度    • 延迟渲染 ...
CACHE
什么是我们可以做的   无法避免的    • 首次加载    • 数据更新    • 版本更新   可以做的    • 减少重复资源的下载    • 版本管理和升级    • 不必要的数据请求
三大利器浏览器缓存   localStorage applicationCache
浏览器缓存
利: 无需编程 可缓存所有资源文件弊:             浏览器缓存 重启会丢失(iOs) 无法控制读取逻辑
applicationCache
applicationCache在html标签中增加manifest属性
content-type为text/cache-manifest设置服务器支持
第一行必须为CACHE MANIFEST不能有空行或空栺
#开头为注释 (author/version/„„)版本管理,方便更新和维护
CACHE 为要缓存的文件
必须为具体的文件名,不支持通配符不能包含hash/query可以添加ETag/Last-Modified每行一个文件
网络白名单可以为*/文件夹/域名/具体地址
可选,资源获取失败时候补方案每行分别指定在线和离线时使用的文件
怎么工作呢                  NoUpdateChecking                               Progress                   Downloading         Progr...
手动更新swapCache()后并不会马上载入新的资源,而是  在下次加载时才载入,可以通过刷新页面来  载入新下载的资源
ATTENTION   定义了manifest文件后,所有网络请求都会经过该配置,如    果没有设置缓存,也没有在白名单里配置,则访问不到资源    文件   如果manifest文件或者其内部列举的某一个文件不能正常下    载,整个更...
localStorage
localStorage存储数据和配置文件 setItem(key , value) getItem(key) removeItem(key)
性能
型号               CPU          RAM           iPhone 4S     双核A5 800MHZ      512M iOS       iPhone 4        A4 800MHZ      5...
iPhone 3GS                                         其他 5%                    iPhone                                        ...
问题 低端设备众多,受硬件限制 简化的浏览器实现 复杂的业务逻辑/单页应用 容易造成体验瓶颈
性能优化   JavaScript代码效率  iScroll  CSS3动画/gif动画
JavaScript代码效率  让server返回处理好的数据,避免  client端无谓的数据运算和判断  避免滚动时监听事件(touchmove)  减少DOM操作(插入/删除/改变样式)  减少Reflow和Repaint
为什么需要iScroll
APP UI:固定顶/底栏   position: fixed       ios 5.0以上/android 2.3以上支持   overflow: scroll       ios 5 Beta 2中支持   iScroll
iScroll                  原生iScroll滚动与原生滚动的性能比较
KO           比较卡很流畅        甚至会出           现假死
换一种思路 顶栏webview                          拆分webview    内容                          顶栏/底栏固定高度  webview                 内容...
CSS3/GIF   android下对性能影响较大   2D动画使用transition/animation   启用硬件加速   GIF动画非常吃内存,尽量不用
PART5        WEBVIEW
ANDROID   使用许可    在AndroidManifest.xml中使用许可    “android.permission.INTERNET”   启用JavaScript    Webview.getSettings().set...
ANDROID   在webview中响应链接       如果希望当前页面链接点击后继续在当前    browser中响应,而不是新开Android的系统browser    中响应,必须覆盖webview的WebViewClient对象:
ANDROID   处理默认的后退事件        在webview中浏览页面时,点击系统“Back”    键,整个Browser会调用finish()结束自身。如果希    望浏览的网页回退而不是退出浏览器,需要在当前    Activ...
ANDROID   屏幕右侧白条      在android浏览器中打开一个网页,会在右侧出    现一个细小的白条。      android:scrollbarSize="0dip"
ANDROID/IOS   关闭栺式检查      在android和iOs中,连续的数字会被检测为电话    号码,默认显示为链接的样式。在android中,还会    自动检查邮箱栺式。可以通过meta属性关闭。     如果需要使用表示...
IOS BUG  在iOs5 以下的系统中,meta设置会时灵时不灵,需要在webview设置中关闭栺式检查:
ANDROID/IOS屏幕旋转检查事件 •   android:window.resize •   iOS:onorientationchange •   该事件无法阻止(web app)
高清图片960*640 的设计原型            VS   480*320的真实显示    •   iPhone4分辨率:960*640 (326DPI)    •   iPhone4 safari分辨率:480*320(163DPI)...
CSS MEDIA QUERYEx:logo图片尺寸为160*80,页面显示为80*401 在CSS中设置logo显示为width:80px;height:40px;2   在iphone4中,iOs4 支持 -webkit-min-devic...
PART6        调试
WEINRE  http://people.apache.org/~pmuellr/weinre/docs/latest/Home.ht  ml
WEINRE (JAVA/NODEJS)    安装    启动服务    注入代码    开始调试
WEINRE (JAVA/NODEJS)    安装    启动服务      只能调试样式,无法    注入代码      跟踪JavaScript代码    开始调试
JSCONSOLE       http://jsconsole.com/remote-debugging.html
JSCONSOLE     基于浏览器的命令行,简单易入手     跟踪JavaScript代码,记录console日志     产生异常时能够提供简单的错误信息     原理:      •   注入代码生成 iframe      ...
WEBVIEW CONSOLE API(ANDROID)     console.log(String)     console.info(String)     console.warn(String)     console.err...
IWEBINSPECTOR    (FOR MAC)          http://www.iwebinspector.com/
MORE    Mobile Perf bookmarklet    Yslow Mobile    PageSpeed Insights    ICY    Remote Debugging for Mobile Safari  ...
“New open standardscreated in the mobileera, such as HTML5, willwin on mobile devices.”                 Steve Jobs   April...
Q & A
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
Upcoming SlideShare
Loading in …5
×

淘宝彩票移动项目开发实践

5,077 views

Published on

  • Follow the link, new dating source: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

淘宝彩票移动项目开发实践

  1. 1. 淘宝彩票移动项目开収实践函谷淘宝北京研収中心
  2. 2. AGENDA 1. 无所不能的 web 2. JavaScript 技术选型 3. web && app 4. 速度和性能 5. 不得不了解的 webview 6. 调试
  3. 3. PART1 无所不能的WEB
  4. 4. 移动终端飞速収展/业务需求
  5. 5. 我们的目标 一套项目代码 多个应用场景 用户体验 可以快速响应用户需求
  6. 6. 三大武器 —— HTML5
  7. 7. 三大武器 —— 响应式设计 平台选择 Media Query 文字排版 流体布局 „„ 响应式设计小组
  8. 8. 三大武器 —— MVC
  9. 9. PART2 JavaScript 技术选 型
  10. 10. OPOA —— 用MVC理念开収前端应用 后端不处理任何涉及外观和交互的逻辑, 只提供完整的数据接口,更加专注于优秀的 数据结构设计 前端不再是依附于后端视图的脚本,而是 包含完整的业务需求的应用程序。可以根据 不同的场景做不同的处理,灵活多变。
  11. 11. E.G:彩票订单
  12. 12. E.G:彩票订单
  13. 13. THE MODULES WE NEED  基础库  历史管理  区域滚动  数据模板  动画
  14. 14. YUI 是万能的  基础方法:Node/Event/Dom  模块管理:Loader  异步:IO/Jsonp  MVC框架:Framework  历史管理:History  动画:Anim  模拟滚动:Scrollview  数据模板:Substitute  „„
  15. 15. BUT
  16. 16. YUI 不是万能的 模块方法利用率低,文件体积大 20k(逻辑文件大小)/80k(总大小) 部分模块性能有待改迚 缺少对一些移动端特有事件的支持
  17. 17. 对于移动终端,YUI太重了!
  18. 18. 我们目前的选择
  19. 19. zepto 专为mobile webkit浏览器开収  使用jQuery API  支持了一些特有的触屏事件,如 tap/singleTap/longTap/swipe等  8.7kiScroll  解决移动浏览器的区域滚动问题  6.8k
  20. 20. backbone  MVC框架,实现模块分层  5.7kUnderscore 常用基础方法和 JavaScript模板  4.1kseaJS  模块组织和管理,打包上线(spm)  6.8k
  21. 21. 系统架构
  22. 22. 速度和性能的提升 89k VS 44.6k
  23. 23. 你还有其他的选择 jQuery Mobile DHTMLX Touch Titanium Mobile Jo Spine.js Javascript MVC „„ 什么都不用
  24. 24. REFERENCE  http://underscorejs.org/  http://backbonejs.org/  http://seajs.org/  http://zeptojs.com/  http://cubiq.org/iscroll-4  http://www.dhtmlx.com/touch/  http://juicer.name/
  25. 25. PART3 WEB && APP
  26. 26. BRIDGE === ???
  27. 27. WEBVIEW  SDK组件  Webkit内核  设备差异 • Android WebView • iOS UIWebView  API:WebView JavaScirpt
  28. 28. ANDROID JavaScript调用native方 法
  29. 29. ANDROID Native调用JavaScript方 法
  30. 30. IOS iOS SDK没有原生提供JavaScript调用 native代码的API,只有反向调用的方法 — — stringByEvaluatingJavaScriptFromString
  31. 31. PHONEGAP
  32. 32. PHONEGAP JavaScript通知native的方法是収起一次特 殊的网络请求;native 可以截获到webview 的所有请求
  33. 33. PHONEGAP 特殊请求 —— iframe
  34. 34. 更为简单直接的方法 直接修改当前页面的location
  35. 35. 有利就有弊利: 代码简洁 平台通用(android/iOS)弊: 如果需要连续调用2次native,就会连续2次改document.location,那么在native的delegate方法中,只能截获后一次请求 调试困难(URL加特殊标识)
  36. 36. WEB页面嵌入客户端  webview直接调取线上页面  将web静态页面打包到客户端中
  37. 37. 线上页面直接调取利: 在服务器端实现“响应式” 版本更新不依赖于客户端 即时响应用户需求,加快bug修复速度 不影响客户端大小弊: 受限于网络 速度/性能
  38. 38. 打包到应用中利: 无网络请求,响应速度接近于native应用 性能提升(iscroll) 可以利用本地资源(图片)弊: 更新困难 增加客户端包容量
  39. 39. 手机彩票
  40. 40. 手机客户端
  41. 41. 定制版iPad竞彩足球
  42. 42. PART4 速度、性能
  43. 43. 速度
  44. 44. 移动通信网络传输速度2G 2.5G• GSM:9.6k/s • GPRS:115k/s • HSCSD:57.6k/s • EDGE:384k/s3G 4G• 室内:2M/s • 下载:100M/s• 室外:384k/s • 上传:20M/s• 行车:144k/s
  45. 45. 网络传输内容 小,小,小 , „„
  46. 46. 怎么做 尽可能优化html/JavaScript/CSS代码 • 优化是一种心态 • 可维护性 减少白屏时间 • 尽早显示loading (与OPOA的矛盾) • 减少DOM数量和深度 • 延迟渲染 cache
  47. 47. CACHE
  48. 48. 什么是我们可以做的 无法避免的 • 首次加载 • 数据更新 • 版本更新 可以做的 • 减少重复资源的下载 • 版本管理和升级 • 不必要的数据请求
  49. 49. 三大利器浏览器缓存 localStorage applicationCache
  50. 50. 浏览器缓存
  51. 51. 利: 无需编程 可缓存所有资源文件弊: 浏览器缓存 重启会丢失(iOs) 无法控制读取逻辑
  52. 52. applicationCache
  53. 53. applicationCache在html标签中增加manifest属性
  54. 54. content-type为text/cache-manifest设置服务器支持
  55. 55. 第一行必须为CACHE MANIFEST不能有空行或空栺
  56. 56. #开头为注释 (author/version/„„)版本管理,方便更新和维护
  57. 57. CACHE 为要缓存的文件
  58. 58. 必须为具体的文件名,不支持通配符不能包含hash/query可以添加ETag/Last-Modified每行一个文件
  59. 59. 网络白名单可以为*/文件夹/域名/具体地址
  60. 60. 可选,资源获取失败时候补方案每行分别指定在线和离线时使用的文件
  61. 61. 怎么工作呢 NoUpdateChecking Progress Downloading Progress Updateready Progress swapCache http://www.slideshare.net/gzterrytan/ss-7567665
  62. 62. 手动更新swapCache()后并不会马上载入新的资源,而是 在下次加载时才载入,可以通过刷新页面来 载入新下载的资源
  63. 63. ATTENTION 定义了manifest文件后,所有网络请求都会经过该配置,如 果没有设置缓存,也没有在白名单里配置,则访问不到资源 文件 如果manifest文件或者其内部列举的某一个文件不能正常下 载,整个更新过程将视为失败,浏览器继续全部使用老的缓 存 引用manifest的html必须与manifest文件同源,在同一个域 下 在manifest中使用的相对路径,相对参照物为manifest文件 FALLBACK中的资源必须和manifest文件同源 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会 访问缓存中的资源。 站点中的其他页面即使没有设置manifest属性,请求的资源 如果在缓存中也从缓存中访问
  64. 64. localStorage
  65. 65. localStorage存储数据和配置文件 setItem(key , value) getItem(key) removeItem(key)
  66. 66. 性能
  67. 67. 型号 CPU RAM iPhone 4S 双核A5 800MHZ 512M iOS iPhone 4 A4 800MHZ 512M iPhone 3GS S5PC100 600MHZ 256M Glaxy Note Exynos 双核 1.4GHZ 1G Nexus One 高通 1GHZ 512MAndroid MOTO XT615 高通 800MHZ 512M HTC Legend 高通 600MHZ 384M 常见移动设备硬件情况
  68. 68. iPhone 3GS 其他 5% iPhone 12% 4S 1GHZ以 29% 600MHZ 上 19% 45% iPhone4 800MHZ 66% 24% iOs Andriod 手机淘宝2012-4月数据
  69. 69. 问题 低端设备众多,受硬件限制 简化的浏览器实现 复杂的业务逻辑/单页应用 容易造成体验瓶颈
  70. 70. 性能优化  JavaScript代码效率  iScroll  CSS3动画/gif动画
  71. 71. JavaScript代码效率  让server返回处理好的数据,避免 client端无谓的数据运算和判断  避免滚动时监听事件(touchmove)  减少DOM操作(插入/删除/改变样式)  减少Reflow和Repaint
  72. 72. 为什么需要iScroll
  73. 73. APP UI:固定顶/底栏 position: fixed ios 5.0以上/android 2.3以上支持 overflow: scroll ios 5 Beta 2中支持 iScroll
  74. 74. iScroll 原生iScroll滚动与原生滚动的性能比较
  75. 75. KO 比较卡很流畅 甚至会出 现假死
  76. 76. 换一种思路 顶栏webview  拆分webview 内容  顶栏/底栏固定高度 webview  内容区域原生滚动 底栏webview http://www.slideshare.net/yangdj/web-app-10712402
  77. 77. CSS3/GIF android下对性能影响较大 2D动画使用transition/animation 启用硬件加速 GIF动画非常吃内存,尽量不用
  78. 78. PART5 WEBVIEW
  79. 79. ANDROID 使用许可 在AndroidManifest.xml中使用许可 “android.permission.INTERNET” 启用JavaScript Webview.getSettings().setJavaScriptEnabled(tru e); 启用localStorage Webview.getSettings().setDomStorageEnabled(tru e);
  80. 80. ANDROID 在webview中响应链接 如果希望当前页面链接点击后继续在当前 browser中响应,而不是新开Android的系统browser 中响应,必须覆盖webview的WebViewClient对象:
  81. 81. ANDROID 处理默认的后退事件 在webview中浏览页面时,点击系统“Back” 键,整个Browser会调用finish()结束自身。如果希 望浏览的网页回退而不是退出浏览器,需要在当前 Activity中处理掉该Back事件。
  82. 82. ANDROID 屏幕右侧白条 在android浏览器中打开一个网页,会在右侧出 现一个细小的白条。 android:scrollbarSize="0dip"
  83. 83. ANDROID/IOS 关闭栺式检查 在android和iOs中,连续的数字会被检测为电话 号码,默认显示为链接的样式。在android中,还会 自动检查邮箱栺式。可以通过meta属性关闭。 如果需要使用表示电话或邮箱的链接:
  84. 84. IOS BUG 在iOs5 以下的系统中,meta设置会时灵时不灵,需要在webview设置中关闭栺式检查:
  85. 85. ANDROID/IOS屏幕旋转检查事件 • android:window.resize • iOS:onorientationchange • 该事件无法阻止(web app)
  86. 86. 高清图片960*640 的设计原型 VS 480*320的真实显示 • iPhone4分辨率:960*640 (326DPI) • iPhone4 safari分辨率:480*320(163DPI) CSS: background-size: 480px 320px; CSS Media Query:iOs 4/android 2.2 -webkit-min-device-pixel-ratio
  87. 87. CSS MEDIA QUERYEx:logo图片尺寸为160*80,页面显示为80*401 在CSS中设置logo显示为width:80px;height:40px;2 在iphone4中,iOs4 支持 -webkit-min-device- pixel-ratio 属性,所以图片会以2倍分辨率显示高 清原图 http://qiqicartoon.com/?p=948
  88. 88. PART6 调试
  89. 89. WEINRE http://people.apache.org/~pmuellr/weinre/docs/latest/Home.ht ml
  90. 90. WEINRE (JAVA/NODEJS)  安装  启动服务  注入代码  开始调试
  91. 91. WEINRE (JAVA/NODEJS)  安装  启动服务 只能调试样式,无法  注入代码 跟踪JavaScript代码  开始调试
  92. 92. JSCONSOLE http://jsconsole.com/remote-debugging.html
  93. 93. JSCONSOLE  基于浏览器的命令行,简单易入手  跟踪JavaScript代码,记录console日志  产生异常时能够提供简单的错误信息  原理: • 注入代码生成 iframe • 截获页面console请求(重写方法) • 収送console相关信息到 server • server 页面做出响应
  94. 94. WEBVIEW CONSOLE API(ANDROID)  console.log(String)  console.info(String)  console.warn(String)  console.error(String) http://android.stackexchange.com/questions/5999/android- browsers-aboutdebug-what-do-those-settings-do
  95. 95. IWEBINSPECTOR (FOR MAC) http://www.iwebinspector.com/
  96. 96. MORE  Mobile Perf bookmarklet  Yslow Mobile  PageSpeed Insights  ICY  Remote Debugging for Mobile Safari  Adobe Shadow  JSPerf  SunSpider  Mobile Browser Concurrency Test
  97. 97. “New open standardscreated in the mobileera, such as HTML5, willwin on mobile devices.” Steve Jobs April, 2010
  98. 98. Q & A

×