摘要：隨著業務的爆發，團隊人數迅速增長起來，團隊名也從前端開發部改名成體驗技術部，意在體現前端工程師的核心競爭力用技術解決產品體驗問題。前后端分離的研發模式在社區流行起來，體驗技術部最先實踐的是基于的應用層方案。

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 前端社區?，F在回頭看來有點天真，雖然是開源技術，當時走的依然是一條前端輪子自研和前端社區自建的道路，最終這條路走沒有成功，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 加入了』。號稱國內最好的前端團隊，今天比以往都更需要新鮮血液的加入?！旱搅似碌祝椭荒芟蛏献吡恕?/p>

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 年的玉伯很久不寫博客了，他的產品夢和技術夢都在路上，自由夢實現了一半。而另一半也遙遙無期，也近在咫尺。

這是一篇部門招聘貼，我想借這個機會從自己的視角小結一下體驗技術部這幾年的經歷，也希望能找到和我們意氣相投的未來同事。我們還在路途中，有前進也有折回，各位無論工程師、設計師、產品還是運營，也無論阿里內外，如若有夢，歡迎一起同行。

簡歷投遞郵箱：afx-platform-talent@list.alibaba-inc.com

阿里轉崗聯系：玉伯

崗位：

前端/可視化工程師

視覺設計師

交互設計師

產品經理

產品運營

體驗技術部 - 平臺前端技術部詳細介紹：www.yuque.com/afx/platfor…

文中時間可能有出入，人名均為阿里花名。

參考鏈接：

畢業十年與我的三個夢

Web 研發模式演變

關于前端的那些事

阿里前端的困局與突圍

Arale 發布預告 - 玉伯也叫黑俠微博

關于 Arale 的過去、現在和未來

關于我們 - ECharts

語雀是什么？

沒戲，做不到，不存在的“不可能三角”

螞蟻體驗科技