1. Introduction

The Beaver system is an activity building platform developed by Youwei Daily. The platform provides rich business components. Through the interactive way of visual construction, operation students can build activity pages in line with their own marketing scenes more flexibly and efficiently. At the same time, it also frees the r&d staff from the highly repetitive activity page development requirements, greatly improving the r&d efficiency.

The following will introduce the application background, system implementation and future outlook of beaver system in detail, so that students can have a deeper understanding of beaver system.

2. Application background

2.1 What is it like without beaver system

For an online e-commerce company, festivals mean activities, activities mean means of operation, the most basic operation to improve the online ordering rate is to adapt to the atmosphere of festivals, targeted targeted delivery of commodities.

Take the Spring Festival for example, all kinds of New Year goods, the theme is not the same every year, the style is not the same, the way of commodity collocation is not the same, from Laba to New Year’s Eve, if you want to ensure a style a style every day, need to develop fast iteration, the page layout has changed need to be re-developed, the commodity collocation has changed need to be re-developed. If the page is developed in advance and the keywords are different at some point, the page elements are not guaranteed to be consistent.

Always can’t, the boss said tomorrow to engage in children’s day merchandise promotion, today will have to develop children’s day style page, development head, operation is also a big head, such as the completion of the development test online, and then make promotion. Mental explosion.

With the continuous growth of the page, marketing activities, advertising, page revision and other needs are multiplying day by day, simple manual development has been completely unable to keep up with the growth rate of demand, easy to cause in order to do repetitive work and overtime, increase personnel, etc..

In different areas of the activity page address is the same only individual pictures are different, need to maintain different pages

2.2 What is the core problem to be solved by beaver system

  1. Which modules are required for visual construction

Basic components, page design, materials, data updates, page preview, release. 2. Analyze which components can be used to edit shelf commodity components – commodity code, shelf style… Picture component – Picture, hot spot click, jump action… Text components – content, size, color… Navigation components – menu classification, anchor location… 3. Interaction between components and data 4. How to adapt to multi-terminal 5. 7. Page multi-component interface merges data distribution

2.3 Objectives and results

  1. Release development resources

To solve a large number of repeated modules, modify complex and scattered configuration requires development manual maintenance, high cost, a large number of repeated development work. Low development efficiency, long activity development cycle and other problems 2. Quick output of activity page Previous page development, need demand communication -> scheduling -> development -> test -> deployment online cost is too high. Communication cost, development cost, page layout modification, data replacement, activity theme, keyword replacement, etc. The Beaver system supports the operation of its own matching pages, using different components, configuring different data, control time, and publishing pages are completed by the operators themselves, which reduces communication costs and development resources. Operation students can build their own activity pages according to their own ideas, plans and activity promotion strategies. 3. Business enabling operation and product building by themselves, without development, to improve the efficiency of business iteration. 1). Provide more flexible tools to generate pages and provide operation personnel to create active pages. 2). The same kind of page requirements, only do one, other reuse. Reduce development time. 3). Visual construction of page UI, developers only need to supplement necessary business logic, improve development efficiency.

3. Technical implementation

3.1 System architecture design

The system is mainly divided into the following modules:

  1. The designer

Provide the WEB background of visual building page for operation students; In this background, operation students can use the component library published by developers to freely select components and configure corresponding data to build a page that meets their own needs. After building the page, they can directly publish and generate an online H5 activity page, and then get the link to launch the activity. Technical selection: VUE-CLI

  1. Component library

Component development is actually the same as normal VUE project development. Each component library is a separate GIT project. You only need to develop components in accordance with the format agreed by the system, and after release, you can use them in the designer. The component libraries of each business line can be developed independently without any influence on each other. Technical selection: VUE

  1. The scaffold

For developers, scaffolding makes it easier to develop component libraries and quickly publish/configure component libraries. Technical selection: Node.js

  1. Beaver Node service

It provides the required services for the designer, mainly such as component library/page data/construction and deployment /proxy, etc. The designer directly interacts with the beaver server. Technical selection: think.js

  1. The back-end service

Basic background services, such as merchandise/marketing, etc.

3.2 Technical implementation details

3.2.1 How to define a Component Library

Component library Definition
// index.js
import YourComponent1 from 'path/to/your/component1.vue'
import YourComponent2 from 'path/to/your/component2.vue'
import YourComponent3 from 'path/to/your/component3.vue'
import YourComponent4 from 'path/to/your/component4.vue'
// more components

