蘇寧易購CMS架構(gòu)演進：泰坦平臺的探索與實踐！-創(chuàng)新互聯(lián)

產(chǎn)品演變歷程

創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都做網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計、網(wǎng)站維護、公眾號搭建、成都微信小程序、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動行銷領(lǐng)域創(chuàng)造價值而不懈努力！

2012年

蘇寧易購所有的網(wǎng)站內(nèi)容管理在核心主系統(tǒng)commerce上，完成了第一版本網(wǎng)站上線，并且形成了內(nèi)容管理框架理論，后續(xù)產(chǎn)品和技術(shù)思路也是基于此框架演變

2014年

內(nèi)容管理業(yè)務(wù)完成了從commerce中拆分，CMS 1.0版本誕生，成為一個獨立系統(tǒng)，確立了頁面模板化、模塊化的概念，具備了并行開發(fā)和靈活發(fā)布的條件；但痛點仍然存在，例如前端模板與后端系統(tǒng)的耦合、頁面迭代慢、開發(fā)效率低、整體性能較差等

2015年

CMS 2.0平臺實現(xiàn)了模板與應(yīng)用的動靜分離、模板的動態(tài)發(fā)布、在線編輯、性能TP99優(yōu)化、系統(tǒng)自動降級，拓展完成了對易購絕大部分前臺頁面管理和支撐，同時成功推進易購從PC時代向移動時代轉(zhuǎn)變的進程；缺陷是界面交互復雜，頁面搭建效率低、運營功能不夠健全。

2017年

CMS 3.0主要解決對于APP原生化的內(nèi)容管理問題，概念上摒棄了固化模板的概念，攻克了APP多版本的數(shù)據(jù)同步問題。同時完成了易購全站https化，加強了后端容錯和管控，確保全年0事故發(fā)生。

2018年

隨著蘇寧提出的“造極”以及“多產(chǎn)業(yè)協(xié)調(diào)發(fā)展”戰(zhàn)略，日常的內(nèi)容管理不能僅僅滿足于零售業(yè)態(tài)下的業(yè)務(wù)，以及傳統(tǒng)人工機械式的工作方式，因此，泰坦平臺（CMS 4.0）應(yīng)運而生，系統(tǒng)架構(gòu)從頂層上支持不同業(yè)態(tài)下內(nèi)容管理，并且提供了豐富的模塊組件庫，而且還支持組件高度定制，接入OOP、ES6、VUE片段多種技術(shù)形式，為平臺制定規(guī)范提供了基礎(chǔ)技術(shù)，底層架構(gòu)設(shè)計上采取抽象概念、動態(tài)數(shù)據(jù)類型、模塊組件化實現(xiàn)前后端分離是泰坦平臺化后端技術(shù)核心所在，不僅連接了蘇寧內(nèi)部團隊，而且還賦能第三方品牌商和運營商；通過提供各種應(yīng)用功能模塊充分與應(yīng)用場景、應(yīng)用架構(gòu)以及人相連接的“平臺生態(tài)建設(shè)”上來

核心能力一：抽象業(yè)務(wù)模型，構(gòu)建系統(tǒng)框架

產(chǎn)品、前端開發(fā)、服務(wù)端開發(fā)、設(shè)計師、測試、運營，這些崗位的人員增長速度遠遠不及業(yè)務(wù)發(fā)展的需要，工期時間也一樣，也就是我們常說的資源不足，如何在有限的資源條件下滿足更多的需求呢？首先就是提升效率和模塊復用?？梢暬庉嫷牟僮?，積木式頁面結(jié)構(gòu)以及高度公共化的模塊組件，成為解決問題的核心。

結(jié)合CMS領(lǐng)域業(yè)務(wù)模型，從上到下逐層抽象出：頁面->模塊->元素->數(shù)據(jù)模型->基礎(chǔ)字段，實現(xiàn)積木式頁面搭建和高復用性。

良好的業(yè)務(wù)模型抽象，是高復用性的基礎(chǔ)，數(shù)據(jù)結(jié)構(gòu)如下：

核心能力二：組件化平臺，前后端分離實踐

