Building Fast, Flexible Marketing Pages: Inside the River Beaver Visual Builder

1. Introduction

The River Beaver system is Daily Fresh's self‑developed activity construction platform. It provides a rich set of business components and a visual, drag‑and‑drop interface that allows marketers to flexibly and efficiently build activity pages matching their marketing scenarios, while freeing developers from repetitive page development and greatly improving development efficiency.

2. Application Background

2.1 Problems Before River Beaver

In an e‑commerce company, each holiday requires a uniquely styled activity page. Maintaining different layouts and product arrangements for each event demands rapid development cycles, and manual development cannot keep up with the growing number of marketing activities, leading to overtime and duplicated work.

2.2 Core Issues Addressed

The system defines essential modules such as basic components, page design, assets, data updates, preview, and publishing. It identifies editable components like shelf product, image, text, and navigation, and addresses multi‑endpoint adaptation, rule‑based component control, rendering, and data distribution.

2.3 Goals and Outcomes

Free Development Resources : Eliminate repetitive module development and reduce manual configuration costs.

Rapid Activity Page Production : Shorten the traditional development workflow of requirement → scheduling → development → testing → deployment.

Business Empowerment : Enable operations and product teams to build pages independently, improving iteration speed.

3. Technical Implementation

3.1 System Architecture

The system consists of several modules:

Designer : A web backend for visual page construction, allowing operators to select components from published component libraries and configure data to generate H5 activity pages.

Component Library : Each library is a separate Git project built with Vue; multiple business lines can develop independent libraries.

Scaffolding : Provides developers with tools to create and publish component libraries quickly (Node.js).

River Beaver Node Service : Supplies services for the designer, such as component library access, page data, build deployment, and proxy.

Backend Services : Core services for products, marketing, etc.

3.2 Detailed Technical Parts

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]
        }
      ]
    }
  ]
}

3.2.2 Defining a Single Component

// your/component.js
import YourComponent from 'path/to/your/component.vue'
export default {
  name: 'component name',
  path: 'lib-name@path/to/your/component.vue',
  def: YourComponent,
  model: {},
  edit: [],
  validate(model) {}
}

The fields describe the component's file path, definition, configurable model, editor configuration, and validation logic.

3.2.3 Page Construction and Rendering

A page is described by a JSON schema that lists used component libraries and an array of element definitions. The designer allows operators to drag components onto the page, configure their data via the edit definitions, and then render the page by iterating over the elements array and loading each component by its path.

{
  "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": {}
    }
  ]
}

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

Operators can manage assets in a resource library, create new activity pages, drag components from the library onto the canvas, configure component data (including image hotspots and shelf products), and preview the built H5 page before publishing.

5. Future Outlook

Page Build Optimization

Current builds bundle components and page data together, ensuring stability for released pages but requiring a rebuild for any component update. Future work aims to separate component library packaging, enable versioned references, improve CDN caching, and allow urgent bug fixes without full page rebuilds.

Designer Interaction Improvements

Optimizing the designer’s interaction will further increase operators’ efficiency and reduce errors when constructing activity pages.