凹凸實驗室的過去與將來

做者：凹凸曼

https://www.qq.com/video/m321...

凹凸實驗室隸屬於京東零售用戶體驗設計部（JDC），成立於 2015 年秋冬之交，誕生自深圳前海之濱，至今已走過 5 個年頭，5 年的時光穿梭而過，凹凸實驗室也不斷髮展壯大，從曾經專一前端的團隊成長爲現在涵蓋先後端、全棧、算法、測試各種方向的全能型研發團隊，工做模式也從傳統的人力密集型研發轉向創新型平臺體系化研發，現在，凹凸的各種技術輸出與沉澱在業界影響深遠。

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=m3215ilu1ay" allowFullScreen="true"></iframe>

星火

2015 年，凹凸實驗室的前身多終端研發部成立恰好一年，彼時的多終端研發部，雖然是一個擁有 20 多位開發人員的獨立前端研發部門，但更多的是在支撐着公司內部的各類業務的研發，從微信手 Q 的購物業務到京東商城的營銷活動、拍拍網，以及京東雲的大改版，業務的類別五花八門，做爲一個工線支持部門，天天在各種業務開發中穿插，協助各種業務需求的開發。

<div style="text-align: center; margin-bottom: 20px; color: #999">2015 加入凹凸實驗室的同仁</div>

在此期間，部門也產生了不少精品業務，憑藉着在 H5 動畫方面的造詣，在京東內部小有名氣，每到一些大促的時間節點都能收到不少的業務需求，這讓團隊開始在京東內部開始嶄露頭角。

<div style="text-align: center; margin-bottom: 20px;">H5 動畫做品合集</div>

在這一階段咱們也產生了不少優秀的文章，不徹底列舉：

• 精緻化頁面重構，by NONO
• 以電影之眼看CSS3動畫（一），by 凹凸一姐
• 以電影之眼看CSS3動畫（二），by 凹凸一姐
• 前端優化不徹底指南，by 暖暖

同時，在沉澱了大量精品的 H5 業務以後，咱們也開始嘗試打造一個可視化搭建工具 HiPage，經過拖拽搭建的方式就能將沉澱的 H5 動畫元素組合出新的 H5 頁面，實現快速上線，獲得業務方的一陣驚歎。這是咱們第一個頗具意義的技術產品，它既服務好了業務方，也知足了咱們做爲技術人員對技術的追求，同時也爲咱們埋下了關於團隊方向思考的引子。

做爲技術團隊，咱們一直在思考，咱們所能作的是否僅僅只是服務好業務就夠了？或者換一個角度，做爲一個工線部門，咱們除了努力把業務作好，還能再作些什麼？

2015 年 9 月，一個燥熱的週五晚上，在白石洲的雞煲大排檔裏，關於上面的問題，關於團隊的發展，關於團隊的將來，團隊裏的幾位大佬一邊吃着雞煲，一邊激烈討論。最終，留着一頭飄逸長髮的老黃掐滅手裏的煙說道，「咱們要作深圳最知名的前端團隊」，在場的你們聽罷後都陷入了沉思。

彼時落入你們心中的是一點點星火，彷佛點亮一絲絲前方的光明，可是，星星之火，能夠燎原。

一個月後，凹凸實驗室正式成立，朝着 「要作深圳最知名的前端團隊」 這個目標，團隊的全部小夥伴都充滿幹勁。很快，咱們和設計師通力合做，設計了沿用至今的團隊 Logo。

同時也肯定了咱們的團隊的理念：開放、開源，凹凸實驗室的名字也來源於此，這一理念灌注在團隊血液中，爲以後的技術產品研發奠基基礎。全新的團隊官網也創建起來了，這個官網承載了不只僅是團隊小夥伴的技術文章，同時也是一個個關於技術夢想的追求。團隊內也開始舉辦各種技術分享、編程馬拉松，組織各小組的 Code Review，整個團隊的技術氛圍開始造成，凹凸如一個蹣跚習步的孩童，不斷摸索，不斷向前，磕磕碰碰，但不失朝氣。

