百度资深前端工程师谈组件化开发

我先简单的自我介绍一下,我叫林溪,是百度外卖这边新业务部门的前端负责人,主要经历是一三年加入百度地图,一五年来到百度外卖这边。

百度资深前端工程师谈组件化开发

我今天分享的主要内容是这三大块。

  1. 我们简单回顾一下组件发展的历程,

  2. 组件发展的新趋势,组件化和可视化的结合。

  3. 介绍一下可视化的相关的东西。

百度资深前端工程师谈组件化开发

我们首先介绍一下组件化的发展历程

百度资深前端工程师谈组件化开发

第一代的组件化,PPT上比较清楚,YUI、EXT、Jquery Plugin,他们多半是基于原形链的寄成或者是Jquery做一些组件,如果非要有一个特点我觉得是集成是这个组件化可能是共有的特性。

百度资深前端工程师谈组件化开发

第二代组件化更多的是现代的组件化,基于VUE,React,这种类型的组件,这个比较优秀的是大家可能是比较了解,淘宝的ANTD,谷歌的Material UI,我用的比较好的我觉得是iView UI,这样的一些组件库,功能是非常强大也是非常好用的类型。

百度资深前端工程师谈组件化开发

第二代组件化的特征是第一个他是有比较完善的生命周期,有很hook,大家可以在每个生命周期里干一些事情,第二个状态管理机制是基于这个模型,第三个是他的操作是隔离开的,这些特性是依赖于我们底层专业的组件库提供的,还有一个特点是他是生命式编程,是跟我们的这个命令式编程是相对的,我们是弄一个出来,传入一些什么东西。在第二代组件库的时候我们基本上都是直接写他的标签,生命式的,这个其实是一个能提高我们开发效率的地方。这个不一定是因为这个生命式,整体来说第二代组件库他是功能很丰富。

百度资深前端工程师谈组件化开发

我们接着来谈一下组件化发展的新趋势

大家用这个antd开发运营后端这个东西效率是非常高的,第二个我认为组件化发展的新趋势,刚才说到我们在使用第二代组件库的时候,大家都会做同样一个事情,先基于这个库去完善一个组件库,比如说做一个antd的库,业界可能是有很多这样的库,我们现在的库已经是非常完善,开发效率我们有很大的提高,大家在思考一个问题,我们现在的开发效率已经足够高吗。我们在使用第二代组件库开发一些业务中的时候,遇到这样的问题,比如说运营后端的系统,信息管理系统,MIS的系统,他们有很多的逻辑是重复的,比如说一个页面有一些条件搜索,过滤的区,下面显示的表格进行分页之类的,这种逻辑是非常多的,我们每次这么写的话是重复开发,复制粘贴改写组件的属性。然后还有一个类型是像我们做运营活动的页面,他要求是这个更高可配置用的,图片什么链接什么都可配置的,对配置要求是比较高的。

百度资深前端工程师谈组件化开发

基于像这种的重复性的开发,我们的开发效率能不能再提升,组件的特性能不能更大的复用他,这个页面能不能更好的配置他,这个是我们遇到的比较现实的问题。

百度资深前端工程师谈组件化开发

我们在这方面做一些尝试,我们在组件化可配置化与可视化的页面编辑的具体尝试,我们有两个项目是做这个事情,第一个是我们把运行活动平台的H5做成了可视化页面编辑的平台,我们可以通过配置组件的具体属性生成页面,实现这个组件的可复用,另外一个是针对运营后端的系统,多半是一些逻辑是相通的,我们可以做一些事情的,也是通过配置生成运营后端的页面。

百度资深前端工程师谈组件化开发

另外是在业界我参与过一些会议,也听到一些公司的分享,比如说淘宝他们有一个Nrails的系统,也是用来可视化配置运行后端的系统,还有是像美团他们也做运营后端的自动化配置的系统。

百度资深前端工程师谈组件化开发

大家业界很多人在去做可视化与组件化的配置的尝试,这个我们做这个之前也是没有跟业界进行一个约定,大家是不约而同的朝一个方向走,所以我觉得这个是一个能提高我们组件更高效率的一种手段和途径,大家都是朝这个方向走的,我觉得这个是我们今后的一种趋势。

刚才说我参加一些会议,其中有淘宝的分享,他们有这个系统,就是Nrails他们也是基于对运营后端这一块,对可视化进行配置,美团也有这样的尝试,大家可能都之前是没有约定这样做的,大家最终是达到惊人的一致,这个应该说是能提高组件化的功效的一种很好的方法,我觉得这个也是未来的用趋势。

百度资深前端工程师谈组件化开发

所以是组件化与可视化的编辑结合是组件化未来发展的趋势,我们可以通过组件化的配置让你用组件化开发页面效率更高,我们现在做的一些系统,从经验来看确实是可以达到效果,所以我觉得高级阶段是可视化的东西。

可视化编辑技术方面的东西

时间:1年前 (2017/07/12) / 阅读:306 / 评论:0

百度资深前端工程师谈组件化开发