【第1598期】蚂蚁体验技术部的前世今生

前言

昨晚下班的时候刷到的，个人还蛮喜欢这种“八卦”。今日早读文章由@偏右授权分享。

正文从这开始～～

2008 年对中国人是复杂的一年，冰灾，大地震，奥运会接踵而至。对玉伯来说也一样，赶在奥运会排查临时人口之前，玉伯从北京中科院软件所离开，凭着自己几年来在程序开发上的经历和对新兴前端行业的看好，来到杭州加入了淘宝 UED —— 彼时中国最好的前端团队，同时开始撰写岁月如歌博客。虽然 Google 早在 2003 年已经通过 Gmail 这个划时代的产品展示了 JavaScript 和 Ajax 技术在浏览器端的强大能量，前端在当时在国内还是一个十分稚嫩的行业。windows XP+ IE 统治了国内的互联网行业的每块屏幕，也正是那一年 Google 推出了 v8 和 chrome，次年 Node.js 发布，即将对前端行业产生巨大的影响。

2008 年的云谦（sorrycc）拿着不到 4000 块钱的工资在一家小公司里打杂，希望老板加薪 500 元未果，离职加入了淘宝 UED。同一年的萧庆也在杭州的某公司里做 Java 程序员兼前端，老板试探性打开 ExtJS 官网对他说，这个不错但是要钱，能不能用 jQuery 改一版免费的出来？一个月后，一个 jQuery 版本的 ExtJS 雏形出来了。

2009 年因为淘宝店铺业务的发展，业务上需要一个重型的可视化编辑器，玉伯开始做 KISSY Editor。一年后，承玉加入淘宝，并且立志要在 5 年内升到 P8。玉伯和他、沉鱼、乔花一起将 Kissy Editor 进一步升级成了 Kissy，成为当时淘宝中前台的标准前端技术栈。

2009 年贯高和臻儿大学毕业，选择加入当时名不见经传的支付宝 UED 前端开发部。

2010 年的绝云毕业后，在阿里和一家日本公司的 offer 中选择了出国淘金。2011 年，臻儿北上南下，在校园中招到了展新和偏右，一起开始参与支付宝前台业务和基础技术建设。同年萧庆也加入了淘宝 UED，依靠自己先前的经验，在业务线上搭建出了 BUI —— 基于 jQuery 的中后台组件库，在淘系后台场景中大量推广。

2011 年，玉伯结束了内部创业的湖畔项目，去了淘宝 Java 开发团队。确认了自己不喜欢 Java 代码后，次年从淘宝 UED 转岗到了支付宝 UED 前端开发部，负责基础技术组，偏右和贯高当时都在这个小组。这也是他第一次正式带团队，第一次小组周会，玉伯没有聊技术，而是操着不甚流利的湘普分享了亚马逊公司的价值观，所有小组成员面面相觑，一不知道他想表达什么，二也看不出面前这个黑黑的湖南汉子和贝佐斯有什么相似点。

最后的黄金时代

外部前端大环境正在锐变的前夜，jQuery 如日中天，Node.js 崛起，ES6 正在酝酿中，前端的标准化和工程化即将到来。前端工程师这个职业依然是一个很不成熟的技术岗位，国内很多公司过分地细分了重构工程师（CSS）和 JS 工程师，行业内的大佬们一窝蜂地在使用奇技淫巧闷头造类似 YUI 和 prototype.js 的轮子，面试问的最多的是闭包的写法和 IE6 hack 技巧，技术环境的割裂造就了前端基础技术的风潮和大量岗位。和当时国内大多数前端团队一样，支付宝也在闭门造自己的前端轮子，大量借鉴了 YUI 的组件架构体系，底层使用了 Java 生态里的 MVN 进行依赖管理和构建，所有的轮子和钉子都要内部自造，和前端社区越来越远。