沉舟側畔千帆過，病樹前頭萬木春。

成長

回顧咱們思考的疑問，咱們在建設一個具備必定規模的前端團隊的時候，其目的是否僅僅是服務好業務？

咱們給出的答案是否認的。

正如凹凸靈魂導師老黃的文章《關於前端團隊架構的思考》中所說的。

這個就比如一我的活着不能止於「有食可進有衣可穿」這種基礎的物質條件，團隊也一樣有「精神層面」的內涵，具體如：

• 影響力
• 創新力
• 技術視野

這些「精神層面」的東西看似很虛，但實際上會以另一些形式正向的反饋給團隊，間接影響團隊服務業務的過程甚至結果。
建設團隊在公司內外的影響力，能夠營造團隊的專業口碑，吸引優秀的專業人才主動加盟，而優秀的人才對於團隊高效處理業務需求或研發需求的能力具備促進做用。

因而咱們開始關注如何服務好業務的同時，提煉咱們本身的技術產品，以業務爲盾，以技術產品爲劍，去打造咱們夢想中的技術團隊。

從業務中來，到業務中去

時間來到 2015 年底，此時凹凸承接的業務呈現暴漲的趨勢，各種業務接踵而至，爲了更好地應對業務增加帶來的人力瓶頸，咱們加速探索前端工程化，指望使用工程化的手段來解決前端模板化、組件化、自動化開發的問題，並推出了凹凸實驗室第一個比較完善的開源產品 Athena。固然以如今的眼光來看 Athena 並非一個優秀的產品，它的文檔很糟糕，可擴展性幾乎爲 0，但在當時仍是支撐起了團隊大部分業務的開發，爲業務研發增效提供源源不斷的動力。請參見咱們是如何作好前端工程化和靜態資源管理。

在打磨好工程化工具後，咱們團隊也終於迎來了很是重量級的業務——京東商城 PC 首頁改版，此時 PC 首頁依然承載着很是多的流量，改版的工做備受重視，而同時首頁的複雜度特別是對性能、體驗、穩定性的要求遠遠超出了咱們過往的項目，秉承團隊過往打造精品業務的理念，咱們想要將 PC 首頁這個項目作到全方位的極致。因此承接項目的小夥伴壓力山大，在奔赴北京熬了一個多月後，項目終於順利上線。當雙 11 前夕，線上首頁穩定順暢地出如今辦公室一個個顯示器上的時候，咱們難掩心中的激動，互相擊掌慶祝彼此的勝利。具體請參見京東2016版首頁改版前端總結。

而在 PC 首頁上線以後，爲了進行更好地項目管理，同時保證項目流程自動、穩定地運行，咱們開發了統一上線平臺，能夠進行項目管理、自動構建、構建後代碼 diff 、項目操做日誌以及一鍵發佈和回滾等操做，極大地規範了項目流程管理工做，同時將項目的上線統一進行管控，大大下降了項目出現線上問題的可能性，開始爲工程化補全串聯研發流程的工做，也爲後續咱們開發一站式雲端產研平臺提供了寶貴經驗。

可是工程化帶來的提效，遠遠跟不上業務需求增長的速度，爲了應對層出不窮的業務需求，17 年，咱們在 HiPage 的基礎之上，繼續探索頁面可視化搭建，指望經過建設高可用的可視化搭建引擎，配合海量的（想象中）模板和組件，產出一套 No Code 系統，讓運營或者能夠本身搭建頁面直接上線。因而誕生了內部代號爲「Atom」 的頁面搭建平臺，幫助內部快速上線了幾千個頁面，凹凸實驗室在業務方那兒成爲了「活兒好」的代名詞。

