Unveil the mystery of noahv intelligent operation and maintenance front-end framework


Author profile: Mo Haiyan, senior front-end R & D Engineer of Baidu
Baidu intelligent operation and maintenance (Noah) product front-end technical direction director, in the operation and maintenance data visualization, front-end solutions in the background, etc., has rich practical experience.

Overview of dry goods

As we all know, there are three main front-end frameworks: Vue, react and angular. These front-end frameworks can help us build projects quickly, but we often need to invest a lot of energy in the actual project to use other code bases and applications as supplementary support (such as: need some basic UI component library, need HTTP request library, etc.), in addition, they can be applied in different fields There will be a lot of repetitive work in the domain.

Because of the above reasons, we have built our own intelligent operation and maintenance front-end framework, noahv (now open source), which can provide common O & M component libraries and tools, such as tables, forms, trend charts, data requests, data simulation, etc., in combination with operation and maintenance business scenarios. In addition to the visual components mentioned above, noahv also provides layout applications. In addition to the left-right and top-down layouts, our layout applications also have the classic interactive layout between the left-hand service tree and the right-hand application in the operation and maintenance field. In addition, we combine data request, data interaction with components, and use the configuration development mode to greatly reduce the cost of secondary development. Next, we will introduce in detail how noahv helps developers to improve R & D efficiency quickly.

Noahv turns the back-end engineer into a full stack

1. Table component

In operation and maintenance business, tables are usually used to display some operation and maintenance objects and operation and maintenance event lists (such as online task list, monitoring task list, monitoring alarm event list, etc.). However, the operation and maintenance table is different from the basic table in that there are some operation and maintenance objects, such as Figure 1. The online template table. In addition to rendering the list information of online template, it is also necessary to filter by template name and creation time (Figure 1. B), and edit or delete a specific template information (Figure 1. C). Therefore, the table application in operation and maintenance business usually includes the operation of adding, deleting, modifying and checking. Although this kind of operation is simple, it still needs some front-end knowledge for non front-end personnel to start such development. We have further enhanced the table component in noahv, and realized the development of data display, data operation and other behaviors with configuration, so that non front-end developers can easily start.

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

The specific configuration is shown in the following figure:
Unveil the mystery of noahv intelligent operation and maintenance front-end framework

  • Columns: data definition of each column in the table, corresponding to figure 1. A
  • URL: the URL of the form data request, corresponding to figure 1. A
  • Method: form data request mode, corresponding to figure 1. A
  • Items: interaction of table filtering, corresponding to figure 1. B
  • Action: table edit, delete data interaction, corresponding to figure 1. C

In the development mode of separating the front end and the back end, the front end needs to provide data from the back end, but the back end has not been developed yet. At this time, the front end needs to simulate the data according to the fixed data structure. Simulation data is actually a very tedious work. For example, in our actual business scenarios, there are many requirements for such applications as the table above. Simulation data is a repetitive work. In noahv, we use the noahv mockup tool to generate such repetitive applications.

Noahv cli is our command-line tool, which contains the noahv mockup module. There is a command in this module, which is noahv create command. When noahv create is executed, it prompts to input the interface name of simulation data. The interface name consists of a specific file path + file name, such as inputting API / table, The API folder is automatically generated in the mockup directory, and table simulation data is created in the API folder.