組件平臺主要是管理系統(tǒng)內(nèi)的模塊組件從無到有的全流程，包括模塊的源文件管理、在線開發(fā)、分支和版本管理、發(fā)布流程管理等，前端開發(fā)將開發(fā)好的模塊組件源文件上傳至平臺內(nèi)進行管理，每個模塊組件都是一個獨立的發(fā)布分支，開發(fā)人員在平臺內(nèi)進行開發(fā)后，可以自行提交分支代碼，如果需要至生產(chǎn)環(huán)境，還需要經(jīng)歷發(fā)布流程的審批，最終才能夠?qū)⒛K組件發(fā)布至生產(chǎn)環(huán)境，發(fā)布至生產(chǎn)的模塊組件就可以給各個頁面使用了。下面就給大家介紹一下模塊組件的前后端原理和工作方式。

后端對組件標準制定和發(fā)布管理

泰坦后臺提供了模塊全方位的定義能力，前端開發(fā)人員可以使用該能力專注前端開發(fā)，實現(xiàn)前后端的完美分離。

模塊數(shù)據(jù)定義：

模塊樣式數(shù)據(jù)定義

模塊樣式定義，實際上是規(guī)定了該模塊包含的樣式控制項，例如背景顏色、樣式等

模塊業(yè)務(wù)數(shù)據(jù)定義

模塊數(shù)據(jù)定義，實際上是規(guī)定了模塊可維護的業(yè)務(wù)數(shù)據(jù)的各個數(shù)據(jù)項，例如商品名稱、商品編碼等

在模塊數(shù)據(jù)定義中，使用了動態(tài)數(shù)據(jù)類型（元素）簡化模塊數(shù)據(jù)定義，大大提高了模塊開發(fā)工作量，對于抽象出的動態(tài)數(shù)據(jù)類型，在某些極端場景中無法支持某些模塊的數(shù)據(jù)定義的，支持使用基礎(chǔ)字段二次擴展，支持極端的業(yè)務(wù)場景。

模塊頁面渲染定義

泰坦使用模塊定義完成了頁面樓層中涉及的各個方面問題，除了包含樣式控制項的定義、模塊業(yè)務(wù)數(shù)據(jù)維護項的定義以外，當然還包含如何將運營人員維護的樣式控制項內(nèi)容、業(yè)務(wù)數(shù)據(jù)內(nèi)容整合渲染的樓層渲染定義。為了提供該功能，泰坦支持在定義模塊時，上傳模塊渲染的JS文件，結(jié)合使用高性能的云存儲服務(wù)器，實現(xiàn)快速、準確的樓層渲染：

復雜組件的抽象與定義：

頁面除了普通模塊以外，目前還存在一種特殊模塊-Tab簽模塊。為了處理Tab簽模塊，系統(tǒng)對其進行分析抽象，抽象出復合模塊->布局模塊->普通模塊的層級概念：

通過模塊層級，可以靈活配置以適配頁面遇到的復雜樓層場景，不僅僅圖中的單層Tab簽場景，還可以支持雙層Tab簽，甚至三層或更多層的場景。通過定義復合模塊、布局模塊、普通模塊之間的關(guān)系，實現(xiàn)層級之間的關(guān)聯(lián)，同時各層級模塊的樣式與數(shù)據(jù)定義依然遵從普通模塊的一般配置定義場景，實現(xiàn)動靜結(jié)合，各安其分。

從技術(shù)角度來看，后臺通過定義模塊關(guān)系表，支持動態(tài)的模塊層級關(guān)系綁定，理論上可以支持任何層級的模塊關(guān)系，具備更好的靈活性和擴展性。

1) 復合模塊定義界面：

通過拖拽方式定義復合模塊和布局模塊之間的關(guān)系，操作簡單友好。

2) 布局模塊定義界面：

通過拖拽方式定義布局模塊可選擇的普通模塊，定義頁面中Tab簽下可放置的樓層類型（例如普通商品）。

組件平臺是泰坦的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮陀玫慕M件構(gòu)建大型頁面。仔細想想，幾乎任意類型的界面都可以抽象為一個組件樹。