很快支付宝在玉伯的影响下开始尝试逃脱出这个怪圈，解决办法是开源。玉伯在一行代码还没开始写之前发了一条微博，我们要用开源的方式打造支付宝下一代前端框架了，这在当时是非常激进的。

2012 年 4 月，玉伯刚刚从淘宝转岗到支付宝，离开了渐渐进入死胡头的 Kissy，手攥着当红的 Sea.js 准备大干一场。两年前的支付宝前端团队也进入了团队技术的转型期，旧的前端框架需要升级，笨重的开发方式需要演进，双方一拍即合，Arale 就此诞生。
—— 关于 Arale 的过去、现在和未来

Sea.js/Arale/spm 套件开始在支付宝内部和国内开源界发展起来。开源的工作方式让贯高偏右们感到非常兴奋，云谦、沉鱼和萧庆也先后从淘宝转岗到支付宝开始参与新的前端体系的建设。我们去了腾讯深圳本部进行了技术分享，号召腾讯的同学也来使用和共建 Sea.js 和 Arale 前端社区。现在回头看来有点天真，虽然是开源技术，当时走的依然是一条前端轮子自研和前端社区自建的道路，最终这条路走没有成功，Angular 和 React 等外部技术体系很快将带来巨大的冲击。

前端技术之外，整个支付宝乃至阿里的业务平台也在 13 年走到了一个十字路口，前端和业务结合非常紧密，UED 和设计在公司的话语权极高。那两年的阿里的 UED 团队们的气氛非常活跃，蜜月一样的 PC 前端时代现在显得有些光怪陆离，前端和 UED 在产品上进行着各种各样的 A/B 测试，更换各种按钮样式观察页面数据变化，每半年搞一次前端性能优化的战役，公司内举办着各类黑客马拉松比赛，iPhone 和 iTouch 送到手软，996 这个词那时候还不存在。这是个一行 js 代码的错误就可以造成全站交易下跌的时代，也是 PC 前端们最后的黄金时代。

巨变

2013 年改变了无数人的命运，无线时代的来临、友商的压力让整个阿里坐立不安。11 月，整个阿里宣布 ALL IN 无线，推出来往正面对决友商，誓要火烧南极，淘宝/支付宝等业务也全面无线化。城门失火殃及池鱼，60 个人左右的支付宝前端开发部即刻面临解体，一半以上的人被抽调支持支付宝无线业务，面对巨大的变化，那几周整个团队人心涣散，所有人都面对非常具体的抉择：留下 or 离开？当时的前端开发部老大么么茶最终去了来往（后来成为了钉钉的创始人之一），玉伯自己也面临着各种选择，特意去现场观察了来往团队的状态：『感觉来往可能真的会成功！』。

最终，玉伯还是决定和剩下的 17 个人一起留在了这个团队，支持没有几个迭代的 PC 端业务和进入死胡同的自研前端技术体系。调整完的第一次周会，所有人都很沉默，比起鼓起勇气做抉择离开的人，留下的人的心态更多是未知和『拥抱变化』。ALL IN 无线伴随的是全集团的疯狂，全组为配合兄弟团队主动加班，然而周六来了之后竟然不知道要做什么，两周后就作罢了。没有活干是一方面，更可怕的是对前端自身价值的怀疑，整个阿里前端也陷入了类似的困局。

在阿里，我们不得不承认一个事实：前端的确有价值，但放在全局来看，前端产生的价值并非核心价值。 在阿里，虽然前端的工作已经不可或缺，但对大公司而言，不可或缺的岗位多了去呢，不可或缺不代表有核心价值，我就不说了。
————阿里前端的困局与突围

这个状态没有持续很久，本以为是一艘弃船，业务上新的发展方向却带来了新生。

