文档章节

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

IT大咖说
 IT大咖说
发布于 2017/07/07 10:53
字数 2020
阅读 35
收藏 0

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

 

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

嘉宾演讲视频地址:http://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配置文件生成页面,解析组件的配置和层级关