傳統的動態模板技術

傳統動態模板技術一般分為三個模塊，分別是設計師模塊、服務端轉換模塊、渲染模塊

設計師模塊

模板設計后臺一般提供給前端工程師，或者外界的美化愛好者，通過拖曳各種控件的方式來實現，并提供一種簡單的自定義xml配置方式來提供更深層次的定制化。

語法規范如下：

首先必須要有根節點，根節點只有一個，如文檔中的，代表一個樓層。與HTML不同，所有標簽必須要有閉合標簽，可以沒有標簽之間的內容，但是如果標簽沒有閉合，則是非法的。 在設計師平臺中，一個模板就會包含多個組件，例如一個輪播圖，一個單圖活動或者一個多列的商品列表，每次只能新建、編寫一個組件，然后使用多個組件來組合成一個模板。 元素分類: 一個組件和可以由多種元素組合而成，分為兩種類型: 1. 容器元素：container、slider、list、grid、simpleTab 2. 基本元素: text、image、line 同時在元素里，我們可以通過value等字段定義好內容數據，或者請求的鏈接，點擊變化的效果。 總之通過拖曳后的直觀效果圖可以生成xml，或者自定義xml方式實現設計模板的功能。

數據轉換模塊

通過將設計師模塊中的xml轉換為json格式，通過SOA調用的方式提供給另外的App數據下發模塊

渲染模塊

當設計師模塊中的xml數據被轉換為json后，渲染方式可以有三種

ReactNative來做動態模板

ReactNative是由Facebook推出的開源Hybrid方案，相比較于傳統的Cordova方案，ReactNative主要是采用了不同于Cordova JS橋接的模式，通過C語言實現高效的JsCore，來實現ECMAScript語法規范的React Js調用原生端，并完整地實現了Android/IOS平臺的多種View例如ListView等，同時因為ReactNative便于升級，所以讓熱更新變得可能，至于ReactNative等插件化的升級方案，我們會在后續介紹。

技術方案實現

設計師模塊依舊沿用傳統方案，因為雖然RN是基于React語法，但是小白設計師并不懂前端，所以還需要沿用xml或者所見即所得的方式讓用戶實現店鋪模板，而轉換的模塊需要經過以下幾個步驟：

1.遍歷xml元素，生成React樣式的動態JS 我們先來看一段ReactNative代碼

是不是和我們的xml定義的格式有點類似呢！我們通過深度遍歷樹狀的xml定義的樣式和數據，將其轉換為ReactNative的Render模塊，將原來的布局，轉換通過React的Flex布局來實現排版。 2. 通過Babel編譯1中生成的JSX 因為1中轉換的JS可能是ES6、JSX等多種混合格式，所以需要通過Babel來編譯轉碼生成最終兼容ReactNative JSCore的語法 3.在線增量混淆、打包 通過RN的混淆打包工具實現壓縮打包，壓縮打包后的文件放在CDN上，增量混淆打包，會通過Babel監控文件改動，實現實時打包。 4.客戶端通過JSCore引擎加載ReactNative打包文件 5.后期View更新 后期設計師模板市場如果增加了新的容器和基本元素，例如新的公司統一格式加載圈，可以通過增加原有的React Componet API來實現，API更新后通過App強制升級的方式下發給客戶端。 React Native通過JS調用原生View渲染的方式實現了類原生的渲染，同時React采用虛擬Dom技術讓渲染效率更高。在這個方案里更值得一提的時，React Native實現了類原生的基本容器和元素，并可以通過ECMA Script來定時各種View，基本的View元素還是原生渲染。所以這樣就實現了View可以隨時更新。