无线战略的同时，大中台也作为公司的重要战略在那一年被提了出来。剩下的伙伴们没有闲很久， PC 端的前台业务虽然没了，前线业务伴随的中后台的业务量开始大量增长起来。那时候团队最喜欢用一张冰山图来做技术和业务宣讲：大中后台的业务比例是前台业务的十倍甚至更多，比起前台的兵强马壮，中后台业务的人力资源、研发效率和产品体验对我们都是新的巨大的挑战。戏剧性的是，几个月前还不知道做什么的团队，很快玉伯就在和无数不知道从哪来长出来的中后台业务拉扯人力问题：『我们不是资源！』。随着业务的爆发，团队人数迅速增长起来，团队名也从前端开发部改名成体验技术部，意在体现前端工程师的核心竞争力：用技术解决产品体验问题。

老的一套前端技术体系已经明显不匹配业务现状了，亟需换代。这一年设计师子溯加入了体验技术部，开始和偏右展新们一起做蚂蚁金服的第一个技术商业产品『蚂蚁金融云』，前端技术栈选的是 AngularJS。而 2014 年 React 技术栈在社区崭露头角，承玉们在淘宝维护 Kissy 和 BUI 等技术体系的时光也到了一个转折点。于是承玉转岗来了支付宝，和萧庆一起开始建设 react-component 底层组件生态。

前后端分离的研发模式在社区流行起来，体验技术部最先实践的是基于 Node.js 的应用层方案。

在这种研发模式下，前后端的职责很清晰。对前端来说，两个 UI 层各司其职：
1、Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式，通过 JavaScript 添加交互功能，HTML 的生成也可以放在这层，具体看应用场景。
2、Back-end UI layer 处理路由、模板、数据获取、cookie 等。通过路由，前端终于可以自主把控 URL Design，这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。
通过 Node，Web Server 层也是 JavaScript 代码，这意味着部分代码可前后复用，需要 SEO 的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。
—— Web 研发模式演变

苏千、不四等 koa 社区的活跃成员在 2014 年先后加盟，和贯高一起开始研发 Chair 企业级 Node.js 研发框架，以及后来的 Egg.js，尝试在大规模高可用的金融业务和前后端分离的研发模式中寻找 Node.js 的落地场景。

2012 年，百度商业前端通用技术组的御术（林峰）和几位团队成员一起从上百个业务系统中抽取需求，写出了商业图表库 ECharts 0.1 版本，2013 年 6 月 ECharts 1.0 版本发布。几乎与此同时，因为买不起 HighCharts，萧庆开始把 BUI 中的图表独立出来，对标做成了内部使用的 ACharts。

AngularJS 的尝试没有太久，体验技术部开始决定要统一技术栈，经过激烈的争吵和决策，押宝 React 这条船，尝试在 react-component 基础上合力建设基于 React 的 UI 设计系统。2015 年，曾经风光无限破釜沉舟的来往也终于走到了尽头，团队像刚成立时那么迅速地分崩离析了，它山没有跟随么么茶们去做新的钉钉，而是决定来到蚂蚁，带领设计师团队和承玉偏右一起打造企业级中后台 Design System。那时 Design System 在国内是一个很新的名词，只有 Apple 和 Google 等公司有这样高大上的概念，而基于中后台的设计语言更是很少有人提。最后玉伯给拍了一个 Ant Design 的奇怪名字，偏右很快注册了一个 ant.design 的域名，2015 年第一个对外版本上线的时候，社区很多人都看不懂这是什么。

React 在内部的推广经历了很大的阻力，一方面是对 React 技术栈和当时还不成熟的 antd 的怀疑，一方面是大量 Arale/BUI/jQuery/BootStrap 的技术栈还在业务中不断使用。为了 Ant Design 设计体系能在支付宝业务落地，我们甚至认真讨论过 jQuery 版本的 antd 的可行性，最终团队通过投入大量基础技术的工程师去直接参与一线业务，在关键时间点把关键项目啃下来，一边落地一边完善 antd。Ant Design 的中后台设计语言的定位和推出时机是非常合适的，antd 开始在公司外部也开始收获了大量关注，GitHub 的 stars 数直线上升， 17 年 3 月突破了一万 star，18 年三月 2w star，很快成为国内中后台前端开发的标杆，也让承玉在 2015 年顺利升到 P8。

