淘宝PC改版!我们跟一位背后付出6年的男人聊了聊……

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

image.png

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


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


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


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

image.png

PC首页,时代的眼泪


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


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


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

image.png

资源并不是指要投入十来个技术同学,百来台服务器做开发;那些逐步转移、消失、迭代的业务,留下了坑坑洼洼无人填补的“资源&人工运营坑位”;那些组织调整、技术更迭的变动,不可避免地留下了“历史痕迹”:老化站点、不统一的技术方案、不可灰度不可回滚的发版方式等等,它们深深根植在这个运营近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改造计划”而言,才刚刚开始。

image.png

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

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


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


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

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


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


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


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

image.png

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


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


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


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

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


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

image.png

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


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


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


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


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


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

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

image.png

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


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


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


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

image.png

相关文章
|
3月前
|
NoSQL Java 关系型数据库
刚拿的字节跳动offer“打水漂”,TikTok不去了,我该何去何从?
TikTok,作为字节跳动铺棋国际局的头兵,如今竟与华为有了相同遭遇,但似乎并不让人出乎意料。实际上,TikTok出售美国业务给微软,并非是我们想象的躺平跪倒,而是极端不利的形势下,被逼无奈的退让,所以就这一点来说,我也能给予理解。
|
4月前
|
负载均衡 网络协议 算法
海投简历一个月无果,机遇巧合得前辈内推,五面蘑菇街终获offer
到目前为止使用Java到现在大概有两年多的时间,所以java算不上很好。刚开始投递的时候,刚辞职,也没准备笔试面试,很多东西都忘记了。所以,刚开始我并没有直接就投递蘑菇街,毕竟心里还是有一点点小害怕的。
|
8月前
|
运维 JavaScript 前端开发
搞副业|全网最快前端
搞副业|全网最快前端
86 0
|
Web App开发 编解码 缓存
云话题 | 第3期 你女朋友在买买买时,程序员小哥在干嘛?
年货节来了,你女朋友下单了吗?观看直播已经成为人们日常上网的习惯之一,直播购物作为其中的重要项目,销售额屡创新高。最近,天猫年货节刚刚开幕,淘宝直播中就涌入了不少的用户前来抢购,毕竟足不出户就可以买到全国甚至全球的年货,对热衷买买买的消费者们来说实在太方便了。那么,直播抢购背后到底蕴藏着哪些技术?平台在开发网络直播系统时为什么如此看重CDN?在高并发直播的当下,CDN的技术人员都需要关注什么?阿里云Edge Plus的第3期云话题,边缘酱将为你讲讲关于直播抢购与CDN的那些事。
4531 0
云话题 | 第3期 你女朋友在买买买时,程序员小哥在干嘛?
|
程序员 UED
小视频源码的发展之路,专业的程序员给你涨知识
最早的小视频应用只是作为一个工具应用出现在公众面前。 经过多年的发展,它已经转化为各种各样的形象,在公众面前。 短视频资源的开发过程是什么? 让我们看看。
小视频源码的发展之路,专业的程序员给你涨知识
|
机器学习/深度学习 人工智能 自然语言处理
如何从校招脱颖而出?“迫击炮手”教你如何用积极的态度拿下支付宝offer
此刻在屏幕前的你,也许正在开始一段新的人生路,期待这个夏天在智能服务部遇见你。
941 0
如何从校招脱颖而出?“迫击炮手”教你如何用积极的态度拿下支付宝offer
|
供应链 搜索推荐
淘宝上的神人们太多了!淘宝干脆开了一个神人学院
只要有一技之长,无论是谁,都可以一试!
淘宝上的神人们太多了!淘宝干脆开了一个神人学院
|
前端开发 程序员
翻了100个程序员的朋友圈, 发现个个都是套路王!
真正的程序员朋友圈都是什么样的? 揭秘程序员的朋友圈,只能说真的有毒 翻了100个程序员的朋友圈,才发现个个都是套路王! 生活中程序员的真实写照是一款游戏一包烟,一台电脑一下午。
1183 0
|
前端开发 算法
记一次凉凉的小米前端面试(应届内推)
这篇内容是朋友发在掘金上的,他的掘金 前言 初入北京,人生地不熟的,找工作这种大事就直接到我脑袋上了。有幸小米的hr给我发了面试通知让我去快(bei)乐(shang)的面试。
2453 0