Transforming E‑commerce Activity Pages: Inside the River Beaver Visual Builder

1. Introduction

The River Beaver system is Miss Fresh's self‑developed activity construction platform. It offers a rich set of business components and a visual, interactive way for operators to quickly build activity pages that match marketing scenarios, freeing developers from repetitive page development and greatly improving development efficiency.

The article introduces the system's background, implementation, and future outlook.

2. Application Background

2.1 What it was like before River Beaver

For an e‑commerce company, festivals require activity pages that match the theme, demanding rapid development and frequent redesign of layouts and product placements. Manual development cannot keep up with the growing number of marketing activities, leading to overtime and duplicated work.

2.2 Core problems River Beaver solves

Key modules needed for visual building include basic components, page design, assets, data updates, preview, and publishing. Editable components cover shelves, images, text, navigation, and their interaction with data, multi‑device adaptation, rule control, rendering, and data distribution.

2.3 Goals and results

Free development resources : Eliminate repetitive module development and high maintenance cost.

Rapid activity page production : Reduce the costly chain of requirement communication → scheduling → development → testing → deployment.

The system enables operators to assemble pages, configure data, set timing, and publish without developer involvement, lowering communication and development costs.

Business empowerment : Operators and product teams can build pages independently, improving iteration speed. Benefits include a flexible page generation tool, component reuse, and visual UI construction where developers only add necessary business logic.

3. Technical Implementation

3.1 System Architecture Design

The system consists of several modules:

Designer : Web backend for operators to visually build pages using a component library.

Component Library : Each library is a separate Git project built like a normal Vue project; developers publish components that the designer can use.

Scaffolding : Helps developers create and publish component libraries quickly.

River Beaver Node Service : Provides services for the designer such as component library access, page data, build and deployment, proxy, etc., built with Think.js.

Backend Service : Basic services for products, marketing, etc.

3.2 Detailed Technical Implementation

3.2.1 Defining a Component Library

// 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: 'Package 1',
      cates: [
        {
          name: 'Package 1 - Category 1',
          coms: [YourComponent1, YourComponent2]
        },
        {
          name: 'Package 1 - Category 2',
          coms: [YourComponent3, YourComponent4]
        }
      ]
    },
    {
      name: 'Package 2',
      cates: [
        {
          name: 'Package 2 - Category 1',
          coms: [YourComponent5, YourComponent6]
        },
        {
          name: 'Package 2 - Category 2',
          coms: [YourComponent7, YourComponent8]
        }
      ]
    }
  ]
}

This entry file becomes the bundle used by the designer; packages and categories help organize components.

3.2.2 Configuring Component Data

Components define an

edit

field that describes which editor to use for each data field.

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

New editors can be added to the designer to support additional data types.

3.2.3 Page Construction / Rendering

A page is described by a JSON schema that lists used component libraries and an

elements

array describing each component instance.

{
  "id": 123,
  "title": "page title",
  "name": "page name",
  "libs": ["lib-name-1", "lib-name-2"],
  "elements": [
    {
      "id": 1234,
      "name": "component name",
      "path": "lib-name@path/to/your/component.vue",
      "model": {}
    }
    // more elements ...
  ]
}

During build, each element’s

path

is used to locate the component implementation and render it into the final H5 page.

3.2.4 Rendering 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>

// App.vue
<template>
  <div>
    <CommonRender v-for="element in elements" :key="element.id" :element="element" />
  </div>
</template>
<script>
import CommonRender from 'path/to/CommonRender.vue'
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: [] } }
}
</script>

4. Usage Examples

Resource Library

Materials are organized in a library for each activity, allowing operators to upload assets before building pages.

Creating an Activity Page

Click “New” in the page list, fill in page name, title, share info, and save to create an empty page.

Selecting Components and Configuring Data

Drag components from the left library onto the canvas, then configure their data; changes are reflected in real time.

Configuring Image Component

Choose an image from the resource library, define hot‑spots, and set click actions.

Configuring Shelf Component

Set the theme color for the activity page and apply it in component configuration.

Configuring Shelf Products

Adjust product order manually or let big‑data algorithms sort them automatically.

Page Build

After completing the layout, click the preview button to build the page; once built, the link can be used for promotion.

5. Future Outlook

Page Build Optimization

Current builds bundle components and data together, ensuring stability for released pages but requiring a rebuild for any component update. Future work aims to separate component libraries into independent bundles with version control, improving CDN caching and enabling rapid bug fixes.

Designer Interaction Improvements

Enhancing the designer’s UI will further boost operator efficiency and reduce errors.