淘宝PC改版!我们跟一位背后付出6年的男人聊了聊……
大淘宝技术2022-08-26

2022年5月底,淘宝PC首页全新改版。本文讲述了PC改版前后的坎坷故事,以及PC项目组未来的技术布局和思考。

2022年新版首页

https://www.taobao.com/

2021年12月的某个上午,用户本豆习惯性地用电脑打开了淘宝网。大屏看商品细节、多页面可对比,而且上班时间悄悄看个淘宝毫无违和感,这些原因令他成为移动时代为数不多的“PC淘宝爱好者”。

他悄咪咪举起手机扫开二维码登录,点击跳转到下一个商品页时,登录框又一次弹了出来。在充满时代感的网格页和时不时的错误页中穿梭,他看中一台折叠露营车,点击旺旺想咨询商家尺寸大小,消息框提示需要下载安装旺旺客户端……

嫌麻烦的本豆悻悻关掉了网站。此刻,与他同样有着“PC不咋好用”烦恼的,还有1000万人。

同样时间点,一位在首页开发岗位上工作了2000多天的大淘宝工程师永霸,正在契机之下,酝酿好了新的淘宝PC首页改造计划。

工程师永霸与新版淘宝PC首页

PC首页,时代的眼泪

2015年,在整个时代背景下,阿里开始了“ALL IN无线”战略。“PC不如移动香”,15年双11之夜的前几分钟,无线端的交易占比已经达到了80%以上。此后至今,淘宝的PC用户就像指缝间流下的沙,淅淅沥沥淹没在时代的洪流中,单是首页的DAU就下滑了将近10倍。

放到现在,你几乎不可能打开电脑版淘宝商城,去给手机充值一次话费。这意味着,很多业务和运营也随着用户“迁移”到了新的战场,PC端的一些小众功能版块几乎是“空架子”,交互滞后、页面404、错误弹窗等大大小小毛病潜伏在了各个角落……部分用户忍不住上微博吐槽:PC是不是没人维护了?

永霸抬抬眼镜,苦笑道:“我们一直在的,但资源确实不够。”

2016年版本的淘宝PC首页

资源并不是指要投入十来个技术同学,百来台服务器做开发;那些逐步转移、消失、迭代的业务,留下了坑坑洼洼无人填补的“资源&人工运营坑位”;那些组织调整、技术更迭的变动,不可避免地留下了“历史痕迹”:老化站点、不统一的技术方案、不可灰度不可回滚的发版方式等等,它们深深根植在这个运营近20年的平台上,像年老而疾病缠身的巨兽,喘着粗气负重前行。

“你能想象?我还接到了一些PHP页面,估计是十几年前的,我都还没开始写代码呢!”永霸团队的同学锦臻是这次首页改造的主力,在他还是学生时,一直视玉伯为自己偶像,没想到工作3年后,他还能在“旺旺点灯”功能上看到偶像玉伯 2010 年写的 JS 代码:/* Copyright 2010, KISSY UI Library v1.0.5 MIT Licensed build: 524 Apr 6 09:10 *//** * @module 旺旺亮灯脚本 * @author 玉伯 * @depends ks-core */ 新同学在面对PC需求时也有个普遍的痛点:没有交接文档、找不到负责人,大家的工作充满了考古的“乐趣”。哪怕是修改一个小小的搜索框组件,从剥除历史的代码到重构新的逻辑,同学竟也花了整整 2 周的时间。

资源稀缺、包袱沉重,和大家想象中的“技术人转行投奔无线”不一样,在那些“不被看见”和“无限delay”的年月里,永霸带着团队已经为“PC重新出发”这件事悄悄沉淀了4年。

2022年6月,用户Reee想给孩子买九九乘法表卡片,因卡片字小看不清就打开了电脑淘宝网。他惊奇地发现,首页变得清爽明朗,很容易找到自己想要的东西,而且通过网页就能和商家旺旺沟通,还能和自己手机端的消息同步……多年不看网站的他忍不住发了个朋友圈,“不记得以前淘宝网具体长什么样了,但感觉现在很好看也很好用。”那些因工作性质需要淘宝搜图(例如电商美工、家居设计)的PC活跃者们,也忍不住跟帖,“出错的页面变少了”“模块很清晰”……


今年5月底,永霸团队上线了一版新的淘宝PC首页
。这是近些年来改动最大的一版,第一目标集中解决产品可用性的问题。但这并不是4年沉淀的最终目标,首页改版对于永霸的“PC改造计划”而言,才刚刚开始。

PC首页改造计划的背后,是一盘大棋

在团队同学眼里,永霸“很有想法”。在程序员与产品经理“不共戴天的仇恨”里,他不仅不会砍需求,甚至还要主动增加几个需求建议。“用户有这个更好,干嘛不搞?”连UED也接收过他的建议,“这里是不是换个字体会更好?”