一樣是 17 年，隨着京東商城業務的蓬勃發展，傳統的設計師做圖，業務方套模板生產廣告圖等物料的方式已然很是落後，生產效率低下極度依賴人力，同時也沒法知足愈來愈多的個性化圖片需求，爲了應對這樣的場景，咱們開始打磨羚瓏智能設計平臺，經過海量圖片模板和基於用戶數據實時合圖能力，解放了設計師的雙手，也節約了業務方得到高質量圖片的成本，讓每一個人都能輕鬆完成圖片製做。

擁抱開源技術的初心

依然是 17 年，這一年咱們在不斷提高業務支持，圍繞業務打磨技術產品的同時，在開源上咱們也在不斷奮進。這一年京東商城的前端主流技術棧還停留在 jQuery，而對於咱們的業務來講已經沒法忍受 jQuery 帶來的研發效率低下的困境，咱們開始探索新的技術棧，通過縝密的調研後，開始着手開發類 React 框架 Nerv，在內部業務通過一番驗證後，開始在 GitHub 開源。憑藉着當時團隊大牛澈哥的出口轉內銷的推廣策略，Nerv 開源第一天登上 GitHub 的 trending 榜，迅速斬獲了上千 Star，這對於以開源爲理念的咱們來講，無疑是振奮人心的。請參見Nerv - 京東高性能前端框架。

時間匆匆忙忙來到 18 年，彼時對於業務來講又迎來新的挑戰，各種小程序平臺層出不窮，爲了應對業務拓展渠道的需求，咱們開始探索多端統一開發解決方案，並迅速推出了 Taro，實現開發一次，同時生成多端應用，憑藉着對 React 語法的獨特支持和一天 3 個版本火線迭代的速度，Taro 成爲諸多開發者喜好的解決方案，幫助不少業務上線多端應用，Taro 也成爲凹凸實驗室的一張技術名片。請參見多端統一開發框架 - Taro。

<div style="text-align: center; margin-bottom: 20px; color: #999">Taro stars 數破 2w 慶祝會</div>

向全棧邁進

而爲了應對內部業務的數據服務請求，以及內部諸多的自研平臺系統，凹凸實驗室又自建了後端研發團隊，爲各大系統平臺提供堅實的後端服務，爲業務封裝各種微服務方便調用，同時也在數次大促節點抗住了流量壓力，團隊的技術棧已經再也不侷限於前端了，開始向全棧模式轉變。

平臺化轉型

18 年 19年，咱們在不斷對咱們的各種工具系統進行打磨，作好能力儲備。而與此同時，中臺的概念興起，咱們團隊也開始探索設計研發在中臺領域的地位，開始打造公司的設計中臺。咱們深入地認識到團隊除了對人才的培養以外，更應該關注團隊研發資產的沉澱，工具、平臺系統、研發組件這些都是團隊寶貴的研發資產。而除了不斷進行研發能力建設和儲備的同時，咱們應該將這些已有的能力積木串聯起來，成體系化地對外進行賦能，從而實現傳統的人力密集型研發向創新型平臺體系化研發的轉變。

破局

2020 年，20 年代的第一年，從開年就註定是不尋常的一年。這一年咱們也從寶安中心的龍光大廈搬到了前海內的卓越前海壹號。

今年，是凹凸實驗室成立的第 5 年，5 年過去，團隊的技術沉澱已然成型，曾經「開放、開源」的初心理念也不曾忘卻。而在這一年咱們對團隊的能力積木作了一次從新的梳理，並思考如何進行體系化串聯。

造積木

回顧過往，咱們已經作了很是多的技術儲能，而且團隊的技術產品發展是全方位地進行，從智能設計到產品研發，基本每一個領域都有咱們探索的印記。

在圖片和視頻能力上，咱們打造了 羚瓏智能設計，能夠經過海量圖片模板和基於用戶畫像的智能算法實現圖片和視頻的智能生成。

在多端適配與框架能力上，咱們打造了 Nerv，並從 Nerv 的中孵化出了 Taro， 能夠實現一次開發，生成多端應用。

