凹凸實驗室的過去與未來

作者：凹凸曼

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

星火

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

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

在這一階段我們也產生了很多優秀的文章，不完全列舉：

• 精致化頁面重構，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，

向全堆疊邁進

而為了應對內部業務的資料服務請求，以及內部諸多的自研平臺系統，凹凸實驗室又自建了后端研發團隊，為各大系統平臺提供堅實的后端服務，為業務封裝各類微服務方便呼叫，同時也在數次大促節點抗住了流量壓力，團隊的技術堆疊已經不再局限于前端了，開始向全堆疊模式轉變，

平臺化轉型

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

破局

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

今年，是凹凸實驗室成立的第 5 年，5 年過去，團隊的技術沉淀已然成型，曾經“開放、開源”的初心理念也未曾忘卻，而在這一年我們對團隊的能力積木做了一次重新的梳理，并思考如何進行體系化串聯，

造積木

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

在圖片和視頻能力上，我們打造了 羚瓏智能設計，可以通過海量圖片模板和基于用戶畫像的智能演算法實作圖片和視頻的智能生成，

在多端適配與框架能力上，我們打造了 Nerv，并從 Nerv 的中范訓出了 Taro， 可以實作一次開發，生成多端應用，

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

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

在資料可視化能力上，我們打造了 樹懶平臺，可以對業務統計和監控資料進行可視化查閱，

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

蓋大廈

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

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

而同時，在研發流程上，我們只有 Taro 本身是遠遠不夠的，Taro 只能解決代碼開發本身和部分工程化的問題，只是研發流程中的一環，而研發流程則是包括開發、除錯、測驗、上線、統計監控完整的鏈路，為了打通研發流程全鏈路，同時統一研發環境，今年我們又開始進行了 一站式云端集成研發平臺 即 Cloud IDE 的探索，嘗試將業務研發、資產沉淀搬到云端，仿佛在走一遍統一上線平臺的老路，但卻是完全不一樣的風景，

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

目前我們現有的產研流程，首先設計稿通過智能代碼能力一鍵生成可二次開發的代碼，代碼匯入 Cloud IDE 中進行開發調整，最后可以通過 Taro 生成多端應用，這是一個線性的程序，而同時，在此程序中也能快速沉淀設計研發資產，設計研發資產也能作為智能代碼智能識別的樣本資料，沉淀設計資產又可以提供給可視化搭建平臺，直接搭建出多端應用，同時羚瓏智能設計將為應用提供個性化的圖片和視頻，豐富應用的運營能力，由此，實作了一個良性的產研倍訓，

目前，我們整體的能力全景圖如下，

啟下

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

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

接下來我們將通過【凹凸技術揭秘】系列文章，為大家分享、剖析凹凸的關鍵技術布局，希望能為業界帶來更多的思想碰撞，也希望能吸引更多有志青年加入我們，共同實作關于技術關于產品關于團隊的夢想，

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

其他

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

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

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

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

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

標籤：JavaScript

上一篇：axios前端加密通訊的處理

下一篇：凹凸技術揭秘·羚瓏智能設計平臺·逐夢設計數智化