Ant Design 的成功让整个团队感受到鼓舞，另一个前端大展身手的可视化领域在这个团队同时生长起来。也在 2015 年，体验技术部的萧庆和好修阅读了 The Grammar of Graphics 一书后，意识到可视化不只是图表这么简单，开始着手把 ACharts 升级为 G2 图形语法库，即 JavaScript 版本的 The Grammar of Graphics，并尝试在蚂蚁内推广落地。16 年，刚刚回国加入阿里没多久的绝云在微博上联系到了 ECharts 的御术，那时御术也正面临着再次创业的失败，揣着可视化的梦想来到了杭州。他将和萧庆绝云沉鱼们一起打造 AntV 蚂蚁数据可视化解决方案和九色鹿体验度量产品。

2016 年，展新在蚂蚁金融云的文档中心业务研发过程中，抽离了一个 Markdown 文档管理应用，起名叫云雀，想替代公司内部老旧的 confluence 系统。展新作为这个项目的唯一的设计师兼 PD 兼 BD 兼工程师，做了一个很漂亮的 Keynote 到体验技术部各个小组去分享，希望能找到志同道合的同事一起参与。然后子溯作为 PD 加入了，玉伯也看到了这个产品的前景，星星之火开始燎原，一个云雀产品小团队迅速运转起来，产品不断改版迭代试错。2017 年苏千不四加入，云雀迅猛成长为整个阿里经济体内部最大的文档平台，次年改名为语雀正式进行商业化对外服务。

2017 年，御术北上去爱奇艺挖到了愚道。愚道加入体验技术部后，本以为内部研发应该已经非常成熟，备受业务和技术折磨后，萌生了开发企业前端研发框架的念头，和来自成都的水鱼一拍即合，一起在酒店里通宵了几个晚上，开发出了 Bigfish 1.0 版本。几乎同时，云谦基于云凤蝶业务中的实践做出了类似的 UmiJS 并且对外开源，两者经历了剧烈的内部竞争后在 18 年进行了整合，一个你死我活的局出现了双赢，UmiJS 对外开源服务，Bigfish 则基于 Umi 重构，成为蚂蚁金服内部标准前端应用框架。今天的体验技术部不再是当年的刀耕火种，我们有了工业化的生产工具进行研发，在前端我们有了 Ant Design，有了 Bigfish，在服务端我们有了 Chair 有了 Functions，可视化我们了有了 G2/G6/F2/L7，生产力比起几年前已是质的飞跃，但是这里也远远没有成熟到只需要螺丝钉的程度。效率、资源、体验的平衡是我们的终极命题，也是体验技术部存在的意义。

砥砺前行

除了语雀，其他内部技术产品在前端工程化的大背景下也成长起来：Basement 前端应用发布平台，云凤蝶可视化搭建平台，九色鹿体验度量等等，投入了大量人力各自发展。玉伯也在被各个业务部门挑战，为什么业务线不能投入足够的前端资源，所有体验科技产品都面临着在蚂蚁和阿里内部巨大的自证压力。语雀在蚂蚁内部被问得最多的问题是和金融服务有什么关系？为了努力向内部业务对齐，语雀的第一个 slogan 是『让知识等于财富』。在大阿里内部，和钉钉在企业协作领域的定位也有重叠，在和强势的钉钉经历了无数次业务拉扯之后，非常惨痛的情况还是发生了。2018 年 6 月，包括展新在内的大半个语雀团队被钉钉合并，语雀 HR 在宣布决定的会议上哭了出来，无线 all in 的噩梦往事仿佛重现。这对新生的语雀是一次巨大的打击，准备商业化起飞的翅膀被生生打断。

