preface

Some time ago, I posted a sentence in the circle of friends: “All kinds of self-built platforms, I think of all kinds of DIY blogs and industry portals for many years. The essence remains unchanged, but what has changed is the means of implementation. This morning reading article is shared with authorization from Beijing 58 Information Technology @Refector.

The text starts here ~ ~

This article mainly introduces the practice of building visual editing platform based on React, including the implementation of visual drag-and-drop layout, online editing, and isomorphism.

background

At present, the person of outstanding ability of HRG campus there are a large number of online recruitment business enterprise customization requirements, enterprises in the talent campus recruitment, at the same time also hope to have their own recruitment page, recruitment of part-time students every year to develop this kind of recruiting home page, this kind of recruitment page usually is not complicated, but if all need front students realize, is time-consuming, We hope to continuously improve the delivery efficiency of this type of business through technical means.

Mention effective planning

The projects related to customized pages were carried out through static pages in the early stage. Pure static pages are easy for developers to get started, but it is difficult to make componentization. The on-line process is completely manual and the cost is too high, so we plan to gradually promote the efficiency through visual editing.

The project is divided into two phases:

One phase, the realization of visual online editing, publishing, support streaming layout, absolute positioning layout, isomorphic straight out, animation, provides a common component library.

Phase ii supports component expansibility, provides component development tools and component market. Phase III is still in the improvement stage and has not been released yet.

demo

First look at our system demonstration, and then step by step in-depth analysis, mainly visual editing system development ideas, as well as the realization of key modules.

Play

System dimension analysis

For visual editing platform, we did some research, some ideas we think are very meaningful, here to share, refer to the article see the references.

In our system, the above dimensions should be marked with the following three:

System function

Component Tree editing, the core function of the page visual layout design

Pages are composed of components, which can support nesting. Currently, components are generic components, which will support extension later. Components can host business logic.

Drag-and-drop layout support, streaming layout support, absolute positioning layout.

Geared to the needs of customers

Front-end small white, the core appeal is high interaction, WYSIWYG editing

Currently, it is used by part-time students in the group. I have a certain foundation of front-end layout and understand how to use each component.

If you want to reduce the requirements for users, such as for ordinary users, then you need to provide template support. For ordinary users, it is enough to change the background image, change the image, edit the text. The more you want to reduce the requirements for users, the more you need to solidify some design and data models.

Edit degree of freedom

Front-end framework components, rely on tools to provide components, high editing efficiency, high encapsulation of business logic

At present, the degree of freedom of the system is component level, which has built-in common components, including:

  • Basic components: images, text, tables, template components

  • Complex components: data lists, running lights, carousel charts, tables

  • Layout: anchor layout, standard layout, TAB layout

  • Containers: upper and lower flow (block), left and right flow (inline block), free container (absolutely positioned layout)

These components are built into the system, the second phase of the component market, the goal is to be scalable components, components can carry business, business logic packaging degree is higher, easy to use.

The technical implementation

The technology stack of the system is as follows:

  • React + Redux + ImmutableJs + ReactDND + Antd

  • Back-end: Node Express + MongoDB + Redis

Visual layout

First, you need to define the data structure of the rendering UI, which is usually a tree structure represented by a large JSON, and then recursively render it.

A structure similar to the following:

Nodes use a virtual DOM structure similar to React:

  • Type: indicates the component Type

  • Props: Component properties

  • Children: List of Children of the component

  • Sort: indicates the Sort number

Due to the direct use of the tree structure, the increase, deletion, change and check of nodes is not friendly, so the flattening process is carried out, and the tree is divided into two structures:

A:

The relationship between storage nodes is similar to a two-dimensional table in a database. It describes the parent-child relationship of nodes, which facilitates the modification of the parent-child structure and hierarchical ordering.

Structure of the two:

Storage node data. You can obtain node data by ID to facilitate node data update.

Second, once the data structure is defined, it’s time to render the page, merge the two above data into a tree structure, and then iterate recursively to create the component object.

When creating a component, you need to obtain the corresponding component Type, such as navigation component, wheel map component, so you need a component Type mapping table, obtain the corresponding Type according to the Type of the component, and create an instance.

The layout function is drawn into the container, so the component will wrap the corresponding container when it is created. The location of the component is responsible for the container. Different containers provide different functions, and containers are provided by higher-order components.

As shown below:

The typeFactory is responsible for creating components and wrapping the corresponding higher-order components.

