SlideShare a Scribd company logo
1 of 34
天猫交易系统的
过去,现在和未来
  by tianqi@天猫
交易线是个神马?

•   交易包括三个部分:


•   购物篮


•   下单


•   订单详情
交易线做神马?
• 支持整站的交易行为
• 为垂直业务线作支持,例如IPAD,线下
 体验店。

• 为垂直市场特殊业务作支持,例如电器
 城家装馆服务,跨店活动优惠。
交易线的特殊性

• 业务逻辑 杂
• 价格计算必须一分不差
• 前后端耦合严重,通过接口耦合
积分换购    积分加钱购


                   货到付款


单品优惠   数量                             免邮
                 运费险    运费   店铺优惠
                                     送积分
服务                                         使用积分
数量          商品
                                           积分加钱购
                       子订单          活动优惠
            商品                             分期付款

在UI上                                活动订单
            商品
有所体                    子订单
                                           主订单
            商品
现的逻
            商品
辑                      子订单
            商品
前后端耦合
前后端耦合
普通的耦合
前后端耦合
        VM由   发维护,里面有大量后台业务逻辑,例如为了
普通的耦合   呈现某一块内容,   发书写了大量ifelse,其实这部分
前后端耦合
        VM由   发维护,里面有大量后台业务逻辑,例如为了
普通的耦合   呈现某一块内容,   发书写了大量ifelse,其实这部分




接口的耦合
前后端耦合
        VM由   发维护,里面有大量后台业务逻辑,例如为了
普通的耦合   呈现某一块内容,    发书写了大量ifelse,其实这部分




        大量使用接口,在一条整体逻辑中,前端负责一部
接口的耦合   分,    发负责一部分,二者通过接口交互,其实前端
前后端耦合
        VM由   发维护,里面有大量后台业务逻辑,例如为了
普通的耦合   呈现某一块内容,    发书写了大量ifelse,其实这部分




        大量使用接口,在一条整体逻辑中,前端负责一部
接口的耦合   分,    发负责一部分,二者通过接口交互,其实前端




逻辑的耦合
前后端耦合
        VM由   发维护,里面有大量后台业务逻辑,例如为了
普通的耦合   呈现某一块内容,    发书写了大量ifelse,其实这部分




        大量使用接口,在一条整体逻辑中,前端负责一部
接口的耦合   分,    发负责一部分,二者通过接口交互,其实前端



        大量业务逻辑堆积在前端,前端的逻辑和代码比       发
逻辑的耦合   只多不少
价格计算
以服务为例,其中一条非常小的子线

                   初始化,   发计算服务价格
                                    改变服务选择
 改变数量


        商品价格   服务单价   服务总价

 切换优惠

                      子订单价格


                      活动订单价格


                      主订单的价格
历史-里程碑

尝试独立    线上下单    购物篮



 选型     订单详情   活动优惠



摸索很痛苦    服务    代码小范围重构


家装馆下单
历史-遗留问题
历史-遗留问题
  逻辑清晰了,但是维护困难,模块化不
历史-遗留问题
过度模块化   逻辑清晰了,但是维护困难,模块化不
历史-遗留问题
过度模块化   逻辑清晰了,但是维护困难,模块化不


逻辑混乱
历史-遗留问题
过度模块化   逻辑清晰了,但是维护困难,模块化不


逻辑混乱
        至今仍然没有整理清楚所有逻辑。文档
历史-遗留问题
过度模块化    逻辑清晰了,但是维护困难,模块化不


逻辑混乱
         至今仍然没有整理清楚所有逻辑。文档


前端逻辑太多
历史-遗留问题
过度模块化    逻辑清晰了,但是维护困难,模块化不


逻辑混乱
         至今仍然没有整理清楚所有逻辑。文档


前端逻辑太多
         大量逻辑控制在前端,代码混乱,容易
历史-遗留问题
过度模块化    逻辑清晰了,但是维护困难,模块化不


 逻辑混乱
         至今仍然没有整理清楚所有逻辑。文档


前端逻辑太多
         大量逻辑控制在前端,代码混乱,容易


扩展性和性能
历史-遗留问题
过度模块化    逻辑清晰了,但是维护困难,模块化不


 逻辑混乱
         至今仍然没有整理清楚所有逻辑。文档


前端逻辑太多
         大量逻辑控制在前端,代码混乱,容易


扩展性和性能   逻辑和耦合造成扩展性较差。性能也较
现在
现在



 动手术!
前后端解耦

    前端负责展现                    发负责数据
前端维护最基本的逻辑
               初始数据                初始订单结构数据
只负责展现和交互
               数据接口               大部分特殊业务逻辑
维护一个固定的数据结构

无逻辑的前端模板
       解耦的最终目标,是前端只负责展现,而且能保存最纯洁的数据
       结构,不管如何交互,前端只   心后台需要谁的属性值,我需要
       后台返回谁的新的属性值,而不   心其中的具体逻辑。数据结构
       不会增加新的标示。