export default {
  name: 'Component library Name'.packages: [{name: 'Component library Subcontracting 1'.cates: [{name: 'Component Library Subcontracting 1 - Category 1'.coms: [
            YourComponent1,
            YourComponent2,
            // ...] {},name: 'Component Library Subcontracting 1 - Category 2'.coms: [
            YourComponent3,
            YourComponent4,
            // ...]}]}, {name: Component library Subcontracting 2.cates: [{name: 'Component Library Subcontracting 2 - Category 1'.coms: [
            YourComponent5,
            YourComponent6,
            // ...] {},name: 'Component Library Subcontracting 2 - Category 2'.coms: [
            YourComponent7,
            YourComponent8,
            // ...]}]}Copy the code

The above is the entry file of the component library. When the component library is released, the bundle package of the component library will be constructed based on this file as an entry. The bundle package is used in the designer.

Single component definition
// your/component.js
import YourComponent from 'path/to/your/component.vue'
export default {
  // Component name
  name: 'component name'.// Component vue file path
  path: 'lib-name@path/to/your/component.vue'.// Component definition
  def: YourComponent,
  // Component configuration data
  model: {},
  // Component data editor
  edit: [].// Verify component configuration data
  validate(model){}}Copy the code

As above defines the basic structure of a component, including: path: defines the component implementation file path, namely the lib -name path/to/your/component in the component library. The vue file, build the H5 page, find the corresponding component through the path to realize file package build; Def: used when building component library bundles. Component implementations are retrieved and rendered directly in the designer. Model: You are free to define the configuration data needed for this component; Edit: describes what editor should be used to edit the configuration data in this component. Validate: The validate function, which is executed when the component configuration is saved, to verify whether the data configuration is valid.

3.2.2 How to Configure Component Data

Editors that use the Edit field to describe the configuration of component data are mentioned in the component definition. These editors are implemented in the designer and are used in the component definition by specifying the corresponding editor type:

export default {
  // ...
  edit: [{label: 'Configuration Field 1'.model: 'model.field.path.1'.type: 'edString'}, {label: 'Configuration Field 1'.model: 'model.field.path.2'.type: 'edColor',},// ...]}Copy the code

In the above definition, the model.field.path.1 field in the component is configured using a text editor, and model.field.path.2 is configured using a color editor,…… To support additional forms of data configuration, you only need to implement the corresponding editor in the designer and use it directly in the component definition.

3.2.3 How to build/render a page

With the components defined above, we can define a page’s JSONSchema to represent the overall structure of the page, as follows:

{
  "id": 123."title": "page title"."name": "page name, display & search in Designer"."libs": [
    "lib-name-1"."lib-name-2"]."elements": [{"id": 1234."name": "component name"."path": "lib-name@path/to/your/component.vue"."model": {}},// more elements ...]}Copy the code

In the above structure, liBS represents the component library used by the page, and the Elements array describes the composition of the page. In the designer, operations students can drag and drop components to the page, adjust the component data, that is, manipulate the Elements array, and configure each component data according to the Edit in the component definition. Once configured, the data structure that generated the page above can be saved. In the H5 page, we can find the implementation of the corresponding component by looking at the path field in the component, and then we can render the whole page one by one by using the Elements array.

3.2.4 How to construct THE H5 page on the C-side

According to the JSON description of the page, we can clearly know the component library and components used by the page. During construction, we only need to introduce corresponding components according to the path of each component, and package together with the JSON data of the page into H5 static page.

3.2.5 How are components rendered

Render components of component library components

// CommonRender.vue
<template>
  <div class="element-box">
    <component :is="com.def" :element="element"></component>
  </div>
</template>
<script>
export default {
  inject: ['getComDef'].props: ['element'].computed: {
    com() {
      return this.getComDef(this.element)
    }
  }
}
</script>

Copy the code
Page entry
// App.vue
<template>
  <div class="">
    <CommonRender v-for="element in elements" :key="element.id" :element="element" />
  </div>
</template>

<script>
import CommonRender from 'path/to/CommonRender.vue'

// Build the component used to type the page, with the path field as the key
import Component1 from 'lib-name/path/to/your/component.vue'
const components = {
  [`lib-name@path/to/your/component.vue`]: Component1
}

export default {
  provide: {
    CommonRender,
    getComDef(elm) {
      return {
        def: components[elm.path]
      }
    }
  },
  data() {
    return {
      elements: [] // Type elements data into the page when building}}}</script>
Copy the code

4. Operation example

Resource library use

The material library is convenient for unified management of the materials used in building activities. For example, before creating an activity, create a material directory corresponding to the activity and upload the materials required for subsequent page building.

Create an active page

Click “New” in the page list to start building your own active page, configure the active name/page title/share information and other page configurations, click “Save”, an empty active page has been created.

Select component/configuration data

Select the component you need from the component library on the left and drag it to your page. Click Data Configuration to configure the relevant data of the corresponding component. After saving, you can see the effect of the configured component displayed on the page in real time.

Configuring image Components

Select the image to be used from the material library, you can customize the hot area on the picture, configure the click event of the area;

Configuring shelf components

The theme color of the active page can be configured in the page and optionally used in the component configuration.

Rack goods

The order of goods can be adjusted according to the need, or intelligent sorting method can be used to sort by big data.

Build the page

After the page is built, click the preview button in the upper right corner to start building the page. After the page is built, you can see the actual page display effect and the obtained links can be put into use.

5. Future outlook

Build the page

Each time a page is built, components and page data are bundled into a bundle according to the configuration. The advantage of this is that published pages are not affected by subsequent changes and can run stably online. The downside is the same. If the version running online is faulty, the page must be rebuilt and published after the component library update is fixed. At the same time, for the component library resource files that are not updated so frequently, the CDN cache cannot be hit stably alone.

In the future, we can further optimize the strategy of build packaging, build component libraries separately and publish them online, and reference corresponding components through version control in the page, which is conducive to component library resource files matching CDN cache and improving page loading speed. Meanwhile, we can also establish an emergency bug repair mechanism for component library online.

Designer interaction optimization

The optimization of the interaction of the designer can effectively improve the efficiency of running the activity page set up by students, and also reduce unnecessary mistakes.

Author: Dai Huibin, head of research and development of beaver system

, recruiting

If you are also interested in this, come and join us, we are part of the daily Fresh marketing front end team. Internal email: [email protected], working place: Beijing