只有成爲變化的朋友，才能做的更好，走的更遠。
-- 京東零售 CEO 徐雷
前言—
回望凹凸實驗室五年發展歷程，從早期的純業務支撐，再到工程化實踐、開源探索，如今已在行業多個熱門領域全面開花。我們打造了一系列有影響力的技術產品，構建了大規模的設計中臺，在外部看來似乎有點不務正業，但實際上這些項目持續在公司內部爲大量核心業務進行深度賦能，有力的支撐了業務的快速發展。
靠譜的業務是團隊的安身立命之本。
業務始終是驅動技術發展的重要因素，沒有之一。
-- 凹凸第一人生導師
我們始終秉持從業務中來，回到業務中去的理念，堅信業務纔是團隊的安身立命之本。在研發項目和設計中臺高歌猛進的同時，我們還重度支持着公司內部多個核心業務板塊，涵蓋了平臺產品、大促會場以及營銷互動等方向。這些年支持的業務一直在變，但是研發模式早已不可同日而語，可謂是流水的業務，鐵打的團隊。有了這些年積累的技術基底，我們纔可以心無旁騖，在業務中不斷的去探索和創新。接下來就介紹我們是如何長期深耕平臺產品，以及用不一樣的方式玩轉創意營銷互動。
長期深耕平臺產品—
PC 時代，精雕細琢
回首 5 年前的前端大環境，伴隨着無線時代的來臨，PC 業務逐漸夕陽化，前端的開發方式從刀耕火種踏入工業化進程。彼時的凹凸實驗室爲了高效應對接踵而至的各類業務，推出了前端工程化和資源管理工具 Athena，成功實現業務開發的降本提效。
彷彿命中註定般，團隊迎來了一項重量級業務 —— 京東商城 PC 首頁改版，此時的 PC 首頁作爲京東的門戶，依然承載着鉅額流量，同時對頁面性能、體驗、穩定性的要求與以往相比是有過之無不及。爲了實現首頁改造項目的精品交付，打造性能、體驗、穩定性的全方位極致表現，團隊基於 Athena 工具優化新首頁的開發模式：
得益於 Athena 在前端工程化的能力，輕鬆解決了自動化編譯、代碼處理、依賴分析、文件壓縮等前端開發中的常規問題，使新版首頁的開發效率大大提升。除此之外，爲了使首頁的性能表現更極致，團隊使用了多種手段來優化性能：
-
首屏直出，非首屏前後端分離 -
樓層按需加載與滾動優化 -
JS 資源延遲加載 -
模板、數據分離緩存 -
......
而在用戶體驗和穩定性方面，團隊也探索了各種針對性的優化方案，皆可在 京東 2016 版首頁改版前端總結[1] 中一一查閱。
Athena 非常漂亮的完成了關鍵一仗。然而，改版後首頁的技術選型仍是 jQuery + SeaJS，這在當時各種 MVVM 框架井噴的年代顯得異常老舊了。很快，京東商城 PC 首頁迎來再次改版升級，在不得不兼容 IE8 的背景下，團隊使用了自研的類 React 框架 —— Nerv，相比於 React 以及市面其他同類型框架，Nerv 更具體積輕量，性能高效的特點，能夠完美應對 PC 首頁的高流量場景。同時，基於流操作的 Athena 與當時流行的 webpack 相比顯得相形見絀，團隊亦藉此機會對 Athena 進行升級改造，擁抱 webpack 生態：
這次改版對 PC 首頁的整體框架、開發流程進行了全方位升級，團隊開源的 Athena 和 Nerv 產品也在業務實踐中呈現了非常高的價值，並且，複雜的業務場景反推框架能力升級，形成健康良好的閉環。而在凹凸實驗室團隊眼中，對產品的精雕細琢是無止盡的，PC 首頁在 19 年迎來第三次改版，引入 TypeScript，並且在穩定性、安全性、視覺體驗、無障礙體驗等方面添磚加瓦，使 PC 首頁成爲後 PC 時代的一抹豔麗的夕陽紅。
無線進軍，蹣跚起步
2017 年 1 月，第一批微信小程序正式低調上線，無線時代開始進軍到百家爭鳴的階段。凹凸實驗室團隊抓住了這一新興平臺的機會，率先上線了京東購物小程序。彼時的購物小程序是基於原生小程序的開發模式，並結合實踐場景封裝了一系列頁面/組件基類、網絡請求、本地存儲、頁面跳轉等通用模塊，爲業務開發帶來便利。而隨着項目日益發展壯大（涉及 100+ 頁面），團隊和相關業務方共同在小程序工程化領域不停探索，積累了大量性能提升、持續集成、團隊協作、監控告警等方面的寶貴經驗，在小程序生態領域中蹣跚起步。
擁抱變化，精益求精
繼微信小程序誕生後，越來越多的頭部互聯網公司相繼推出各自的小程序平臺，如京東、支付寶、QQ、字節跳動小程序等等。與此同時，京喜作爲京東零售打造的下沉市場品牌，需要在 H5、微信小程序、QQ 小程序、京喜 APP 、京東小程序等幾大渠道露出，這意味着不得不付出高昂的移植成本。
得益於凹凸實驗室自研的多端統一開發框架 —— Taro，京喜首頁輕鬆實現一套代碼適配多端的能力，極大地提高了業務研發效率。除此，京喜基於原生小程序和 Taro 並存的混合開發模式，沉澱了一系列成熟的混合開發工作流，並驅動 Taro 在性能優化、代碼體積、混合開發等關鍵特性的發展建設，爲類似場景的業務團隊提供了寶貴的經驗。
隨着京喜小程序雙十一上線微信購物入口，用戶規模登頂移動購物行業的 Top1，在如此大的流量挑戰下，任何細微的體驗細節都有可能被放大。爲此，團隊從小程序性能、體驗等幾大維度出發總結出一套精品小程序的打造方法論，作爲指導小程序業務研發的標準規範，並持續對內外部業務團隊賦能。而針對小程序的質量維度，團隊打造了一款多端自動化質量保障體系 —— Tiga，爲多端應用的穩定性保駕護航。前路漫漫，京喜作爲 Taro 的最佳實踐之一，將會在精品化的遠道上精益求精。
輕鬆玩轉營銷互動—
在傳統零售行業，商家爲了提高營業額，會策劃一些促銷活動來提升客流量，例如，香港 SOGO 百貨每年店慶時客流量會達到高峯。而電商公司最爲標誌性的業務，就是營銷類需求。這一類需求週期短、時效性高，每到大促週期內即呈現我方唱罷你方登場的熱鬧場面，全公司上上下下無不投入到這盛況中，凹凸也不例外。
營銷類需求根據交互形式以及運營目的，可以分爲兩大類：大促會場類，與互動營銷類。
億級流量大促會場
大促活動在全年整體活動中佔據非常重要的地位，在活動期間，用戶的消費衝動會異常高漲。包括京東 618、雙十一之類，都屬於典型的大促活動，這類活動已經脫離了促銷的意義，他們早已成爲了平臺、商家和用戶的一個習慣。對於這類億級訪問量、強時效性、多渠道的活動，開發重點有以下 4 點：
-
加載性能和錯誤容災 -
適配兼容 -
新業務落地 -
高精度的動效還原
今年以來我們開發的部分會場有：
需求時代，定製開發
大促業務對開發質量要求非常高，由於強時效性，需求往往是井噴式爆發。剛接手大促項目時，對於各個會場，是按照具體需求進行定製化開發的：團隊統一技術框架，採用本地開發模式，由具體開發者和業務對接，自由發揮來滿足業務訴求。在這個模式下，能快速響應各個會場的個性化需求。但缺點也顯而易見：每個需求有一套自有的業務邏輯，同樣的業務代碼散落在各個倉庫中。在多個需求中，出現類似的兼容性問題。複用上一次的業務邏輯進行修改，產生冗餘代碼片段。這些重複開發以及修復 bug，讓我們陷入需求困境，我們需要利用工具和系統來提效降本。
規模化開發
近幾年團隊技術能力的高速發展，給了我們新思路：通過工程化和原子組件的組合，建立標準開發流程，從而實現了“規模化”開發。既能滿足高定製性，又能解決業務量的遞增。cli 幫我們搭建頁面框架，收口基礎邏輯，按照規範統一實現；原子組件庫 EUI 抽離業務邏輯，和上游設計團隊共建營銷設計語言，在增加複用率的同時，又提升了開發的質量。
標準化開發，讓我們可以高效，高質量的交付需求，得到了業務方的一致好評。
千變萬化營銷互動
營銷互動交互簡單、視覺衝擊力強的頁面展示形式，多用於品牌推廣、活動廣告等目的，兼具動畫與互動交互。這一類的需求主要技術重點在於多機型 UI 適配，以及多於一般頁面的動效展示，極其考驗網頁自適應及動效開發的能力。
精細起家
與部門整體研發模式發展路線一致，營銷互動的開發同樣從石器時代發展而來。在這一階段，設計的創意與動效的靈動產生了極佳的化學反應，出現了不少精品案例，爲部門互動開發的口碑奠定了初步的基礎。
在此期間，部門沉澱了不少動效開發相關的總結：以電影之眼看 CSS3 動畫[2]css3 animation 屬性衆妙[3]
由於與平臺類業務需求差異性大，且有效週期短，早期的營銷互動開發常常是一位同學在本地開發，人工部署到統一的服務器即結束，使用何種技術棧，用到哪些開發工具，均由開發個人習慣決定。這種開發模式，且不提多人協作以及代碼共享的問題，首先在開發效率上就存在極大的限制：每個人每個項目都需要重新設定一套自適應方案、滑屏等觸屏交互邏輯，最佳實踐無法複用，需求複雜性具備一定的上限。因此在這一階段，所能實現的營銷互動大多由內容驅動，交互形式侷限於滑屏類。
不過正如《凹凸技術揭祕·羚瓏頁面可視化·成長蛻變之路》中提到的，由於滑屏類需求的形式單一性，反而催生了 Hi Page 這樣的互動可視化搭建工具，這也是部門最早期的 SaaS 服務。
告別刀耕火種
以 Athena 的出現爲界，藉助其前端工程化的能力，我們開始將營銷互動相關的 REM 自適應方案、代碼圖片壓縮等預處理自動化，提升了開發效率的同時，也爲複雜遊戲類的開發奠定了基礎。在業務的推進中，又隨之誕生了更爲專注於互動開發的腳手架 ELF（ELF — 靈活可擴展的 HTML5 構建工具[4]），後將功能併入 Athena2，完成了部門內部的腳手架統一。
在這一時期，輸出了更爲多樣的精品案例，開始涉足較爲複雜的小遊戲，並在此基礎上，創辦了互動案例推薦期刊《拇指期刊》，進一步深挖行業優質案例。
在互動案例上持續高質量高效率的輸出，進一步鞏固了凹凸在互動開發上的優秀口碑，隨之而來大量有創意互動合作意願的業務方，包括當年春節核級難度、核級重要的多機互動，《一炮而紅》
在長城上用一萬（？）部手機玩兒的互動，我就問哪裏有第二個
基於大量精品遊戲經驗的沉澱，部門開闢了 H5 遊戲開發專欄，篇篇精品，醒來還是很感動：知乎專欄：H5 遊戲開發[5]
結合中臺，邁入統一數字化
隨着部門整體戰略的調整，資產沉澱及開發流程統一提上了日程。部門在不斷的踩坑中進行調整，形成了一套基於夸克組件庫與羚瓏可視化搭建相結合的互動開發流程，實現資產管理數字化、積木化。
新的開發流程契合了資產沉澱與流程統一的戰略方向，已成功落地了羚瓏 SNS 互動營銷場景，並正陸續接入新的互動業務需求，探索業務落地新流程的最佳實踐。
同時，EUI 在大促業務中的出彩，引來了其他運營同學的諮詢。爲了賦能更多的業務方，我們把 EUI 組件同步至夸克，結合羚瓏中臺，方便無開發資源的業務團隊使用。
另一方面，我們將一些有趣的會場形式固化，通過封裝組件，沉澱頁面模板，將項目經驗提供給更多的用戶。
公司每年促銷活動不計其數，設計趨勢在變，內容形式在變。我們需要更加科學的數據分析來支撐業務決策，選擇更符合場景的方案。
因此我們從業務訴求出發，通過數懶對活動數據的跟蹤分析，生成可視化數據報告，爲決策者提供專業意見。數懶完成了從業務中沉澱運營經驗，賦能給更多業務的正向循環。
未來展望—
隨着行業不斷變革，以及各種技術基礎設施的持續完善，催生出了大量新的思潮。以前看似遙不可及的領域，逐漸雨後春筍般冒了出來。對於未來的業務研發模式，在我們腦海中已經描繪出了一幅理想的藍圖，並且在一步步實現它。
未來，我們將開發流程進行雲端化，由 Tide 來承載研發全鏈路，打造一體化研發工作臺，由傳統手工作坊進入到工業化生產時代。
從此再也不用被本地各種環境問題來回折騰，隨手打開瀏覽器即可開始擼碼。啓動不同類型的項目時，無需從零開始，使用內置模版即可擁有現成的最佳實踐方案。開發模式也由傳統的頁面開發轉換到組件開發上來，這樣既可以充分利用已有的研發資產，通過羚瓏可視化搭建平臺快速拼裝出頁面，同時又能很好的將組件沉澱下來，不斷的擴充研發資產庫，爲智能代碼提供更加豐富的樣本。更進一步我們可以利用 Deco 進行設計稿一鍵生成多端代碼，最大程度解放生產力，實現價值最大化。
參考資料
京東 2016 版首頁改版前端總結: https://aotu.io/notes/2016/12/26/jd-index-2016-summary/
[2]以電影之眼看 CSS3 動畫: https://jelly.jd.com/article/5da04f5eb50eec01579ac790
[3]css3 animation 屬性衆妙: https://jelly.jd.com/article/6006b1045b6c6a01506c87ca
[4]ELF — 靈活可擴展的 HTML5 構建工具: https://jelly.jd.com/article/5c653171fa5bcb0060f0b204
[5]知乎專欄：H5 遊戲開發: https://zhuanlan.zhihu.com/snsgame
凹凸揭祕系列
—
感謝一直關注凹凸實驗室的讀者，爲了提供更優質的內容，希望您能抽出幾分鐘時間，完成一個小調查，明年凹凸公衆號的內容由你決定。
加入凹凸實驗室開放、開源、專業、有愛、有夢的大家庭？掃碼下面的二維碼瞭解職位。
還沒有關注凹凸實驗室的讀者們，關注我們吧，我們一個月只有 4 次推送機會，我們很珍惜每一次推送，不會讓你失望的。
本文分享自微信公衆號 - 凹凸實驗室（AOTULabs）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。