文档章节

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

乱蓬头
 乱蓬头
发布于 2017/06/29 14:46
字数 796
阅读 52
收藏 0

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

0e83a85d1ab62d793a13094933818915b26c403f

9688ef1b2f9790af7deb2566808488e9a8d0392c

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

 

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

 

摘要

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

 

 

 

内部平台开发中的痛点

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

页面配置平台Blocks

 

1什么是Blocks?

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

本文转载自:http://click.aliyun.com/m/24509/

乱蓬头
粉丝 0
博文 382
码字总数 2595
作品 0
私信 提问
掘金线下活动 JTalk 第三期 前端场 : 2018 · 前端展望

🙋 报名 扫码报名: 报名链接:点我报名 🚀 介绍 掘金线下活动:JTalk 第三期 前端场 《2018 · 前端展》望来了!掘金线下活动 JTalk 由掘金主办,每期 JTalk 会邀请垂直行业的优秀工程师...

膜法小编
2018/01/11
0
0
告诉你为何以及如何搭建一个私有的npm仓库

告诉你为何以及如何搭建一个私有的npm仓库 56 人 为何需要搭建私有npm仓库? npm——我们大家都知道是NodeJS的包管理工具,用于Node插件的管理包括安装、卸载、管理依赖等。 基于npm命令行我们...

一只傻汪
2018/10/31
0
0
一线大厂是如何开发微信小程序的?

你是否也遇到了这些微信小程序开发痛点? 自 2017 年 1 月 9 日正式发布以来,微信小程序已经渗透到我们生活的方方面面,以微信的钱包入口为例,京东、美团外卖、猫眼电影、转转二手等产品都...

稀土君
2018/08/13
0
0
外卖订单爬虫(美团,饿了么,百度外卖)

这个程序是用来抓取外卖平台(美团,饿了么,百度)的商户订单开发,并不是一个通用库,而是为这个 特定场景进行开发的。 适用场景:餐饮企业拥有多家外卖门店,订单量非常大,有对订单进行数...

白jian
2016/12/20
1K
0
2017第六届iWeb峰会(北京站)

由国内最大的前端开发者社区-HTML5梦工场主办的、前端行业最具影响力的前端开发者大会--“2017iWeb峰会(北京站)将于8月12日在北京国际会议中心盛大开启,一直以来iWeb峰会都”以最接地气的...

蟠桃会会议平台
2017/07/06
92
2

没有更多内容

加载失败,请刷新页面

加载更多

parseint和isNaN用法

本文转载于:专业的前端网站➭parseint和isNaN用法 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><script> var a='12'; alert......

前端老手
46分钟前
7
0
Kylin 精确去重在用户行为分析中的妙用

作者:史少锋,Apache Kylin committer & PMC,2019/10/11 在上次文章《如何在 1 秒内做到大数据精准去重》中,我们介绍了 Apache Kylin 为什么要支持大数据集上的精确去重,以及基于 Bitmap...

ApacheKylin
57分钟前
5
0
学习记录(二) es6基本语法(rest参数,模板化,axios模块,拦截器)

日常学习记录 模块化:把一个大文件分成多个小文件,按照一定规范进行拼接 es5写法: 导出:module.exports = 数据 导入:require("路径") /路径未添加后缀名时 //默认添加.js //把路径作为文件名...

Pole丶逐
今天
4
0
以程序员的角度怎么购买一台「性价比高的电视」

前俩天有小伙伴在我的文章下留言,说能否把 【国内电视机都介绍一下】,今天我已在TV端开发多年的程序员的角度。谈谈已程序员的角度如何购买一台性价比高的电视。 国内大的电视机品牌介绍 长...

我们都很努力着
今天
4
0
PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部