揭开NoahV智能运维前端框架的神秘面纱

作者简介

莫海艳    百度资深前端研发工程师

百度智能运维（Noah）产品前端技术方向负责人，在运维数据可视化、中后台前端解决方案等方向上，有着丰富的实践经验。

干货概览

众所周知，前端有三大主流框架：Vue、React、Angular，这些前端框架可以帮助我们快速搭建项目，但是我们在实际项目中往往还需要投入很大精力去使用其他代码库与应用作为补充支持（如：需要一些基础的UI组件库，需要HTTP请求库等），另外，在实际应用到不同领域时，会有很多重复性的开发工作。

正因为上述原因，我们构建了自己的智能运维前端框架——NoahV（现已开源），它可以结合运维业务场景，提供常用的运维组件库及工具，比如：表格、表单、趋势图、数据请求、数据模拟等等。除了上面提到的一些可视化组件，NoahV还特别提供了布局应用，我们的布局应用除了左-右，上-下布局，还有运维领域中经典的左侧服务树与右侧应用的交互布局。此外，我们还把数据请求、数据交互与组件结合，并用配置化的开发模式来大幅度降低二次开发的成本。下面，我们就来详细介绍NoahV是如何帮助开发人员快速提升研发效率的。

NoahV把后端工程师变成了全栈

1.表格组件

在运维业务中，表格通常用来展示一些运维对象、运维事件列表（比如上线任务列表、监控任务列表、监控报警事件列表等）。但是运维的表格与基础表格不同的是，有一些运维对象，如图1，上线模板表格，除了渲染上线模板的列表信息，还需要按模板名称、创建时间进行筛选(图1.b)，对具体的一条模板信息进行编辑或者删除操作(图1.c)。所以运维业务中的表格应用通常包含了增删改查的操作，这类操作虽然简单，对于非前端人员上手这类开发还是需要一定的前端知识。我们在NoahV中把表格组件做了进一步的增强，用配置化实现数据展示，数据操作等行为的开发，让非前端开发人员轻松上手。

图1  上线模板表格

具体的配置看下图：

图2  上线模板表格配置

• columns：表格每列的数据定义，对应图1.a

• url: 表格数据请求的url，对应图1.a

• method: 表格数据请求的方式，对应图1.a

• items: 表格筛选的交互，对应图1.b

• action: 表格编辑，删除的数据交互，对应图1.c

在前后端分离的开发模式中，前端需要后端提供数据，但是后端通常还没开发完毕，这个时候前端就需要按照固定的数