Here is the rendering process of the component in the edit state. After publishing, the tree structure of the component is pre-created to consider the rendering performance.

Finally, the implementation of drag layout, layout is completely responsible for the container, drag process position detection by the container to achieve, through the mouse position to determine the location of components, modify the description of the component relationship data, trigger re-rendering.

Streaming layout demo:

Free layout demo:

Component property editing

Component layout, in addition to the layout, but also to the component properties for editing, editing is also through the container to achieve, through higher-order components to reuse.

Components also need to follow a specification that makes it easy to get the component’s property list and add additional static properties to the component to explain its property description.

The system provides a component property editor and supports extension to other custom editors.

Play

Homogeneous straight out

Because custom pages need SEO, so do server-side rendering, which is to do isomorphic straight out.

To do isomorphism straight out, the following should be considered:

  • Global Store (Redux)

  • CSS extraction in components (Glamor)

  • Build a separate component library for the Node side, ignoring references to less within the component

  • Set externals to avoid excessive packets

  • To obtain data asynchronously within a component, add the static property getInitProps to the component (see the Next framework)

The component tree and component attribute data are stored in Store. Not only HTML is directly printed, but also the corresponding CSS is included. Glamor, a CSS in JS scheme, is used here.

The following is the general process of isomorphism:

Isomorphism straight out of the rendering result:

In order to reduce the size of the first rendering page, instead of embedding the state data into the page, a state request link is provided to load the state data asynchronously.

After the completion of the first stage, I started to run support services online, and now I have supported more than 100 customized page projects. Through online editing, modification and release, I have saved most of the time of coding, construction and release, and greatly improved the development efficiency.

Component extensibility

Since the first stage is the built-in component library, including general components and components related to custom page business, the second stage hopes to realize the extensibility of components, improve the application scope of the platform, realize the page-level components, and enhance the ease of use.

The component market

A component marketplace is a collection of components that provide optional components, with a granularity that can be controlled by the developer, component-level, page-level, embedded business, or generic components.

Component development CLI tool

Provides component development scaffolding, local development, debugging environment, can publish components to the component market.

Component dynamic loading

In order to dynamically load components, we developed a module loader BondJs, which can dynamically load all components dependent on the page and register the components in the system.

At present, the component market is still in the stage of improvement. We plan to go online by the end of the year and run in for a period of time. In the later stage, we hope to accumulate more templates and access other businesses to improve the efficiency of operation projects.

The follow-up to the second phase can be explained in more detail if I have the opportunity, but I won’t expand on it here.

Usability analysis

At present, the platform is for internal developers to use, because the editing freedom is high, which requires a certain front-end foundation. The system also provides template function, which is relatively easy to edit directly from the template. However, it is still for the editing of elements in the page, which is still difficult for operation/product/enterprise users.

For ordinary users, the model is not easy to understand the page elements, but the business model, such as user information, enterprise information, this kind of position information closer to the user model, so the students in the late group and the back-end classmates development solution based on the back-end template, this scheme has the advantage of employers can take advantage of the enterprise data model, For example, enterprise introduction, job list and other data, and then provide multiple back-end preset templates, enterprises only need to maintain their own information, and then select a template, can meet the requirements of the customized page is not so high users.

Flexibility and ease of use need to be balanced. The more flexible the components are, the worse the ease of use is. Generally, pre-defined components are used to improve the ease of use.

conclusion

At present, the editor has support for the Project of 100 + platform, in view of the complexity of the Project can greatly improve the development efficiency of the whole Project because it is a Side Project, and support the business development, so spent a lot of time, looking back on it, do this kind of Project, the first thing to have clear goals and audience, is energized for developers, Visual layout is not a silver bullet, so think about where it really affects your productivity. For example, some projects develop quickly, but it is difficult to improve efficiency in the face of frequent modification of users’ requirements. In turn, it is necessary to control the change of users’ requirements. If customers’ requirements are not high, it is ok to directly provide a default template, or provide a variety of choices, so that users can choose a relatively satisfactory template.

In the future, the component market will be launched, and we hope to access different business lines, provide more business-oriented components or page templates, improve the application breadth of the system, and improve the development efficiency of operational projects.

About the author: @ Refector original: https://zhuanlan.zhihu.com/p/94016600

Recommend to you

[Issue 1527] Continuous iteration of e-commerce visual operation page generation system

[Issue 1524] Key technical points of page visualization building tools

[Issue 1282] Page visualization building tool past life and present life

Recommend an online share

[Online Sharing] Event Operation Visualization Generator project