他现在的团队20来人,负责大淘宝所有基础产品的前端开发,包含首页、信息流、详情、交易、消息等。他喜欢做自己产品的用户,为了“一流”的体验,他曾愤愤然拒绝了业务侧在微信场景里打开淘宝商品需唤端的需求。“我不是要看商品么?强制拉登录干嘛?”PD反而被这份耿直噎住。

在淘宝做开发,尤其是和用户视觉&体验紧紧绑在一起的开发,需要有这种用户视角,以及一颗强大的心脏。

苓均是这次首页改版中,负责Web 旺旺产品上线的妹子。“产品能力升级”是永霸这次改版的第二目标,逐步解决用户那些“为什么手机上可以电脑端不可以”的问题。此前,用户在电脑端与商家沟通,需要单独下载旺旺客户端软件,麻烦且占内存。苓均妹子捣鼓了一个月,自信满满上线放量到50%的时候,意想不到的负面反馈把她怼到自闭。原来,很多用户已经安装了客户端,他们反而不习惯唤起网页会话。还有一些新用户,希望Web版能实现更多除了文字聊天以外的功能。“大家觉得你是淘宝,你就不应该做出这种东西。”苓均无奈笑道。

作为她的leader永霸,自打2016年负责首页开始,早已经身经百战、无坚不摧。“用户对我们有期待,如果有一天用户不用我们了,那就连骂的声音都消失了。”第二天一早,苓均将Web 旺旺回滚到20%量级,增加了客户端or网页会话的选项,并能勾连默认选项。锦臻是在2年前的3月加入这个团队的,他同样受影响于永霸的“用户价值”视角。这次首页改造,锦臻主动接过了一些无人问津的近20个老页面,将它们逐个逐个迁移到可维护的斑马搭建平台上,并在吊顶处增加了“网页无障碍版”能力,可朗读、可换色、可放大,“让人越方便越好。”

在价值诉求如此清晰的团队,凝聚力变得轻而易举。PC产品能力升级的背后,还有很多普通用户无法感知却需要技术团队付出多个日夜的事情。例如,淘宝PC技术栈过于古老,竟然不支持灰度、不支持回滚,这几乎完全不符合当下的安全生产规范。这意味着,如果你这一版发出后感觉不够完美,只能选择再重做一版覆盖,而无法退回历史版本。

“这就像刷完墙,哪里不喜欢,我就得全屋重刷一次。”永霸挠头,这也正是此次改造计划背后,最为深远的布局和第三目标——“技术能力全线升级”。

在会议室里一起讨论首页搭建方案

可灰度、可回滚只是初阶迭代,这部分现在已经完成。永霸这4年铺垫的是,“一种支持多端的架构,你比如说今天淘宝App上线一个新功能,一两周后我就能顺滑迁移到PC淘宝、H5淘宝。这件事非常重要,这件事今年没有明显进展我们都能接受,但一定要坚持做。”

“做成一件事情”有很多因素,“坚持”是成本最低的一种。低成本复制迁移产品功能,并保证用户在各个渠道上的体验一致,不是一件容易的事。2018年,永霸团队搬到了金辉大厦,当时接到需求开发H5淘宝,目的是为了在非淘宝的APP里打开一个商品页面(比如支付宝里),就和在淘宝里的感受差不多。但由于基建设施差别太大,H5淘宝的页面打开速度几乎需要2-5秒,低端机甚至可能10秒以上,而且页面信息也不够安全。于是19年,他们在几乎没有业务诉求的情况下主动做了小程序,在当时场景下,这是更容易拉齐体验的技术选择。

这件事启发到永霸,其实PC淘宝需要的,就是这样一个能力完整的平台架构,改掉旧版结构的同时,还能与时俱进地跟上手机淘宝迭代的步伐。“改版不是你今天改上一版,下次没资源没管理者关注就不做了。如果有这样一种低成本可迁移的技术方案,那手机上不论迭代个什么功能,PC马上就能不花力气地跟上,何乐而不为。”

永霸笑着龇开一颗小虎牙,我先努力做到【能不能】,业务自己再来决策【要不要】。”

这才是这个从16年起守护了PC首页2000多天的男人,真正的目标。从“拿着锤子找钉子”到“找准钉子造锤子”,技术为业务提前布局,挖掘现在不是、但将来可能是强诉求的事情,而从用户的角度,这才是更为长远地,能够守护消费者价值的方式,而不是今天听一做一、做一歇一。

不转岗,做正确的事,技术的价值实现不拘于领域

2019年6月,西溪园区 6 号楼负一层,做了一场 PC 首页历年版本的大合集展览。永霸感慨,“有好几个版本都是我开发的,感觉自己也属于历史的部分。”

