百度外卖如何作到前端开发配置化

内容来源：2017年5月13日，徐辛承在“H5梦工场”进行《前端开发配置化方案》演讲分享。IT大咖说做为独家视频合做方，经主办方和讲者审阅受权发布。

阅读字数：2017 | 9分钟阅读

摘要

前端开发的主要职能就是把网站的界面更好地呈现给用户，它涵盖的知识面很是广，既有具体的技术，又有抽象的理念。百度外卖高级前端工程师徐辛承，为咱们带来关于百度外卖前端开发配置化方案的分享。

嘉宾演讲视频地址： t.cn/RolWhbl

内部平台开发中的痛点

全部业务线由一个大的内部平台来完成，最后集中下放到APP中。这个系统的缺点就是重复性工做不少。

以banner配置为例，咱们发现页面功能类似度高，重复工做较多。咱们以前的开发模式在搭建基础页面时，主要靠复制另外一个相似项目的代码，在此基础上进行修改来完成。同时因为一个代码可能要多人开发，代码风格难以统一。

受到了百度H5的启发，咱们最终想到要经过一个平台来解决这些问题。百度H5是经过拖拽的方式来生成H5活动页面的一个平台，它的组件很是丰富。它整个页面的设计思路和如今一些组件化框架的思路很类似。它把页面中的元素拆分到以组件为最小单位，经过组件构成一个页面。

但其实它并不适合咱们的业务场景。由于在这样一个平台中，咱们内部平台的交互没法支持，组件也不能拓展。

咱们想要的得是一个简单的平台，全部角色都能使用，拖拽界面适用度高，你们乐于接受。

咱们但愿任何页面都能用可视化的方式去完成。咱们会提供丰富的组件库、交互的配置方式，同时也提供了自定义拓展脚本，经过配置化的方式去生成页面。

由于是咱们本身的团队来开发这个项目，因此咱们但愿这个项目的可维护性很强。咱们会用熟悉的技术栈开发，用可扩展性强的方式去挖掘技术栈底层内容，模块会拆分得很详细。

最终基于这些想法，咱们开发了Blocks平台。

页面配置平台Blocks

1

什么是Blocks？

Blocks是一个拖拽+配置生成的系统。组件是页面中的最小单位，Blocks有拖拽形式的页面画布，能够支持组件的添加和扩展、支持自定义脚本。Blocks是基于vue2.0开发。

2

页面配置模块

页面配置模块主要分为组建列表、页面画布和设置组件属性。它的输出是config.js，同时会在mapConfig.js里预留事件钩子。

3

脚本配置模块

由于如今尚未彻底实现可视化，咱们在JSON文件里开发扩展脚本，生成了一些事件钩子去更快地开发代码。

4

页面渲染引擎

页面渲染引擎是最核心的部分。经过JSON配置文件生成页面，解析组件的配置和层级关系，以及解析配置文件里的自定义扩展脚本，最后渲染出页面。

平台核心设计

1

核心思想

咱们最初的想法是，输入是JSON，输出是Web Page。后来通过思考发如今一个JSON中实现输入有些困难，因此把JSON拆分为Config.js和MapConfig.js。

2

Config.js

3

为何这么作？

由于Virtual Dom Tree结构为object，代码量有明显减小。基于Virtual Dom的实现，它的拓展性是很强的。

4

每个节点

针对每个Virtual Dom的节点，主要有三个属性。

第一个是Tag，就是节点名称，也能够理解为这个节点用的组件。

第二是Data，节点属性。

Children是这个节点包含的全部节点。

5

MapConfig.js

之前用的框架是MVC，Model和View没有框架实现，它们之间的交互都是经过Controller来解决。

这种命令性的开发方式会致使Controller开发效率底下，容易变得臃肿和难以维护。

6

脚本配置

在state里它是一个驱动应用的数据源。View以声明方式将state映射到视图。而actions是响应在view上的用户输入致使的状态变化。

但若是把代码中的事件写得很松散的话，并无办法造成一个配置文件。因此咱们运用了Vuex。

Vuex是专为Vue.js应用程序开发的状态管理模式，也是集中管理状态的一个工具，它以相应的规则保证状态以一种可预测的方式发生变化。

Vuex.store是MapConfig.js的一部分，它包含了State、Getters、Mutations和Actions。组件属性在State里，组件预埋的钩子放在Mutations和Actions里，Getters在须要的时候会用到。

Vuex提供了辅助函数mapState、mapGetters、mapMutations和mapActions在平台中进行执行。

目前新增了页面配置模块和脚本配置模块。

7

组件的引入

对通用组件库和业务组件作了一次封装。以input组件为例，在写input组件模版的时候须要写一些相应的属性，组件配置模块把这些属性抽离出来，以可视化的模式在表单中进行填写。

每一个组件中主要分为index.vue和setting.js。Index.vue是渲染在画布和页面中的一个模版文件，setting.js是一个组件设置表单。

8

脚本配置模块

脚本配置模块主要提供了Vuex.store的开发和组建内部事件扩展，将来还会增长常规事件的可视化配置。当公司内部RD接口变多的时候，接口规范会很难作到，若是有一个平台能作到前端的交互和交互的规范，就能够反向约束RD接口的规范，更能够提升开发效率。

平台现状和规划

1

收益对比

作这个平台以前，在接口上没有太多的规范。经过这个平台能够约束RD接口进行规范。有了规范以后能够极大地提升工做效率。

以前咱们每一个人代码风格不一样，代码质量很低，难以维护。经过拖拽的方式生成，质量会很高。

原来基本全部的工做都是由研发完成的，如今部分工做能够外放，甚至当页面简单或者平台作到极致的时候，就能够实现0成本开发。

2

将来要作的工做

功能：把组件库作得更丰富，尽可能支持更多的组件；提供一个组合件的功能和可视化的交互配置。

易用性：增长UI设计，作一些系统交互方面的优化。

落地：对老代码作重构，用这个平台作新项目开发。

个人分享到此结束，谢谢你们！

相关推荐

推荐文章

• 阿里巴巴前端专家渚薰：H5互动的正确打开方式
  

• 微信开发中的先后端之坑
  

近期活动

• 直播 | 2017红象云腾大数据基础软件V5.0发布暨合做伙伴大会
  

原文地址：t.cn/RolTlsM