作者：凹凸曼
凹凸實驗室隸屬于京東零售使用者體驗設計部（JDC），成立于 2015 年秋冬之交，誕生自深圳前海之濱，至今已走過 5 個年頭，5 年的時光穿梭而過，凹凸實驗室也不斷發展壯大，從曾經專注前端的團隊成長為如今涵蓋前後端、全棧、算法、測試各類方向的全能型研發團隊，工作模式也從傳統的人力密集型研發轉向創新型平台體系化研發，如今，凹凸的各類技術輸出與沉澱在業界影響深遠。
2015 年，凹凸實驗室的前身多終端研發部成立剛好一年，彼時的多終端研發部，雖然是一個擁有 20 多位開發人員的獨立前端研發部門，但更多的是在支撐着公司内部的各種業務的研發，從微信手 Q 的購物業務到京東商城的營銷活動、拍拍網，以及京東雲的大改版，業務的類别五花八門，作為一個工線支援部門，每天在各類業務開發中穿插，協助各類業務需求的開發。
2015 加入凹凸實驗室的同仁
在此期間，部門也産生了很多精品業務，憑借着在 H5 動畫方面的造詣，在京東内部小有名氣，每到一些大促的時間節點都能收到很多的業務需求，這讓團隊開始在京東内部開始嶄露頭角。
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。
Taro stars 數破 2w 慶祝會
而為了應對内部業務的資料服務請求，以及内部諸多的自研平台系統，凹凸實驗室又自建了後端研發團隊，為各大系統平台提供堅實的後端服務，為業務封裝各類微服務友善調用，同時也在數次大促節點抗住了流量壓力，團隊的技術棧已經不再局限于前端了，開始向全棧模式轉變。
18 年 19年，我們在不斷對我們的各類工具系統進行打磨，做好能力儲備。而與此同時，中台的概念興起，我們團隊也開始探索設計研發在中台領域的地位，開始打造公司的設計中台。我們深刻地認識到團隊除了對人才的培養之外，更應該關注團隊研發資産的沉澱，工具、平台系統、研發元件這些都是團隊寶貴的研發資産。而除了不斷進行研發能力建設和儲備的同時，我們應該将這些已有的能力積木串聯起來，成體系化地對外進行賦能，進而實作傳統的人力密集型研發向創新型平台體系化研發的轉變。
2020 年，20 年代的第一年，從開年就注定是不尋常的一年。這一年我們也從寶安中心的龍光大廈搬到了前海内的卓越前海壹号。
今年，是凹凸實驗室成立的第 5 年，5 年過去，團隊的技術沉澱已然成型，曾經“開放、開源”的初心理念也未曾忘卻。而在這一年我們對團隊的能力積木做了一次重新的梳理，并思考如何進行體系化串聯。
回顧過往，我們已經做了非常多的技術儲能，并且團隊的技術産品發展是全方位地進行，從智能設計到産品研發，基本每個領域都有我們探索的印記。
在圖檔和視訊能力上，我們打造了 羚珑智能設計，可以通過海量圖檔模闆和基于使用者畫像的智能算法實作圖檔和視訊的智能生成。
在多端适配與架構能力上，我們打造了 Nerv，并從 Nerv 的中孵化出了 Taro， 可以實作一次開發，生成多端應用。
在可視化搭建能力上，我們從 HiPage 時代開始一步步探索， 到 Atom 時代可以搭建各類營銷頁面，再到現如今的羚珑可視化搭建，可以直接拖拽生成多端應用，并且覆寫營銷、店鋪等諸多場景。
在研發資産沉澱能力上，我們打造了 誇克資産平台，已經沉澱了海量的研發元件、圖檔、字型、動效等研發資産。
在資料可視化能力上，我們打造了 樹懶平台，可以對業務統計和監控資料進行可視化查閱。
在服務端能力上，我們打造了專業的 服務端團隊和系統，為各類業務和平台需求提供專業可靠的服務端能力支撐。
我們擁有諸多的能力積木，但是如果不能進行體系化串聯，我們就不能進行産品化包裝，以及對外進行技術賦能。
我們發現，縱觀整個産研流程，将我們的能力積木放入之後，在某些環節依然有所缺失，例如，從設計師到研發，我們沒有很好地進行對接，當有個性化需求需要開發以及需要進行研發元件沉澱時，我們依然需要人工将設計稿進行還原然後進行業務邏輯綁定開發，不僅僅是滞後我們的研發效率，同時對我們的設計研發體系來說也是一種斷層，是以，今年我們進行了 設計稿一鍵生成代碼 的探索，嘗試對設計研發這一環節進行能力補全，同時提升我們的産研效率。
而同時，在研發流程上，我們隻有 Taro 本身是遠遠不夠的，Taro 隻能解決代碼開發本身和部分工程化的問題，隻是研發流程中的一環，而研發流程則是包括開發、調試、測試、上線、統計監控完整的鍊路，為了打通研發流程全鍊路，同時統一研發環境，今年我們又開始進行了 一站式雲端內建研發平台 即 Cloud IDE 的探索，嘗試将業務研發、資産沉澱搬到雲端，仿佛在走一遍統一上線平台的老路，但卻是完全不一樣的風景。
設計稿一鍵生成代碼 與 一站式雲端內建研發平台 成為了補全産研體系化建設的兩塊拼圖，讓産研流程可以成體系化進行串聯。
目前我們現有的産研流程，首先設計稿通過智能代碼能力一鍵生成可二次開發的代碼，代碼導入 Cloud IDE 中進行開發調整，最後可以通過 Taro 生成多端應用，這是一個線性的過程，而同時，在此過程中也能快速沉澱設計研發資産，設計研發資産也能作為智能代碼智能識别的樣本資料，沉澱設計資産又可以提供給可視化搭建平台，直接搭建出多端應用，同時羚珑智能設計将為應用提供個性化的圖檔和視訊，豐富應用的營運能力。由此，實作了一個良性的産研閉環。
目前，我們整體的能力全景圖如下。
立足業務，技術儲能是過去五年凹凸實驗室的主題。
而智能化設計研發體系将繪制凹凸實驗室未來 5 年的技術産品的夢想畫卷。
接下來我們将通過【凹凸技術揭秘】系列文章，為大家分享、剖析凹凸的關鍵技術布局，希望能為業界帶來更多的思想碰撞，也希望能吸引更多有志青年加入我們，共同實作關于技術關于産品關于團隊的夢想。
年光似鳥翩翩過，世事如棋局局新，唯有不忘初心，堅守本心，方能乘風破浪，濟滄海。
感謝一直關注凹凸實驗室的讀者，為了提供更優質的内容，希望您能抽出幾分鐘時間，完成一個小調查，明年凹凸公衆号的内容由你決定。
加入凹凸實驗室開放、開源、專業、有愛、有夢的大家庭？