作者：凹凸曼
凹凸實驗室隸屬於京東零售使用者體驗設計部（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），不定時推送文章：
