针对公司运营活动并发太多，Fe人力资源有限，第三方平台制作出来的H5页面上线及统计困难的现状，我们结合公司运营活动需求，设计及开发了H5在线制作发布平台dpub；在技术层面上通过React巧妙地实现了编辑器与构建器的复用以及页面数据的序列化和反序列化，并在内部对接了公司现有系统实现了一键上线，自动统计和端内分享等功能。 分享者：董宏平，滴滴出行专车事业部前端高级工程师，主要负责前端效率与架构方向工作，对Node和React等前端新技术抱有浓厚兴趣；于2015年9月入职滴滴出行，主导设计及开发了H5在线制作发布平台dpub。

1. H5在线制作发布平台Dpub
滴滴出行快车事业部 董宏平

2. 为什么要造轮子？
因为，外面的轮子：
功能牛逼但界面复杂，对于没有技术背景的运营同学来说上手困难
（事实上绝大部分时候我们不需要那么多牛逼功能）
发布和分享和数据统计需要人工介入，没有完全抛开fe/op的支持
（上线要走流程走审批，需要分享和统计还得人工加脚本建目录）
不能根据业务定制，响应特殊需求
（90%的活动页面都是单页长图）

3. 编辑器界面（木有UE支持）

4. 平台成果
自去年12月上线以来
创建活动页面数1600+
创造访问pv 2亿+，uv 1亿4千万
得到了用户的广泛好评

5. 技术选择（不敢喊选型）
后端：express（轻量灵活）
前端：react（信react得永生，不过确实挺适合这个业务场景的）

6. 系统结构（也不敢喊架构）
登录
项目
列表
权限
管理
编辑
器
项目
预览
数据
统计
Router Mysql
数据处理
页面构建
数据配送
CDN集群
fs
giflog
hadoop
前端
服务端
预览
发布
下载

7. 数据复用，组件复用（主要能讲的点）
页面组件
编辑器 构建器
数据
Props
renderToStaticMarkup()render()
静态HTML串绑定了编辑器事件的react组件

8. 数据结构
globalData
pagesData
pageData
pageData
pageData
……
background
foreground
component
component
component
……
type
width
height
left
top
src
href
animation

9. 编辑器结构及数据流
[... …]
data
[... …]Page
Component
ForegroundBackground
Global
（图片，文字，热区，视频，自定义）
（背景音乐）
编辑器
缩略图
预览
发布
拖动
缩放
复制
删除
修改层叠顺序
编辑内容
设置动画
（背景颜色，背景图片）
（全局事件）

10. 数据处理及页面构建
页面数据
位置/尺寸转换
资源选取
图像压缩/切割
JS/CSS合并
React构建器 页面模版
翻页动画
分享设置
数据统计
图像预加载
项目配置
成品页面

11. THANK
YOU
北京嘀嘀无限科技发展有限公司
北京市海淀区东北旺路8号院尚东·数字山谷B1号楼