凹凸技術揭祕 · 技術精進與業務發展兩不誤

只有成爲變化的朋友，才能作的更好，走的更遠。

-- 京東零售 CEO 徐雷

前言

回望凹凸實驗室五年發展歷程，從早期的純業務支撐，再到工程化實踐、開源探索，現在已在行業多個熱門領域全面開花。咱們打造了一系列有影響力的技術產品，構建了大規模的設計中臺，在外部看來彷佛有點遊手好閒，但實際上這些項目持續在公司內部爲大量核心業務進行深度賦能，有力的支撐了業務的快速發展。

靠譜的業務是團隊的安身立命之本。

業務始終是驅動技術發展的重要因素，沒有之一。

-- 凹凸第一人生導師

咱們始終秉持從業務中來，回到業務中去的理念，堅信業務纔是團隊的安身立命之本。在研發項目和設計中臺高歌猛進的同時，咱們還重度支持着公司內部多個核心業務板塊，涵蓋了平臺產品、大促會場以及營銷互動等方向。這些年支持的業務一直在變，可是研發模式早已不可同日而語，可謂是流水的業務，鐵打的團隊。有了這些年積累的技術基底，咱們才能夠心無旁騖，在業務中不斷的去探索和創新。接下來就介紹咱們是如何長期深耕平臺產品，以及用不同的方式玩轉創意營銷互動。

長期深耕平臺產品

PC 時代，精雕細琢

回首 5 年前的前端大環境，伴隨着無線時代的來臨，PC 業務逐漸夕陽化，前端的開發方式從刀耕火種踏入工業化進程。彼時的凹凸實驗室爲了高效應對接踵而至的各種業務，推出了前端工程化和資源管理工具 Athena，成功實現業務開發的降本提效。

彷彿命中註定般，團隊迎來了一項重量級業務 —— 京東商城 PC 首頁改版，此時的 PC 首頁做爲京東的門戶，依然承載着鉅額流量，同時對頁面性能、體驗、穩定性的要求與以往相比是有過之無不及。爲了實現首頁改造項目的精品交付，打造性能、體驗、穩定性的全方位極致表現，團隊基於 Athena 工具優化新首頁的開發模式：

得益於 Athena 在前端工程化的能力，輕鬆解決了自動化編譯、代碼處理、依賴分析、文件壓縮等前端開發中的常規問題，使新版首頁的開發效率大大提高。除此以外，爲了使首頁的性能表現更極致，團隊使用了多種手段來優化性能：

• 首屏直出，非首屏先後端分離
• 樓層按需加載與滾動優化
• JS 資源延遲加載
• 模板、數據分離緩存
• ......

而在用戶體驗和穩定性方面，團隊也探索了各類針對性的優化方案，皆可在 京東2016版首頁改版前端總結 中一一查閱。

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、字節跳動小程序等等。與此同時，京喜做爲京東零售打造的下沉市場品牌，須要在 H五、微信小程序、QQ 小程序、京喜 APP 、京東小程序等幾大渠道露出，這意味着不得不付出高昂的移植成本。

得益於凹凸實驗室自研的多端統一開發框架 —— Taro，京喜首頁輕鬆實現一套代碼適配多端的能力，極大地提升了業務研發效率。除此，京喜基於原生小程序和 Taro 並存的混合開發模式，沉澱了一系列成熟的混合開發工做流，並驅動 Taro 在性能優化、代碼體積、混合開發等關鍵特性的發展建設，爲相似場景的業務團隊提供了寶貴的經驗。

隨着京喜小程序雙十一上線微信購物入口，用戶規模登頂移動購物行業的 Top1，在如此大的流量挑戰下，任何細微的體驗細節都有可能被放大。爲此，團隊從小程序性能、體驗等幾大維度出發總結出一套精品小程序的打造方法論，做爲指導小程序業務研發的標準規範，並持續對內外部業務團隊賦能。而針對小程序的質量維度，團隊打造了一款多端自動化質量保障體系 —— Tiga，爲多端應用的穩定性保駕護航。前路漫漫，京喜做爲 Taro 的最佳實踐之一，將會在精品化的遠道上精益求精。

輕鬆玩轉營銷互動