Note: before using noahv create, you need to install the noahv cli command-line tool. For more detailed steps, please refer to our document center( https://baidu.github.io/NoahV )。

2. Layout and Application

Form is a common front-end application, of course, there are some applications such as form applications, list applications and so on, but these applications can not become independent pages. This separate page contains navigation, breadcrumbs, content body, and some pages have more complex layout. Therefore, how to layout the front-end is a concern for many developers.

2.1 top down layout

We often use top-down layout, or left-right layout mode. Usually, the top of the top-down layout is the head navigation, and the bottom is the content body. The head navigation includes the first level navigation, the second level navigation, and the login / logout. For this kind of common layout requirements, we have also made a unified package in noahv, that is, navigation configuration. Let’s take a look at the effect map of navigation configuration.

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

A corresponds to logo, B to navigation menu, C to login, D to bread crumbs, and e to content body.

Let’s take a look at how to configure the above interface:

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

  • The logo in Figure 4 is the configuration of the logo in Figure 3. A
  • Header is the menu navigation configuration of Figure 3. B
  • Login is the login configuration for Figure 3. C
  • Separator is the configuration of bread crumbs in Figure 3. D. hasbread can configure whether bread crumbs are needed or not

2.2 left right layout

In addition to the top-down layout, there are also left-right situations. As the name implies, it is left-hand navigation and right-hand content body. Generally, head navigation and left-hand navigation are linked. In fact, in the navigation configuration in Figure 4, we can see that there is a type type type. There are two values for type type type Header / header sidebar. Depending on the specific value, the corresponding header sidebar is the case of head navigation and left navigation. We directly change the type value in Figure 4 to header sidebar to get the following layout interface:

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

2.3 custom layout extension

Of course, the page layout is far more than these two situations. For example, in the operation and maintenance scenario, we have many interactions that operate on a certain node of the service, so there is a service tree on the left and the application corresponding to the service node on the right. This kind of layout requires the front-end developers to do their own custom layout development. We switch the general layout and custom layout on the entry page of the layout, which can be switched between the two modes. We provide a layout file for custom layout. If you need a custom pattern, you can import this file and use it.

Noahv scalability is a powerful tool for front-end engineers

The above details the table components in noahv and how layout components can help developers solve efficiency problems. Next, we will give a more comprehensive introduction to noahv from the perspective of architecture. Here is the architecture of noahv

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

From this architecture diagram, noahv is composed of three parts: the first is the main body of noahv architecture, the second is noahv tools, and the third is noahv specification.

The main body of architecture is the main part of noahv, which is composed of underlying dependency, component, scene, page and system. Noahv also provides tools for project initialization, page creation, data simulation, joint debugging and release. The architecture body and tools follow our development specification, UI specification and API specification. Let’s take a closer look at the three parts of noahv.

1. Noahv architecture main body

The main body of noahv architecture is divided into five layers. The first layer is the underlying dependency of noahv, Vue JS. The second layer is components. We usually refer to components as basic UI components, such as element UI, iView and other component libraries, such as input, select, etc. combining basic UI components with our operation and maintenance objects and operation and maintenance operations is our operation and maintenance UI components, such as the table components mentioned above. In operation and maintenance business, in addition to basic UI components such as trend chart and histogram or operation and maintenance UI components, our dashboard also needs the layout of trend chart components and dashboard display. We put these several components together, which is our scenario. The assembly of basic UI components, operation and maintenance UI components and scenarios is our page. Through navigation, routing and so on, the various pages are combined to form a complete system.

Next, let’s take a look at what tools noahv has in its development, joint debugging, and release phases.

2. Tools of noahv

2.1 development phase

When the project enters the development stage, we use the project initialization tool to initialize the project. Developers can also use the page creation tool to create pages, components, etc. according to their own needs. The generated pages and components can be developed in a configurable way. Of course, developers can do custom development in the way of extension according to the layout mentioned above. In the development phase, we also need to use simulation data, so noahv uses data simulation tools to automatically generate simulation interfaces. With data, data requests are needed. For data requests, there are fetch, Axios and other efficient HTTP libraries on the market. However, in actual business scenarios, we need to deal with such requirements as restful interface support, unlisted jump, global loading and so on. These are not encapsulated in fetch and Axios, so noahv of noahv Request has integrated and encapsulated these requirements, and it can also provide hook entry through request hook, so that developers can adapt and transform data before and after successful request.

For more details on the use of noahv request, please check our usage documentation( https://baidu.github.io/NoahV… )。

2.2 joint commissioning stage

When the development is completed, it will enter the stage of joint debugging before and after. When the front-end and the back-end are in joint debugging, the front-end project usually has its own services. Therefore, when calling the back-end interface, there will be cross domain data access problem. In order to solve the cross domain problem, noahv introduces the proxy function when the project is initialized, which can proxy the browser’s request to the target server, thus bypassing the security limit of the browser’s same source policy To achieve cross domain data access, you only need to add the relevant configuration in devproxy. Finally, when the project is released, the front-end is published as static files, which can be accessed directly through the back-end service, so the proxy service is not needed.

2.3 release phase

For the compilation and release of the release phase, we combine webpack and Babel to implement the development phase of noahv. In the release phase, we install the general webpack loader and weback plugin to parse the corresponding files. We also add webpack plugins such as data statistics, so developers do not need to pay attention to the specific compilation process. Noahv also provides webpack and typescript environment configuration, so developers can choose their own development environment according to their own project needs.

3. Noahv specification

The above basic UI components, operation and maintenance UI components, scenarios, pages and related applications generated by some of our development tools follow our development specifications, UI specifications and API specifications. We use command-line tools to initialize applications, create pages, and so on. When creating pages, we automatically add page routes. So the command-line tools automatically automate and standardize the logic of page creation, page layout, page navigation, and page routing. At the same time, the elements such as component, page layout, page navigation and page routing are configurable. These configurations make it easy for non front-end developers to get started. Developers can also make customized extension development according to the actual needs of the project.

After so much introduction to noahv, let’s take a look at how to use noahv.

How to use noahv

Before you start, make sure that it is properly installed and configured Node.js V6.5 or above.

How to install:

npm install noahv-cli -g

noahv –help

Run noahv – help to get the following interface:

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

Step 1: initialize the page

mkdir project && cd project && noahv init

If you create a dashboard, the application uses noahv init — dashboard

If you want to use typescript to develop applications, use noahv init — ts

Start the application with noahv start

After starting the application, you will see the following interface:

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

Step 2: create a page

noahv create list

The current creation function of noahv includes noahv create action | list | filterlist | form | chart | API | test. For more details, please refer to our user documentation.

Please also refer to our documentation for noahv mockup, noahv request, noahv test, etc( https://baidu.github.io/NoahV… )。

When creating the corresponding application, the console interface will have the corresponding prompt:

Unveil the mystery of noahv intelligent operation and maintenance front-end framework

Step 3: publish the project

sh build.sh

Running the build script will automatically package and compile the whole used project.


The front-end framework of noahv operation and maintenance is introduced as a whole. In our actual project, it greatly improves the R & D efficiency of operation and maintenance products. At the same time, through the noahv framework, our product ease of use and experience consistency have been greatly enhanced.

For more details, please check: https://baidu.github.io/NoahV

Noahv is now open source, GitHub address: https://github.com/baidu/NoahV

You have any questions or want to know more, you can contact us directly backstage, there is a small editor waiting to communicate with you~


If you like this article, please share it with friends. If you want to get more information, please pay attention to us!
If you have any questions, please leave a message~
If you want to try our enterprise class operation and maintenance platform noahee, please contact Noah_ [email protected]