例如頁面你可能會有頭圖、輪播、熱區(qū)等組件，而通過TAB又可以把這些組件聚合到某個TAB切下，組件的“嵌套”增強了組件的形態(tài)，使得組件可以掛載到父組件當中，所以一個頁面有很多復用的組件構(gòu)成，為防止多組件帶來的污染，組件采取 “禁用”設(shè)計與封閉隔離，既能避免組件對全局的影響，又能讓組件對系統(tǒng)不依賴，即插即用。

后端發(fā)布管理流程：

前端組件與后端系統(tǒng)間的數(shù)據(jù)通信

組件數(shù)據(jù)分為“樣式數(shù)據(jù)”和“業(yè)務(wù)數(shù)據(jù)”兩種，樣式數(shù)據(jù)提供展現(xiàn)，業(yè)務(wù)數(shù)據(jù)提供邏輯，互不干擾。

組件的使用都會實例化，實例化過程時會產(chǎn)生一系列過程，比如數(shù)據(jù)監(jiān)聽、模版解析、虛擬DOM生成，然后完成組件渲染，同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。

頁面是唯一數(shù)據(jù)對象，頁面和組件之間是單工方式，數(shù)據(jù)只會從頁面流向組件，而頁面和“組件控制面板”之間是雙工方式，都能收發(fā)數(shù)據(jù)，實現(xiàn)DOM和對象更新。

組件的最優(yōu)實踐

組件要求獨立內(nèi)聚，所以其中聚合HTML、CSS、JS內(nèi)容， 然后WEBPACK編譯生成BUNDLE文件，整體上組件采用OOP設(shè)計，使得組件具備對象的特性，封裝、繼承、多態(tài)。因此加載到頁面中的是組件的實例，這也保證了同一組件可以多次加載，避免組件污染的問題。

一個完整的組件分為兩部分：

組件內(nèi)容

組件內(nèi)容是完整的對外的JS文件, 分編輯JS（提供泰坦系統(tǒng)使用，運營可視化的展示，不需要調(diào)用業(yè)務(wù)接口）和預覽JS（真實的，用戶能看到的）兩套。編輯JS側(cè)重突出對數(shù)據(jù)的UPDATE操作，選擇性忽略組件的動畫交互，而預覽JS由于數(shù)據(jù)已配好，所以不UPDATE，但多了對交互和接口的關(guān)注，

組件的控制面板

組件控制面板是提供給運營可視化可操作的頁面來實現(xiàn)組件最終效果。在新增模塊的時候，有個“模塊控制面板”的選項，默認是雙TAB，可以在此處修改。

樣式字段是開發(fā)者通過組件的樣式編輯功能添加生成，比如組件需要的樣式字段，都可以通過下圖配置，每個字段里面的字段名在當前組件里唯一，這個字段名也會是你在組件里面數(shù)據(jù)的鍵值。

同樣業(yè)務(wù)數(shù)據(jù)需要的字段也能通過數(shù)據(jù)編輯功能添加生成。

1.是雙TAB的展示，樣式和維護數(shù)據(jù)的字段都是開發(fā)者自定義，充分給開發(fā)者足夠的擴展空間。

2.業(yè)務(wù)是多態(tài)的，視覺是多變的，總有拖拽無法生成的字段樣式，因此VUE片段應(yīng)運而生，比如圖片熱區(qū)這種是自定義的樣式展示，開發(fā)者VUE實現(xiàn)，VUE實現(xiàn)意味頁面需要自己開發(fā)，開發(fā)者，同樣在樣式編輯里面的，有個“頁面片段”，粘貼你編譯后的JS代碼。

說起開發(fā)者的實現(xiàn)，開發(fā)者只關(guān)注面板的展示和數(shù)據(jù)的變量存儲，對于數(shù)據(jù)的通信系統(tǒng)已經(jīng)提供通用的API，并且完成必須的數(shù)據(jù)監(jiān)聽、數(shù)據(jù)更新操作，簡化開發(fā)。

系統(tǒng)的自定義化促成了更多復雜定制組件的生成，比如之前提到的TAB組件，它是復合型的組件，支持嵌套，面板同樣是開發(fā)定制。