在可視化搭建能力上，咱們從 HiPage 時代開始一步步探索， 到 Atom 時代能夠搭建各種營銷頁面，再到現現在的羚瓏可視化搭建，能夠直接拖拽生成多端應用，而且覆蓋營銷、店鋪等諸多場景。

在研發資產沉澱能力上，咱們打造了 夸克資產平臺，已經沉澱了海量的研發組件、圖片、字體、動效等研發資產。

在數據可視化能力上，咱們打造了 樹懶平臺，能夠對業務統計和監控數據進行可視化查閱。

在服務端能力上，咱們打造了專業的 服務端團隊和系統，爲各種業務和平臺需求提供專業可靠的服務端能力支撐。

蓋大廈

咱們擁有諸多的能力積木，可是若是不能進行體系化串聯，咱們就不能進行產品化包裝，以及對外進行技術賦能。

咱們發現，縱觀整個產研流程，將咱們的能力積木放入以後，在某些環節依然有所缺失，例如，從設計師到研發，咱們沒有很好地進行對接，當有個性化需求須要開發以及須要進行研發組件沉澱時，咱們依然須要人工將設計稿進行還原而後進行業務邏輯綁定開發，不只僅是滯後咱們的研發效率，同時對咱們的設計研發體系來講也是一種斷層，因此，今年咱們進行了 設計稿一鍵生成代碼 的探索，嘗試對設計研發這一環節進行能力補全，同時提高咱們的產研效率。

而同時，在研發流程上，咱們只有 Taro 自己是遠遠不夠的，Taro 只能解決代碼開發自己和部分工程化的問題，只是研發流程中的一環，而研發流程則是包括開發、調試、測試、上線、統計監控完整的鏈路，爲了打通研發流程全鏈路，同時統一研發環境，今年咱們又開始進行了 一站式雲端集成研發平臺 即 Cloud IDE 的探索，嘗試將業務研發、資產沉澱搬到雲端，彷彿在走一遍統一上線平臺的老路，但倒是徹底不同的風景。

設計稿一鍵生成代碼 與 一站式雲端集成研發平臺 成爲了補全產研體系化建設的兩塊拼圖，讓產研流程能夠成體系化進行串聯。

目前咱們現有的產研流程，首先設計稿經過智能代碼能力一鍵生成可二次開發的代碼，代碼導入 Cloud IDE 中進行開發調整，最後能夠經過 Taro 生成多端應用，這是一個線性的過程，而同時，在此過程當中也能快速沉澱設計研發資產，設計研發資產也能做爲智能代碼智能識別的樣本數據，沉澱設計資產又能夠提供給可視化搭建平臺，直接搭建出多端應用，同時羚瓏智能設計將爲應用提供個性化的圖片和視頻，豐富應用的運營能力。由此，實現了一個良性的產研閉環。

目前，咱們總體的能力全景圖以下。

啓下

立足業務，技術儲能是過去五年凹凸實驗室的主題。

而智能化設計研發體系將繪製凹凸實驗室將來 5 年的技術產品的夢想畫卷。

接下來咱們將經過【凹凸技術揭祕】系列文章，爲你們分享、剖析凹凸的關鍵技術佈局，但願能爲業界帶來更多的思想碰撞，也但願能吸引更多有志青年加入咱們，共同實現關於技術關於產品關於團隊的夢想。

年光似鳥翩翩過，世事如棋局局新，惟有不忘初心，堅守本心，方能乘風破浪，濟滄海。

其餘

感謝一直關注凹凸實驗室的讀者，爲了提供更優質的內容，但願您能抽出幾分鐘時間，完成一個小調查，明年凹凸公衆號的內容由你決定。點擊直達

加入凹凸實驗室開放、開源、專業、有愛、有夢的你們庭？點擊直達

尚未關注「凹凸實驗室」的讀者們，關注咱們吧，咱們一個月只有 4 次推送機會，咱們很珍惜每一次推送，不會讓你失望的。微信搜索「凹凸實驗室」關注便可。

---

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章。