逻辑整理
项目   始之前,
 个周整理时间
效果:随意口述,说一条交互,口头算出价格




文档化,交互       系图表,特殊逻辑说明等等。

跟主线功能无联动         系的抽取,模块化。
主线逻辑耦合太深,作为整体模块,而附加功能通过独立
模块化插入主线,通过接口交互。
性能优化

去多余逻辑

去iframe    选择地址后   步刷新所有数据,本地重新   染,   少请求和服务器   染压力



逐步    染?
基本:数据+模板->基本框架-> 染到浏览器->更多数据+计算订单总价等信息->完整的dom->绑定事件
   通过接口   步更新数据后->尽量更新最小涉及范围最大需求满足的数据以及DOM。

梦想:还没想好
扩展性
代码的扩展性
主要是模块化的方式,按照功能模块化,还是视觉模块化?
将交互频繁和联系紧密的部分放在一个模块中。
但是要提供足   活的接口,根据以往项目的经验,预期未来一段时间内需要   些类型的接口


将组件抽象化
可遇见的组件:选择地址,运费和优惠的下拉框。
后续可能会做大的优化,例如自定义组件,还有ipad等平台上的特殊定制。
将组件抽象化,当做一个虚拟对象,以询问和回答的方式实现。
前端平台化?
尝试

各业务线维护自己的模板和js

但是   发提供的数据是一致的,不同的只是模板和部分
逻辑
交易的将来
• 完善文档,清晰逻辑,稳定的代码,易于维护。

• 稳定,安全,抗破坏。

• 交互   杂但性能卓越,扩展性强,更优雅的界面和交
 互效果。

• 更好支持各垂直业务,平台化,将工作量分散,提高
 效率。
THANKS

More Related Content

Similar to 天祁《交易线》

Actuate presentation 2011
Actuate presentation   2011Actuate presentation   2011
Actuate presentation 2011Luke Han
 
蔡学镛 - 深入浅出符合事件处理
蔡学镛 - 深入浅出符合事件处理蔡学镛 - 深入浅出符合事件处理
蔡学镛 - 深入浅出符合事件处理d0nn9n
 
03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏勇浩 赖
 
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseJack Gao
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器iflytek
 
企业系统商务智能设计
企业系统商务智能设计企业系统商务智能设计
企业系统商务智能设计George Ang
 
EntLib.com e-Commerce System
EntLib.com e-Commerce SystemEntLib.com e-Commerce System
EntLib.com e-Commerce Systementlib
 
前端&服务器
前端&服务器前端&服务器
前端&服务器fangdeng
 
淘宝数据库架构演进历程
淘宝数据库架构演进历程淘宝数据库架构演进历程
淘宝数据库架构演进历程Jian Peng
 
淘宝数据库架构演进历程
淘宝数据库架构演进历程淘宝数据库架构演进历程
淘宝数据库架构演进历程zhaolinjnu
 
從零開始做架構圖
從零開始做架構圖從零開始做架構圖
從零開始做架構圖Philip Zheng
 
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网yang alex
 
深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)Dahui Feng
 
貫智簡介 20121128
貫智簡介 20121128貫智簡介 20121128
貫智簡介 20121128eric3917
 
JIRA Live DEMO 2020 v17
JIRA Live DEMO 2020 v17JIRA Live DEMO 2020 v17
JIRA Live DEMO 2020 v17Linktech
 
Jira live demo 2021 v23
Jira live demo 2021 v23Jira live demo 2021 v23
Jira live demo 2021 v23Linktech
 
王龙:百度数据库架构演变与设计
王龙:百度数据库架构演变与设计王龙:百度数据库架构演变与设计
王龙:百度数据库架构演变与设计YANGL *
 
阿里云 张旭 集群运维管理平台
阿里云 张旭 集群运维管理平台阿里云 张旭 集群运维管理平台
阿里云 张旭 集群运维管理平台guiyingshenxia
 
集群运维管理平台
集群运维管理平台集群运维管理平台
集群运维管理平台mysqlops
 

Similar to 天祁《交易线》 (20)

Actuate presentation 2011
Actuate presentation   2011Actuate presentation   2011
Actuate presentation 2011
 
蔡学镛 - 深入浅出符合事件处理
蔡学镛 - 深入浅出符合事件处理蔡学镛 - 深入浅出符合事件处理
蔡学镛 - 深入浅出符合事件处理
 
03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏
 
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
 
企业系统商务智能设计
企业系统商务智能设计企业系统商务智能设计
企业系统商务智能设计
 
EntLib.com e-Commerce System
EntLib.com e-Commerce SystemEntLib.com e-Commerce System
EntLib.com e-Commerce System
 
前端&服务器
前端&服务器前端&服务器
前端&服务器
 
淘宝数据库架构演进历程
淘宝数据库架构演进历程淘宝数据库架构演进历程
淘宝数据库架构演进历程
 
