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

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

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

 

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

 

摘要

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

 

 

 

内部平台开发中的痛点

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

 

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

 

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

 

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

 

我们想要的得是一个简单的平台，所有角色都能使用，拖拽界面适用度高，大家乐于接受。

 

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

 

因为是我们自己的团队来开发这个项目，所以我们希望这个项目的可维护性很强。我们会用熟悉的技术栈开发，用可扩展性强的方式去挖掘技术栈底层内容，模块会拆分得很详细。

 

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

 

页面配置平台Blocks

 

1什么是Blocks？

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

转载于:https://my.oschina.net/u/3472227/blog/1068735