在傳統零售行業，商家爲了提升營業額，會策劃一些促銷活動來提高客流量，例如，香港SOGO百貨每一年店慶時客流量會達到高峯。而電商公司最爲標誌性的業務，就是營銷類需求。這一類需求週期短、時效性高，每到大促週期內即呈現我方唱罷你方登場的熱鬧場面，全公司上上下下無不投入到這盛況中，凹凸也不例外。

營銷類需求根據交互形式以及運營目的，能夠分爲兩大類：大促會場類，與互動營銷類。

億級流量大促會場

大促活動在整年總體活動中佔據很是重要的地位，在活動期間，用戶的消費衝動會異常高漲。包括京東61八、雙十一之類，都屬於典型的大促活動，這類活動已經脫離了促銷的意義，他們早已成爲了平臺、商家和用戶的一個習慣。 對於這類億級訪問量、強時效性、多渠道的活動，開發重點有如下4點：

• 加載性能和錯誤容災
• 適配兼容
• 新業務落地
• 高精度的動效還原

今年以來咱們開發的部分會場有：

需求時代，定製開發

大促業務對開發質量要求很是高，因爲強時效性，需求每每是井噴式爆發。剛接手大促項目時，對於各個會場，是按照具體需求進行定製化開發的： 團隊統一技術框架，採用本地開發模式，由具體開發者和業務對接，自由發揮來知足業務訴求。 在這個模式下，能快速響應各個會場的個性化需求。但缺點也顯而易見： 每一個需求有一套自有的業務邏輯，一樣的業務代碼散落在各個倉庫中。 在多個需求中，出現相似的兼容性問題。 複用上一次的業務邏輯進行修改，產生冗餘代碼片斷。 這些重複開發以及修復bug，讓咱們陷入需求困境，咱們須要利用工具和系統來提效降本。

規模化開發

近幾年團隊技術能力的高速發展，給了咱們新思路：經過工程化和原子組件的組合，創建標準開發流程，從而實現了「規模化」開發。既能知足高定製性，又能解決業務量的遞增。 cli幫咱們搭建頁面框架，收口基礎邏輯，按照規範統一實現； 原子組件庫EUI抽離業務邏輯，和上游設計團隊共建營銷設計語言，在增長複用率的同時，又提高了開發的質量。

標準化開發，讓咱們能夠高效，高質量的交付需求，獲得了業務方的一致好評。

變幻無窮營銷互動

營銷互動交互簡單、視覺衝擊力強的頁面展現形式，多用於品牌推廣、活動廣告等目的，兼具動畫與互動交互。這一類的需求主要技術重點在於多機型 UI 適配，以及多於通常頁面的動效展現，極其考驗網頁自適應及動效開發的能力。

精細起家

與部門總體研發模式發展路線一致，營銷互動的開發一樣從石器時代發展而來。在這一階段，設計的創意與動效的靈動產生了極佳的化學反應，出現了很多精品案例，爲部門互動開發的口碑奠基了初步的基礎。

在此期間，部門沉澱了很多動效開發相關的總結： 以電影之眼看CSS3動畫 css3 animation 屬性衆妙

因爲與平臺類業務需求差別性大，且有效週期短，早期的營銷互動開發經常是一位同窗在本地開發，人工部署到統一的服務器即結束，使用何種技術棧，用到哪些開發工具，均由開發我的習慣決定。這種開發模式，且不提多人協做以及代碼共享的問題，首先在開發效率上就存在極大的限制：每一個人每一個項目都須要從新設定一套自適應方案、滑屏等觸屏交互邏輯，最佳實踐沒法複用，需求複雜性具有必定的上限。所以在這一階段，所能實現的營銷互動大多由內容驅動，交互形式侷限於滑屏類。

不過正如《凹凸技術揭祕·羚瓏頁面可視化·成長蛻變之路》中提到的，因爲滑屏類需求的形式單一性，反而催生了 Hi Page 這樣的互動可視化搭建工具，這也是部門最先期的 SaaS 服務。

告別刀耕火種

以 Athena 的出現爲界，藉助其前端工程化的能力，咱們開始將營銷互動相關的 REM 自適應方案、代碼圖片壓縮等預處理自動化，提高了開發效率的同時，也爲複雜遊戲類的開發奠基了基礎。在業務的推動中，又隨之誕生了更爲專一於互動開發的腳手架 ELF（ELF — 靈活可擴展的 HTML5 構建工具），後將功能併入 Athena2，完成了部門內部的腳手架統一。