2018 年 12 月 25 日， Ant Design 彩蛋事件在全网酝酿爆发，一度冲上知乎热榜第二，用户的巨大期许转化成责骂和讽刺崩涌而来，antd 的 GitHub 讨论区当天基本瘫痪，Ant Design 团队经历了噩梦般的一周。事后整个体验技术部上下都进行了整肃，所有人感受到了身上巨大的责任和敬畏感，玉伯非常生气并自领 3.25 全年绩效（无加薪无年终奖股票等奖励），偏右在内部复盘上许诺 antd 会更好，用长期的技术投入一点点弥补损失的信任。

2019 年 4 月，御术在一次部门团建中说『你们有感觉到体验技术部这两年不够好了么，已经很久没有社招 P8 加入了』。号称国内最好的前端团队，今天比以往都更需要新鲜血液的加入。『到了坡底，就只能向上走了』

2013 年玉伯写过他的三个梦：技术梦、产品梦、自由梦。语雀、云凤蝶、九色鹿、Basement 是这个产品梦，Ant Design、Egg、Umi、AntV 是技术梦，做梦是需要勇气的，也从来不是一帆风顺的。

我有三个梦：技术梦、产品梦、自由梦。
之前我一直把前两个梦割裂开来，2012 年最大的成长是意识到前两个梦可以合起来，技术即产品，产品即技术。12 年下半年很清楚明确基础技术最重要的是产品化。只有用做产品的心态去做技术，才有可能把技术做好做长久。
产品梦不仅仅是技术梦，但技术梦可以融合进产品。做产品不一定要出去创业，在公司依旧可以做到。公司本身也是一个产品，对业务的了解、深入、改进等等，都很有挑战，非常值得去做。产品梦重要的不是所做的事情，而是做事的产品心态。
至于自由梦，于我而言，一是财富自由，二是精神自由。愚公（周爱民）说过挺有意思的一句话：财富自由不要只看收入，最主要取决于支出。目前愚公就已实现了财富自由，因为愚公老家那地方，日常开销真是小，呵呵。真正难得是精神自由…
—— 毕业十年与我的三个梦

2019 年阿里内已经有几十个名字是『体验技术部』的前端团队。

2019 年的展新在钉钉继续追逐自己的文档梦。

2019 年的苏千子溯在和语雀一起蛰伏，在刚刚过去的四月份发布了企业空间功能，语雀的商业化再次上路。

2019 年的云谦已经是两个男孩的父亲，刚下线了老迈的 spm，发布着 umi 的一个个新版本。

2019 年 Ant Design 的 stars 数已经突破了 45000，偏右和勺子正在筹划 antd 4.0，努力把西湖区第一做成太平洋第一。

2019 年的沉鱼开始从九色鹿转向云凤蝶，探索 hpaPaaS 智能建站的可能性。

2019 年的贯高们正在用 Node.js 搭建下一代 Serverless for Frontend 架构，做阿里经济体小程序云开发的标配。

2019 年的萧庆和绝云把 AntV 做成了阿里数据可视化的核心技术，还在探索用可视化技术给业务带来价值。

2019 年的臻儿正在尝试把蚂蚁前端研发搬到云上，让下一代研发模式早点到来。

2019 年的御术开始带领体验技术部下的平台前端技术部，重走玉伯那年的路。

2019 年的玉伯很久不写博客了，他的产品梦和技术梦都在路上，自由梦实现了一半。而另一半也遥遥无期，也近在咫尺。

我想借这个机会从自己的视角小结一下体验技术部这几年的经历，也希望能找到和我们意气相投的未来同事。我们还在路途中，有前进也有折回，各位无论工程师、设计师、产品还是运营，也无论阿里内外，如若有梦，欢迎一起同行。

招聘

简历投递邮箱：[e-mail]

阿里转岗联系：玉伯

岗位：

• 前端/可视化工程师

• 视觉设计师

• 交互设计师

• 产品经理

• 产品运营

体验技术部 - 平台前端技术部详细介绍：https://www.yuque.com/afx/platform/lsouyk

关于本文

作者：@偏右

原文：https://www.yuque.com/afx/blog/those-days

为你推荐