永霸负责过的PC首页们(部分)

“历史”流淌的过程中,有同事离开了,有同事转岗了,他们大部分选择了客户端或者服务端,抛开业务价值和消费者价值,大家心照不宣地藏着一个问题:你怎么还在做PC淘宝?

技术这一行,似乎存在着非常明显的“时代趋势”焦虑。“xxx前景不好了”“yyy凉了吗”“如何评价zzz的趋势,现在转还来不来得及”,那些撩拨人心的话题充斥在各个角落,害怕被风口狠狠地甩在身后,更害怕被“后浪”拍扁在沙滩之上。谁都明白,PC的时代已经不可能回去了。


永霸14年校招入职淘宝,16年开始独立负责首页,在当年连测试都没有且TMS等各设施不完善的情况下,他依然交出了一份足以令当时淘宝前端&无线负责人发全员邮件夸赞他的答卷。17年晋升以后,他也曾经迷茫过,场景没有变化的情况下,他已经做不出更新的高度了。更头疼的是,19年在他刚开始接手团队的时候,因各种原因人走了一半儿。“不是我做错了什么,但心里还是很有压力的。”

锦臻加入团队2年,做着做着也默默眼红“隔壁”移动端淘宝的页面数据。他并不掩饰自己的困惑:“我们PC页面的ROI是不是太低了?我做这个能被看到吗?”即便永霸个人会有情怀的因素留在PC,但对这些年轻工程师们来说,他们需要更亮眼的机会和挑战,这是更难、更现实的问题。


“我的优点就是知道做什么是对的,并且愿意坚持去做。”这是永霸引以为傲的优点和处事哲学。17年在ALL IN无线的浪潮下,他从迷茫到释然,“技术只是帮助业务解决问题的手段,业务的形态、使用的技术是多样的,但解决业务问题的能力是不会变化的。” 在团队愉快的某个下午“吃水果活动”后,他开导锦臻,一个技术的价值不在于你的方案多先进,框架多厉害,而是是否可以更好地满足业务需求,创造出新的东西。对个人而言,“解决问题的能力是否有增长”更关键,给你任何一个产品,都能做到超出预期,你才有更多的选择权。“再说了,你绩效是我打的,你还担心啥。”永霸开玩笑似的拍拍小兄弟的肩。

学会延迟满足,远离聚光灯下,接受挑战和质疑,坚持正确的事情,耐心等待开花结果,他总是不厌其烦地与团队沟通这一点。刚加入团队才3个月的苓均妹子也深感,永霸是个“每个人都能顾及到”的leader,喜欢沟通和输入。团队内经常互相Code Review ,“但永霸是看的最仔细、反馈批注最详尽的”。“我第一次见他之前,看照片还以为是个中年男子,但其实很年轻有活力哈哈。”

伪·中年男子·永霸在交流中,很喜欢用“今天”这个词。“今天我们把自己当做是用户,能比较舒服地去电脑上、手机上购物,我觉得这事儿始终是有价值的。”“以往前端拿到淘宝的技术大奖是挺难的,今天我们作为前端,假设能把交易转化率提升1%,那能带来的业务价值都是相当巨大的。”对“今天”的理解,意味着对现实状况的把握和思考,他最爱的读物是毛选,希望自己是一个能够输出思考和见解的人。为此,晚上9点半后直至睡前,他常给自己安排“与诸子百家、秦皇汉武”的会晤时间,“我愿意去研究一些东西,历史能帮人建立自己的世界观,风轻云淡地去看过去和现在。”

永霸心爱的书架

黑色裤子、白色上衣是永霸最常见的形象,他自嘲自己生活中是一个无趣的人,“和工作相反,生活中我希望被认为没有想法。”没有想法,自然也没有攀比,他过得简单、纯粹和专注,简单听歌、跑步、游戏,看美食、看旅游,看比赛,不容易被焦虑裹挟,也自然更能在这个时代守住初心。

继PC首页改版上线后,上个月底,背景更为复杂的PC商品详情页2.0也上线了。秉承着与首页一致性的风格,清晰干净,体验流畅,目前已经在女装类目放量。下一步,他们会逐步完成全类目的商详改造,再下一步,还将完成全站内搜索的升级。而对比同行来说,PC淘宝这次的产品升级和技术改造,依然是走在前沿的。

工号7开头的五位数,见证了永霸在淘宝的几千个日夜。这位来自福建的老哥,已经安稳地在梦想边落脚生根,并尽全力守护着。“有些老应用老代码已经无人问津,这时候谁最痛谁上,谁愿意往前一步谁上。这考验的是自己坚持与相信那些对的事情,无关绩效。”

历史的发展是螺旋式上升的,那些只要认为是对的事情,未来一定会发生/被证实的,这是工程师永霸的信念。█

永霸和团队同学们在双11