客戶端店鋪動態模板化方案——用ReactNative替代傳統Velocity方案來做服務端動態渲染

傳統的動態模板技術

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

設計師模塊

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

語法規範如下：

<floor>
   <container>
       <style>
           <attr name="width" value="-1"/>
           <attr name="height" value="90"/>
           <attr name="backgroundColor"value="#ffffff"/>
       </style>
       <text value="動態文案">
           <style>
                <attr name="fontSize"value="15"/>
                <attr name="fontWeight" value="500"/>
           </style>
       </text>
   </container>
</floor>

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

數據轉換模塊

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

渲染模塊

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

1. Velocity模板引擎語法解析Json數據，服務端渲染**
   Velocity代碼會經過編譯，這是典型的服務端渲染，速度較快，體驗一般
2. 通過頁面端Ajax js請求的方式得到響應數據，並通過JS得到Json的層次，得到元素、容器屬性後，根據html css語法逐個遞歸轉換
   Js的效率較差，頁面端渲染，如果性能差，可能會有卡頓的感覺，當然對於一般不超過幾十個樓層的動態模板，足夠了！
3. 通過Android、Ios原生Http請求得到渲染的Json，從中得到容器層次、元素，並逐個實現多種容器例如slider輪播，list列表和基本元素，並提供屬性接口，最終拼接。
   這種方式因爲是App客戶端渲染，帶來的原生體驗，所以效果較好，但是因爲所有容器、元素和他們屬性很難設計完美，所以會帶來許多問題。

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代碼

render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                React-Native入門學習
            </Text>
            <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
            </Image>
        </View>
    );
}

是不是和我們的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可以隨時更新。