We made a page visualization to build an open source project

Dooring has been open-sourced since its first version in 2020. Up to now, four years have passed. Based on the ultimate pursuit of technology and user experience, we have made a large number of updates and iterations every year, expecting to achieve the best building experience for users and cover more usage scenarios. Also, I am very grateful to the partners who work with me on Dooring, which enables the Dooring series of building products to continuously precipitate and evolve in the trend of technology.

Some achievements obtained by the end of 2023:

• GitHub star: 8.6k+
• Cumulative online registered users: 10,000+
• Total number of online pages: 10,000+
• Total number of templates: 1000+
• Total number of components: 50+ (continuously in production)
• Cumulative PV (page views): 500w+
• Cumulative UV (unique user visits): 10w+

I drew a picture so that everyone can better understand the technical solution of Dooring.

github：h5-dooring
website： https://dooring.net

If you want to learn the technology and implementation ideas it uses, you can refer to the above GitHub address.

Schema design and component development

The Schema is divided into two parts:

• The array of editable attributes of the editData component;
• The data actually consumed by the component config.

Detailed Explanation of editData

editData is an array of editable attributes of the component, and each item contains the following fields:

• key: Attribute name
• name: Chinese display of the attribute name
• type: Editable type of the attribute
• isCrop (optional)
• cropRate (optional)
• range (array of options when type is 'Radio' or 'Select')
• It may be expanded in the future (the detailed structure can be referred - to the open-source version of Dooring)

Both key and name can be determined according to the semantics of the component attributes. Here, it is worth mentioning type. The value types of different attributes are different, so the type of our editing item is also different. All the types are as follows:

• Upload: Upload component
• Text: Text box
• RichText: Rich text
• TextArea: Multi-line text
• Number: Numeric input box
• DataList: List editor
• FileList: File list editor
• InteractionData: Interaction settings
• Color: Color panel
• MutiText: Multi-text
• Select: Select dropdown box
• Radio: Radio button
• Switch: Switch toggle
• CardPicker: Card panel
• Table: Table editor
• Pos: Coordinate editor
• FormItems: Form designer

For more detailed code, you can refer to the directory of editor/src/core/FormComponents in the private deployment version.

Detailed Explanation of config

Essentially, config is an object, that is, the set of attributes that the component can expose, which is consistent with the key in each item of the editData array, as follows:

{
    cpName: 'Header',
    logoText: '',
    fontSize: 20,
    color: 'rgba(47,84,235,1)',
    height: 60,
    fixTop: false,
    menuList: [
      {
        id: '1',
        title: 'Home',
        link: '/'
      },
      {
        id: '2',
        title: 'Product',
        link: '/'
      },
    ]
  }

editData and config constitute the schema structure of a Dooring component. Therefore, we can find that each Dooring component has the following structure:

• index.tsx, the main file of the component (can integrate any third-party open-source libraries);
• index.less, the style file of the component;
• schema.ts, the schema of the component (component description protocol);
• editData;
• config.

Of course, the schema of the component can also be expanded according to one's own needs. If there are any questions in component design, you can communicate with me at any time.

Code generation capability

The code generation module mainly includes:

1. Generating the code of the compiled version page.
2. Generating the mini-program.
3. Generating the page JSON schema file.

Design of reference lines

This mainly draws on the veteran design software PhotoShop. We can conveniently generate reference lines (including the x-axis and y-axis) by double-clicking on the ruler in Dooring. We can drag the reference lines to any position on the canvas to realize the reference for the positioning of elements.

Communication of components

I have also shared several commonly used component communication schemes before, as follows:

• props/$emit
• Passing values from child components to parent components
• eventBus($emit/$on)
• vuex / redux
• $attrs/$listeners
• provide/inject

The specific implementation methods have been introduced in detail in the review of the communication scheme between components of the low-code platform. Here, I would like to share with you a communication scheme between components that I designed recently - custom event communication.

Yes, we are using CustomEvent.

Events are essentially a way of communication, a message mechanism. When we encounter multi-object and multi-module scenarios, using events for communication is a very effective way. In multi-modular development, custom events can be used for inter-module communication.

like this：

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));

Future Planning of Dooring Product

In 2024, Dooring will continuously optimize the user experience and launch more practical components and templates. The specific plans are as follows:

• Enrich the component library (more than 100) and template library (more than 1000)
• Support multi-person collaborative building capability
• Design a hierarchical permission system
• Application-level state management
• AI-assisted building + content generation
• Upgrade the form building engine to support distributed form building
• Launch the page analysis panel to empower the value of user data

If you have better ideas and practices, welcome to communicate and discuss with me.

Github address: https://github.com/MrXujiang/h5-Dooring