最終，編寫完的組件，發(fā)布包是ZIP包，包名是模塊標識，editFilePath里面存放編輯JS，modelFilePath里面存放預覽JS，這兩個目錄名固定。打包之后，通過模塊修改功能，發(fā)布組件

核心能力三：動態(tài)數(shù)據(jù)模型的多元化與延展性

所謂的動態(tài)是指能夠靈活擴展，不需要上線也不需要擴展數(shù)據(jù)庫字段，支持自由擴展，能夠快速響應(yīng)電商網(wǎng)站的日益靈活多變的需求。同時將模塊組件內(nèi)所需要的字段進行拆解和歸類，形成顆粒度更為精細的字段組件，文本輸入框、下拉選擇、單選、多選等都成為了這些最小單元，任何模塊組件都是通過這些字段組件通過不同的排列組合形成的，可擴展性非常強，而且還滿足不同業(yè)務(wù)需要時，擴展字段變得很方便快捷，實現(xiàn)動態(tài)可配置，由于配置不需要發(fā)布，極大化降低了模塊組件的發(fā)布風險，對正在使用頁面和業(yè)務(wù)不造成影響，安全性更高。

當然，將組件抽象、顆粒化的同時，也兼顧到一些常用的數(shù)據(jù)類型的聚類，形成了系統(tǒng)內(nèi)的基礎(chǔ)元素，常見的基礎(chǔ)元素有：圖片元素、文字元素、商品元素、券元素等。

動態(tài)數(shù)據(jù)類型定義操作界面：

通過抽象出基礎(chǔ)字段（例如單選、復選、選色板、時間選擇器），由基礎(chǔ)字段組合成數(shù)據(jù)類型（元素），實現(xiàn)動態(tài)數(shù)據(jù)類型：

通過概念抽象及分級：頁面->模塊->元素->數(shù)據(jù)模型->基礎(chǔ)字段，以及各級抽象概念物理模型的獨立表達與存儲，達到各級概念抽象間關(guān)系管理的動態(tài)綁定和各級概念抽象本身的獨立定義，實現(xiàn)數(shù)據(jù)類型的動態(tài)擴展和自由擴展，無需代碼更改及版本發(fā)布，提供更好的靈活性和面向未來的可擴展性。

核心能力四：多終端多業(yè)態(tài)支撐

愿景：覆蓋蘇寧集團八大產(chǎn)業(yè)，成為蘇寧業(yè)務(wù)組件化、平臺化以及對外賦能的基石。

泰坦再設(shè)計之初就構(gòu)建了多業(yè)態(tài)支撐的雛形，本著為集團全產(chǎn)業(yè)提供服務(wù)的角度出發(fā)， 在系統(tǒng)設(shè)計時，做了產(chǎn)業(yè)概念的劃分，做到各產(chǎn)業(yè)之間共用底層系統(tǒng)服務(wù)的同時不會影響到各自業(yè)務(wù)邏輯，產(chǎn)業(yè)間的業(yè)務(wù)隔離，業(yè)務(wù)邏輯隔離，降低系統(tǒng)風險，保障各產(chǎn)業(yè)的業(yè)務(wù)能夠順利開展。在組件的平臺化和復用性方面，同樣是為了解決各產(chǎn)業(yè)集團之間資源缺口問題，將核心的前端技術(shù)能力共享，設(shè)計能力共享，另一方面，也是整合了集團的所有開發(fā)資源和設(shè)計資源，各集團產(chǎn)業(yè)設(shè)計和開發(fā)的模塊組件都可以共享。

產(chǎn)品支撐框架：

技術(shù)支撐框架：

核心能力五：強大的自檢和監(jiān)控，確保系統(tǒng)和業(yè)務(wù)穩(wěn)定

產(chǎn)業(yè)隔離

各產(chǎn)業(yè)間的邏輯可以相互獨立，不會交叉干擾，底層服務(wù)基本一致，支持有各自的定制化需要。

獨立權(quán)限

