SlideShare a Scribd company logo
淘宝彩票移动项目
开収实践


函谷
淘宝北京研収中心
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
    模拟滚动:Scrollview
    数据模板:Substitute
     „„
BUT
YUI 不是万能的
   模块方法利用率低,文件体积大
      20k(逻辑文件大小)/80k(总大小)
   部分模块性能有待改迚
   缺少对一些移动端特有事件的支持
对于移动终端,YUI太重了!
我们目前的选择
zepto
   专为mobile webkit浏览器开収

    使用jQuery API

    支持了一些特有的触屏事件,如
   tap/singleTap/longTap/swipe等
    8.7k



iScroll
    解决移动浏览器的区域滚动问题

    6.8k
backbone
    MVC框架,实现模块分层

    5.7k



Underscore
   常用基础方法和 JavaScript模板

    4.1k



seaJS
    模块组织和管理,打包上线(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/
     http://cubiq.org/iscroll-4
     http://www.dhtmlx.com/touch/
     http://juicer.name/
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/s


3G             4G
• 室内:2M/s      • 下载:100M/s
• 室外:384k/s    • 上传:20M/s
• 行车:144k/s
网络传输内容


  小,小,小  , „„
怎么做
   尽可能优化html/JavaScript/CSS代码
    • 优化是一种心态

    • 可维护性

   减少白屏时间
    • 尽早显示loading (与OPOA的矛盾)

    • 减少DOM数量和深度

    • 延迟渲染


    cache
CACHE
什么是我们可以做的
   无法避免的
    • 首次加载

    • 数据更新

    • 版本更新

   可以做的
    • 减少重复资源的下载

    • 版本管理和升级

    • 不必要的数据请求
三大利器




浏览器缓存   localStorage applicationCache
浏览器缓存
利:
 无需编程

 可缓存所有资源文件



弊:             浏览器缓存
 重启会丢失(iOs)

 无法控制读取逻辑
applicationCache
applicationCache




在html标签中增加manifest属性
content-type为text/cache-manifest
设置服务器支持
第一行必须为CACHE MANIFEST
不能有空行或空栺
#开头为注释
 (author/version/„„)
版本管理,方便更新和维护
CACHE 为要缓存的文件
必须为具体的文件名,不支持通配符
不能包含hash/query
可以添加ETag/Last-Modified
每行一个文件
网络白名单
可以为*/文件夹/域名/具体地址
可选,资源获取失败时候补方案
每行分别指定在线和离线时使用的文件
怎么工作呢

                  NoUpdate


Checking                               Progress


                   Downloading         Progress        Updateready


                                       Progress
                                                        swapCache



           http://www.slideshare.net/gzterrytan/ss-7567665
手动更新




swapCache()后并不会马上载入新的资源,而是
  在下次加载时才载入,可以通过刷新页面来
  载入新下载的资源
ATTENTION
   定义了manifest文件后,所有网络请求都会经过该配置,如
    果没有设置缓存,也没有在白名单里配置,则访问不到资源
    文件
   如果manifest文件或者其内部列举的某一个文件不能正常下
    载,整个更新过程将视为失败,浏览器继续全部使用老的缓
    存
   引用manifest的html必须与manifest文件同源,在同一个域
    下
   在manifest中使用的相对路径,相对参照物为manifest文件
   FALLBACK中的资源必须和manifest文件同源
   当一个资源被缓存后,该浏览器直接请求这个绝对路径也会
    访问缓存中的资源。
   站点中的其他页面即使没有设置manifest属性,请求的资源
    如果在缓存中也从缓存中访问
localStorage
localStorage



存储数据和配置文件
 setItem(key , value)
 getItem(key)
 removeItem(key)
性能
型号               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        512M
Android
          MOTO XT615      高通 800MHZ       512M

          HTC Legend      高通 600MHZ       384M



          常见移动设备硬件情况
iPhone
 3GS
                                         其他
 5%                    iPhone
                                         12%
                        4S
                                                1GHZ以
                        29%     600MHZ
                                                 上
                                 19%
                                                 45%

       iPhone4
                                       800MHZ
         66%
                                         24%




                 iOs                   Andriod

                 手机淘宝2012-4月数据
问题

 低端设备众多,受硬件限制
 简化的浏览器实现

 复杂的业务逻辑/单页应用

 容易造成体验瓶颈
性能优化

   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                 内容区域原生滚动


 底栏webview

  http://www.slideshare.net/yangdj/web-app-10712402
CSS3/GIF
   android下对性能影响较大
   2D动画使用transition/animation
   启用硬件加速
   GIF动画非常吃内存,尽量不用
PART5

        WEBVIEW
ANDROID
   使用许可
    在AndroidManifest.xml中使用许可
    “android.permission.INTERNET”


   启用JavaScript
    Webview.getSettings().setJavaScriptEnabled(tru
    e);


   启用localStorage
    Webview.getSettings().setDomStorageEnabled(tru
    e);
ANDROID

   在webview中响应链接
       如果希望当前页面链接点击后继续在当前
    browser中响应,而不是新开Android的系统browser
    中响应,必须覆盖webview的WebViewClient对象:
ANDROID

   处理默认的后退事件
        在webview中浏览页面时,点击系统“Back”
    键,整个Browser会调用finish()结束自身。如果希
    望浏览的网页回退而不是退出浏览器,需要在当前
    Activity中处理掉该Back事件。
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:
    background-size: 480px 320px;
   CSS Media Query:iOs 4/android 2.2
    -webkit-min-device-pixel-ratio
CSS MEDIA QUERY



Ex:logo图片尺寸为160*80,页面显示为80*40

1 在CSS中设置logo显示为width:80px;height:40px;
2   在iphone4中,iOs4 支持 -webkit-min-device-
  pixel-ratio 属性,所以图片会以2倍分辨率显示高
  清原图

         http://qiqicartoon.com/?p=948
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
      •   截获页面console请求(重写方法)
      •   収送console相关信息到 server
      •   server 页面做出响应
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
IWEBINSPECTOR    (FOR MAC)




          http://www.iwebinspector.com/
MORE
    Mobile Perf bookmarklet

    Yslow Mobile

    PageSpeed Insights

    ICY

    Remote Debugging for Mobile Safari

    Adobe Shadow

    JSPerf

    SunSpider

    Mobile Browser Concurrency Test
“New open standards
created in the mobile
era, such as HTML5, will
win on mobile devices.”

                 Steve Jobs

   April, 2010
Q & A

More Related Content

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

IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
 
Html5
Html5Html5
Html5
cazhfe
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAE
q3boy
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
Wei Sun
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
My own sweet home!
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
 
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
Great Wall Club
 
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局   long20141212 html5 及微軟跨平台佈局   long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
 
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
 
About web app development. Intro to basic web app development .pdf
About web app development. Intro to basic web app development .pdfAbout web app development. Intro to basic web app development .pdf
About web app development. Intro to basic web app development .pdf
eddy0919
 
淡江大學 - ios+android+html5(javascript)
淡江大學 - ios+android+html5(javascript)淡江大學 - ios+android+html5(javascript)
淡江大學 - ios+android+html5(javascript)
Taien Wang
 
Using google appengine_1027
Using google appengine_1027Using google appengine_1027
Using google appengine_1027
Wei Sun
 
拆分初始化负载
拆分初始化负载拆分初始化负载
拆分初始化负载
kaven yan
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
 
ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能
Edward Kuo
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算
xiaotao ning
 
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
lydiafly
 

Similar to 淘宝彩票移动项目开发实践 (20)

IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
 
Html5
Html5Html5
Html5
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAE
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
GMIC 2012 - Baidu, Presentation by Mr Wang Jin, 百度副总裁王劲
 
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局   long20141212 html5 及微軟跨平台佈局   long
20141212 html5 及微軟跨平台佈局 long
 
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
 
About web app development. Intro to basic web app development .pdf
About web app development. Intro to basic web app development .pdfAbout web app development. Intro to basic web app development .pdf
About web app development. Intro to basic web app development .pdf
 
淡江大學 - ios+android+html5(javascript)
淡江大學 - ios+android+html5(javascript)淡江大學 - ios+android+html5(javascript)
淡江大學 - ios+android+html5(javascript)
 
Using google appengine_1027
Using google appengine_1027Using google appengine_1027
Using google appengine_1027
 
拆分初始化负载
拆分初始化负载拆分初始化负载
拆分初始化负载
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算
 
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 

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