无线淘宝 Android 客户端架构

组件化 +Web Plus

无线开发 陶钧taojun@taobao.com

淘宝无线客户端 Android•

挑战•淘宝本身的业务丰富，品种繁多；

比如： 聚划算，彩票，口碑，机票，直充 等等；

•业务变化快，可运营特性要求快速上线；

如何应对？•基于组件模型 进行业务开发•Web Plus

基于组件的应用框架层•每个组件包含了具体页面，业务功能以及数据，以一个整体模块的形式存在 。

•保障并行开发：熟悉业务的开发者分别进行各自业务的开发，减少协作和沟通；

•重用：提供公共的基础组件和 SDKs 降低开发成本，如 淘宝无线安全登录组件；

•业务流程开发更简单

•组件设计要求不改变 Android 开发者熟悉的编程习惯，可以直接使用 Activity 和 Handler 等；

组件模型

组件之间通信通过 Comp Proxy

•组件可以直接使用View 和 Layout ；

组件与 OS 事件的通信不受影响

组件模型的核心

•Comp Proxy• 组件的 Capability 注册和管理• 管理组件的生命周期• 组件间通信• 维护组件的状态（ Active ）

•SDK and View Controls• 在业务开发中，不断积累下来的通用 SDK 和

View

聚划算 业务流开发•功能性组件重用，大大减少了业务流开发和调试工作量

组件通信

• App Engine 与组件之间的通信必须通过组件的接口完成• 来自 OS 或者 App Engine 的事件通过组件的接口传递给组件；

• 组件之间的通信： Comp Service Protocol• 通过注册，请求，响应 Service ，去掉组件之间的物理依赖；• 每个组件提供的功能并定义为 Service

•组件与 OS 之间的通信不受任何限制• 组件可以直接调用任何系统 API ；• 组件可以直接调用任何 SDK 的接口；

SDKs and View Controls•对淘宝业务开发，你一定需要一个 Image Downloader ；

•手机上内存有限，你要小心地使用图片缓存，无论是你还是其他开发者不加控制地使用缓存或图片缓存，对整个应用来说都是一个悲剧；

•我们希望你将业务数据封装成标准数据源后，就能直接按四宫格显示在界面上；翻页，异步加载图片，缓存，预取，性能优化这些都交给我们；

完整测试，性能优化，标准化

•降低开发成本，业务开发提速；•保证核心功能的稳定性；•保持应用程序不至于被各种风格的代码撑爆；

Comp Architecture

Cache•轻量级的本地缓存 based on heap ， file system

•在新版本上线前，检测 Memory Footprint ，评估内存使用的质量；

Image Pool•图片缓存

•将图片转换成字节流，突破 Android bitmap heap 的限制；

•图片内存溢出时，自动处理；

Data Provider ， Source ， List

•Data Provider 封装了对超大数据的网络获取，动态存储，翻页展现等功能；比如，搜索结果列表界面中的宝贝列表；

•Data Source 是具体业务数据的协议封装；

•开发者实现自己的 Data Source ，就可以通过 Data Provider + List 创建出大数据量优化过的界面和逻辑；

Why Web Plus ？•线上快速部署的能力

• Real Case: 淘宝运营 推出新的线上优惠，购买商城商品，送商城积分

•有些业务用 Web Plus, 体验和 Native差别不大• Real Case: 淘宝旺旺 HTML5 版

•没有足够的 Client 开发资源

Web Plus Sample

•Native Layout contain onewebview layout ；

TBWebView

•Webview just a html rendering engine

•TBWebView 基于业务对 WebView 进行了优化

•优化：访问速度，业务缓存，交互体验

2G 网络，淘宝 Android 客户端详情Web Plus 页面 速度统计

•主要的时间消耗在图片等资源的加载过程中，这些图片主要包括详情也中的正品、 7天包换、信用、 load菊花以及 css 中的一些背景及旺旺图片

•这些资源大概消耗了 15-20k 的流量，占用 10-14s时间。

　 HTML 下载时间DOM 加载消耗时间

图片 SKU 资源加载时间

总加载时间

网络 : HTML, 宝贝图片， Res IMG本地 : JS ， CSS

2.663 0.223 16.836 19.722

网络 : HTML ，宝贝图片本地 : JS ， CSS ， Res IMG

2.362 0.224 2.89 5.476

网络 : 宝贝图片 , Data(in JSON format)本地 :

HTML ， JS ， CSS ， Res IMG

1.603 0.235 1.51 3.348

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 定制特殊的 业务缓存；

TBWebview Package

•Res Mgr: HTML 中所有静态资源都将被 Res Mgr记录，并放入缓存； Res Mgr负责完成资源更新检查；

•View Mgr 用于记录页面访问轨迹，可以根据业务需要，定制返回和跳转逻辑；• 比如，用户在订单跳支付页面中出现网络超时，程序可以

自动跳转订单列表界面

行业内的 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

未来 Webcore 应用框架 1

•Web App会成为应用框架的一个重要组成部分，并且完美的和 Native Application 嫁接

•一个应用广泛的框架：所有系统都存在的 Multimedia Framework （ DShow ， Gstream etc ）

•高度灵活，可定制化，跨平台（名字一定不一样）

未来 Webcore 应用框架 2•Webcore 应用框架会由 引擎层+ 应用层 组成• 应用层提供更方便的使用接口，本地缓存，资源更

新模块；• 引擎层即webcore ，承载数据流；

•OS厂商应该以框架的形式开放webcore ，应用软件商可以根据业务需要使用私有协议，个性化技术和业务优化；

Q&A

•For taobao Client Download:http://msoft.taobao.com/

•For discussion旺旺：陶钧 Mail ： taojun@taobao.comSina weibo ： steveyzhang