• 1. 无线淘宝Android客户端架构组件化 +Web Plus无线开发 陶钧 taojun@taobao.com
  • 2. 淘宝无线客户端Android
  • 3. 挑战淘宝本身的业务丰富,品种繁多; 比如: 聚划算,彩票,口碑,机票,直充 等等; 业务变化快,可运营特性要求快速上线;如何应对?基于组件模型 进行业务开发 Web Plus
  • 4. 基于组件的应用框架层每个组件包含了具体页面,业务功能以及数据,以一个整体模块的形式存在 。 保障并行开发:熟悉业务的开发者分别进行各自业务的开发,减少协作和沟通; 重用:提供公共的基础组件和SDKs降低开发成本,如 淘宝无线安全登录组件; 业务流程开发更简单 组件设计要求不改变Android开发者熟悉的编程习惯,可以直接使用Activity和Handler 等;
  • 5. 组件模型组件之间通信通过 Comp Proxy 组件可以直接使用View 和Layout; 组件与OS事件的通信不受影响
  • 6. 组件模型的核心 Comp Proxy 组件的Capability 注册和管理 管理组件的生命周期 组件间通信 维护组件的状态(Active) SDK and View Controls 在业务开发中,不断积累下来的通用SDK和View
  • 7. 聚划算 业务流开发功能性组件重用,大大减少了业务流开发和调试工作量
  • 8. 组件通信App Engine 与组件之间的通信必须通过组件的接口完成 来自OS或者App Engine的事件通过组件的接口传递给组件; 组件之间的通信:Comp Service Protocol 通过注册,请求,响应Service,去掉组件之间的物理依赖; 每个组件提供的功能并定义为Service 组件与OS之间的通信不受任何限制 组件可以直接调用任何系统API; 组件可以直接调用任何SDK的接口;
  • 9. SDKs and View Controls对淘宝业务开发,你一定需要一个Image Downloader; 手机上内存有限,你要小心地使用图片缓存,无论是你还是其他开发者不加控制地使用缓存或图片缓存,对整个应用来说都是一个悲剧; 我们希望你将业务数据封装成标准数据源后,就能直接按四宫格显示在界面上;翻页,异步加载图片,缓存,预取,性能优化这些都交给我们;
  • 10. 完整测试,性能优化,标准化降低开发成本,业务开发提速; 保证核心功能的稳定性; 保持应用程序不至于被各种风格的代码撑爆;
  • 11. Comp Architecture
  • 12. Cache轻量级的本地缓存 based on heap,file system 在新版本上线前,检测Memory Footprint,评估内存使用的质量; Image Pool图片缓存 将图片转换成字节流,突破 Android bitmap heap的限制; 图片内存溢出时,自动处理;
  • 13. Data Provider,Source,ListData Provider 封装了对超大数据的网络获取,动态存储,翻页展现等功能;比如,搜索结果列表界面中的宝贝列表; Data Source 是具体业务数据的协议封装; 开发者实现自己的Data Source,就可以通过Data Provider + List 创建出大数据量优化过的界面和逻辑;
  • 14. Why Web Plus?线上快速部署的能力 Real Case: 淘宝运营 推出新的线上优惠,购买商城商品,送商城积分 有些业务用Web Plus, 体验和Native差别不大 Real Case: 淘宝旺旺 HTML5版 没有足够的Client 开发资源
  • 15. Web Plus Sample Native Layout contain one webview layout;
  • 16. TBWebViewWebview just a html rendering engine TBWebView 基于业务对 WebView 进行了优化 优化:访问速度,业务缓存,交互体验
  • 17. 2G 网络,淘宝Android客户端详情Web Plus页面 速度统计主要的时间消耗在图片等资源的加载过程中,这些图片主要包括详情也中的正品、7天包换、信用、load菊花以及css中的一些背景及旺旺图片 这些资源大概消耗了15-20k的流量,占用10-14s时间。  HTML下载时间DOM加载消耗时间图片 SKU资源加载时间总加载时间网络: HTML,宝贝图片,Res IMG 本地: JS,CSS2.6630.22316.83619.722网络: HTML,宝贝图片 本地: JS,CSS,Res IMG2.3620.2242.895.476网络: 宝贝图片, Data(in JSON format) 本地: HTML,JS,CSS,Res IMG1.6030.2351.513.348
  • 18. Key notes for speed Statistic resource(JS, CSS), Resource images should be cached;   The proper image size which is related to device screen is also the key. 业务缓存webview 内部有自己的资源缓存 开发者可以结合业务需要,通过view mgr + cache 定制特殊的 业务缓存;
  • 19. TBWebview PackageRes Mgr: HTML中所有静态资源都将被Res Mgr记录,并放入缓存;Res Mgr负责完成资源更新检查; View Mgr用于记录页面访问轨迹,可以根据业务需要,定制返回和跳转逻辑; 比如,用户在订单跳支付页面中出现网络超时,程序可以自动跳转订单列表界面
  • 20. 行业内的Webkit 应用Android,IOS上优秀应用,也都利用了webkit 来提供更丰富的功能,例如: flipboard@ipad, Sina weibo @android 浏览器对HTML5 的支持越来越好,Web App也可以更加遍历的访问Native功能 HTML5 Cache Support on Mobile coming soon HP(originally Palm) WebOS v3.0 Nokia Web Tools 1.2 support Series 40 and Symbian web apps Third party solution: Sencha, jQTouch etc
  • 21. 未来Webcore应用框架1Web App会成为应用框架的一个重要组成部分,并且完美的和Native Application 嫁接 一个应用广泛的框架:所有系统都存在的Multimedia Framework(DShow,Gstream etc) 高度灵活,可定制化,跨平台(名字一定不一样)
  • 22. 未来 Webcore应用框架2Webcore 应用框架会由 引擎层+应用层 组成 应用层提供更方便的使用接口,本地缓存,资源更新模块; 引擎层即webcore,承载数据流; OS厂商应该以框架的形式开放webcore,应用软件商可以根据业务需要使用私有协议,个性化技术和业务优化;
  • 23. Q&AFor taobao Client Download: http://msoft.taobao.com/ For discussion 旺旺:陶钧 Mail:taojun@taobao.com Sina weibo:steveyzhang