在這一時期，輸出了更爲多樣的精品案例，開始涉足較爲複雜的小遊戲，並在此基礎上，創辦了互動案例推薦期刊《拇指期刊》，進一步深挖行業優質案例。

精品遊戲

精品動效

拇指期刊，數據已焚，莫念

在互動案例上持續高質量高效率的輸出，進一步鞏固了凹凸在互動開發上的優秀口碑，隨之而來大量有創意互動合做意願的業務方，包括當年春節核級難度、核級重要的多機互動，《一炮而紅》

多機互動巔峯——一炮而紅

基於大量精品遊戲經驗的沉澱，部門開闢了 H5 遊戲開發專欄，篇篇精品，醒來仍是很感動：知乎專欄：H5遊戲開發

結合中臺，邁入統一數字化

隨着部門總體戰略的調整，資產沉澱及開發流程統一提上了日程。部門在不斷的踩坑中進行調整，造成了一套基於夸克組件庫與羚瓏可視化搭建相結合的互動開發流程，實現資產管理數字化、積木化。

新的開發流程契合了資產沉澱與流程統一的戰略方向，已成功落地了羚瓏 SNS 互動營銷場景，並正陸續接入新的互動業務需求，探索業務落地新流程的最佳實踐。

同時，EUI在大促業務中的出彩，引來了其餘運營同窗的諮詢。爲了賦能更多的業務方，咱們把EUI組件同步至夸克，結合羚瓏中臺，方便無開發資源的業務團隊使用。

另外一方面，咱們將一些有趣的會場形式固化，經過封裝組件，沉澱頁面模板，將項目經驗提供給更多的用戶。

公司每一年促銷活動不可勝數，設計趨勢在變，內容形式在變。咱們須要更加科學的數據分析來支撐業務決策，選擇更符合場景的方案。

所以咱們從業務訴求出發，經過數懶對活動數據的跟蹤分析，生成可視化數據報告，爲決策者提供專業意見。數懶完成了從業務中沉澱運營經驗，賦能給更多業務的正向循環。

將來展望

隨着行業不斷變革，以及各類技術基礎設施的持續完善，催生出了大量新的思潮。之前看似高不可攀的領域，逐漸雨後春筍般冒了出來。對於將來的業務研發模式，在咱們腦海中已經描繪出了一幅理想的藍圖，而且在一步步實現它。

將來，咱們將開發流程進行雲端化，由 Tide 來承載研發全鏈路，打造一體化研發工做臺，由傳統手工做坊進入到工業化生產時代。

今後不再用被本地各類環境問題來回折騰，隨手打開瀏覽器便可開始擼碼。啓動不一樣類型的項目時，無需從零開始，使用內置模版便可擁有現成的最佳實踐方案。開發模式也由傳統的頁面開發轉換到組件開發上來，這樣既能夠充分利用已有的研發資產，經過羚瓏可視化搭建平臺快速拼裝出頁面，同時又能很好的將組件沉澱下來，不斷的擴充研發資產庫，爲智能代碼提供更加豐富的樣本。更進一步咱們能夠利用 Deco 進行設計稿一鍵生成多端代碼，最大程度解放生產力，實現價值最大化。

凹凸揭祕系列文章地址

1.《凹凸實驗室的過去與將來》

2.《凹凸技術揭祕·羚瓏智能設計平臺·逐夢設計數智化》

3.《凹凸技術揭祕 · Deco 智能代碼 · 開啓產研效率革命》

4.《凹凸技術揭祕·羚瓏頁面可視化·成長蛻變之路》

5.《凹凸技術揭祕 · 夸克設計資產 · 打造全矩陣優質物料》

6.《凹凸技術揭祕 · Tide 研發平臺 · 佈局研發新基建》

7.《凹凸技術揭祕 · Taro · 從跨端到開放式跨端跨框架》

8.《凹凸技術揭祕 · 基礎服務體系 · 構築服務端技術中樞》

9.《凹凸技術揭祕·技術精進與業務發展兩不誤》

10.《凹凸技術揭祕 · 數懶 · 增加團隊好幫手

其餘

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

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

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