權(quán)限的申請和審批均在系統(tǒng)內(nèi)完成，角色職責分明，使用者在系統(tǒng)內(nèi)僅可見自己創(chuàng)建的頁面或者被授權(quán)頁面，相當于每個使用者都擁有屬于自己的工作空間，而不需要受到其他人創(chuàng)建的頁面干擾，同時這樣做也保障了自己頁面的安全性。

系統(tǒng)內(nèi)自檢

系統(tǒng)內(nèi)會對于維護的頁面鏈接進行一些自檢，例如圖片的大小、跳轉(zhuǎn)的鏈接是否能夠正常訪問，是否為蘇寧鏈接等

敏感詞校驗

系統(tǒng)目前開放給內(nèi)部員工和商戶使用，為了避免一些敏感詞在頁面上直接展示露出，在系統(tǒng)內(nèi)進行維護時，進行了敏感詞校驗，如果匹配到是敏感詞庫內(nèi)存在的敏感詞，將不能維護到系統(tǒng)內(nèi)，并給出提示。

敏感圖過濾

方式與敏感詞的校驗基本相同，除了校驗圖片上的敏感詞之外，還會校驗一些水印和違規(guī)二維碼等

頁面上線前校驗

人工創(chuàng)建和維護的頁面，難以保證上線時不存在問題，所以我們在頁面上線時對頁面進行了一次系統(tǒng)審核，提前設(shè)置好一些頁面的各種規(guī)范（包括頁面性能、首屏加載速度），上線校驗時會按照這些規(guī)范一一進行匹配，如果不滿足這些規(guī)范要求，頁面是不允許上線的，以保證能夠給消費者最好的頁面瀏覽體驗。

全天候?qū)崟r監(jiān)控和報警

對于已經(jīng)上線的頁面，會視重要程度，配置頁面監(jiān)控，對于頁面在線上的過程中，出現(xiàn)的數(shù)據(jù)失效，頁面過期等等問題建立起報警機制，給予頁面維護的運營人員發(fā)送消息提醒，以便及時發(fā)現(xiàn)問題和解決問題。

頁面降級

頁面上線的過程中，難以避免需要對頁面進行調(diào)整，這些調(diào)整可能輸數(shù)據(jù)層面的，也可能是頁面結(jié)構(gòu)上的。對于頁面結(jié)構(gòu)的調(diào)整，對頁面整體的影響較大，如果在系統(tǒng)內(nèi)調(diào)整頁面結(jié)構(gòu)的同時讓消費者看到頁面上展示出的問題，顯然是不合適的，因此我們建立了頁面降級機制，在對頁面結(jié)構(gòu)進行調(diào)整時，會將頁面自動降級，使頁面停留在改變結(jié)構(gòu)前的一刻，不影響消費者瀏覽頁面，降級期間頁面數(shù)據(jù)將不會進行更新，運營人員調(diào)整完頁面后，重新上線頁面，頁面即可取消降級，頁面數(shù)據(jù)正常更新。

我們的愿景

未來的產(chǎn)品架構(gòu)圖：

未來的系統(tǒng)架構(gòu)圖：

未來希望能夠有更多的業(yè)務(wù)、技術(shù)力量加入泰坦平臺，為越來越多的定制化頻道活動提供技術(shù)支持和產(chǎn)品服務(wù)，也希望開發(fā)者們享受體驗開發(fā)，調(diào)試，灰度，發(fā)布一整套流程，給我們提出寶貴的意見建議，共同提高。

【 作者 】

畢定，蘇寧易購消費者平臺研發(fā)中心產(chǎn)品經(jīng)理，2015年加入蘇寧，一直負責蘇寧易購平臺內(nèi)容管理系統(tǒng)的產(chǎn)品工作，經(jīng)歷了系統(tǒng)的演化變遷，產(chǎn)品改版和迭代，致力于蘇寧全產(chǎn)業(yè)內(nèi)容管理平臺的建設(shè)工作。

標題名稱：蘇寧易購CMS架構(gòu)演進：泰坦平臺的探索與實踐！-創(chuàng)新互聯(lián)
URL分享：http://www.muchs.cn/article30/ipeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站制作、微信小程序、建站公司、用戶體驗、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)