客户端店铺动态模板化方案——用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可以随时更新。