淘宝数据库架构演进历程
淘宝数据库架构演进历程淘宝数据库架构演进历程
淘宝数据库架构演进历程
 
從零開始做架構圖
從零開始做架構圖從零開始做架構圖
從零開始做架構圖
 
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
 
深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)
 
传媒梦工场分享
传媒梦工场分享传媒梦工场分享
传媒梦工场分享
 
貫智簡介 20121128
貫智簡介 20121128貫智簡介 20121128
貫智簡介 20121128
 
JIRA Live DEMO 2020 v17
JIRA Live DEMO 2020 v17JIRA Live DEMO 2020 v17
JIRA Live DEMO 2020 v17
 
Jira live demo 2021 v23
Jira live demo 2021 v23Jira live demo 2021 v23
Jira live demo 2021 v23
 
王龙:百度数据库架构演变与设计
王龙:百度数据库架构演变与设计王龙:百度数据库架构演变与设计
王龙:百度数据库架构演变与设计
 
阿里云 张旭 集群运维管理平台
阿里云 张旭 集群运维管理平台阿里云 张旭 集群运维管理平台
阿里云 张旭 集群运维管理平台
 
集群运维管理平台
集群运维管理平台集群运维管理平台
集群运维管理平台
 

More from tbmallf2e

Node getting start
Node getting startNode getting start
Node getting starttbmallf2e
 
猫粮快报
猫粮快报猫粮快报
猫粮快报tbmallf2e
 
618风林火山(仙快羽)
618风林火山(仙快羽)618风林火山(仙快羽)
618风林火山(仙快羽)tbmallf2e
 
新风尚活动分享
新风尚活动分享新风尚活动分享
新风尚活动分享tbmallf2e
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试tbmallf2e
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 
猫粮快报 金艳艳
猫粮快报 金艳艳猫粮快报 金艳艳
猫粮快报 金艳艳tbmallf2e
 
浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)tbmallf2e
 
猫粮快报
猫粮快报猫粮快报
猫粮快报tbmallf2e
 
番茄工作法
番茄工作法番茄工作法
番茄工作法tbmallf2e
 
Tmall demo environment
Tmall demo environmentTmall demo environment
Tmall demo environmenttbmallf2e
 
快速开发Css
快速开发Css快速开发Css
快速开发Csstbmallf2e
 
Google Chrome Developer Tools
Google Chrome Developer ToolsGoogle Chrome Developer Tools
Google Chrome Developer Toolstbmallf2e
 
Hello Html5 Games
Hello Html5 GamesHello Html5 Games
Hello Html5 Gamestbmallf2e
 
Velocity beijing 2011 xianyu
Velocity beijing 2011   xianyuVelocity beijing 2011   xianyu
Velocity beijing 2011 xianyutbmallf2e
 
Chrome中的创意和应用
Chrome中的创意和应用Chrome中的创意和应用
Chrome中的创意和应用tbmallf2e
 
高端版Tmall
高端版Tmall高端版Tmall
高端版Tmalltbmallf2e
 
2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本tbmallf2e
 

More from tbmallf2e (20)

Node getting start
Node getting startNode getting start
Node getting start
 
猫粮快报
猫粮快报猫粮快报
猫粮快报
 
618风林火山(仙快羽)
618风林火山(仙快羽)618风林火山(仙快羽)
618风林火山(仙快羽)
 
新风尚活动分享
新风尚活动分享新风尚活动分享
新风尚活动分享
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
猫粮快报 金艳艳
猫粮快报 金艳艳猫粮快报 金艳艳
猫粮快报 金艳艳
 
浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)浅谈前端安全与规范(渔隐)
浅谈前端安全与规范(渔隐)
 
猫粮快报
猫粮快报猫粮快报
猫粮快报
 
番茄工作法
番茄工作法番茄工作法
番茄工作法
 
呜龙
呜龙呜龙
呜龙
 
Tmall demo environment
Tmall demo environmentTmall demo environment
Tmall demo environment
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
 
Google Chrome Developer Tools
Google Chrome Developer ToolsGoogle Chrome Developer Tools
Google Chrome Developer Tools
 
Hello Html5 Games
Hello Html5 GamesHello Html5 Games
Hello Html5 Games
 
Velocity beijing 2011 xianyu
Velocity beijing 2011   xianyuVelocity beijing 2011   xianyu
Velocity beijing 2011 xianyu
 
Chrome中的创意和应用
Chrome中的创意和应用Chrome中的创意和应用
Chrome中的创意和应用
 
Wap
WapWap
Wap
 
高端版Tmall
高端版Tmall高端版Tmall
高端版Tmall
 
2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本
 

天祁《交易线》

Editor's Notes

  1. 颜色的意思:灰暗的过去,火热的现在,稳定的未来\n
  2. 和钱有关,从用户决定买一件商品开始,直到付款的流程,以及后续的查看订单等。\n\n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n