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, there are a large number of our campus online recruitment business enterprise customization requirements, enterprises in the talent campus recruitment, at the same time also hope to have their own home page recruitment, recruitment of part-time students every year to develop this kind of recruiting home page, this kind of recruitment page usually not complex, but if all need front classmate, 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.
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.
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.
The component market
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.
reference
Page visualization build tool past life and present life