After preliminary finished the flow chart of online editing tools, and received the online tool needs, set up page started actually don’t want to project, because from the historical and realistic reasons, personalized and dynamic rendering is difficult to solve the pain points, H5 page set up tools of tepid already shows this road is not so easy, but in another ways, either However, such a demand shows that there are problems in the actual work process. In order to solve the problem, we can sort out the bottom development specifications from tools and new components, so as to enhance the importance of the front end department of our company. You have to dream, don’t you?

Introduction to the

Ant Design was used for some of the UI components in the first release of the project to speed things up. So far the process of creating a page template internally and publishing it to a user server has been largely resolved.

The target

Quickly generate page templates by pull and drop mode, preview and publish.

Using population analysis

Ordinary users need what you see is broken to edit mode, through simple, learning of low cost of operation, such as drag and drop page elements to achieve the result that quickly generate the page. Of course, when there are too many elements on the page, the actual drag-and-drop method is not as easy to locate and edit as the tree structure (see ps and other software).

For the operators and even the original template makers, in addition to operating existing components for page layout, they also hope to complete the active page of independent business scenarios through attribute configuration and method modification.

For middle background system developers, a large number of form pages and more complex business process flow, not only need page building tools, and even do online IDE is not too much, of course, the current version does not need this complex scene. However, this situation still needs to be analyzed when considering the overall architecture.

Why use visual scaffolding instead of developing your own UI framework?

On the one hand tools to improve the efficiency of internal development, faster to complete the modification and simple production requirements, and the research of UI framework the difficulty is how to continue to input, for small and medium-sized enterprises, the profit is the ultimate goal, is for the template developer, a open source libraries have many sample and solutions, in the practical work can also save a lot of time. Several front-end UI component libraries that failed internally in the past have shown this, and development costs, actual use cases, problem solving, and related documentation can all cause problems.

On the other hand, with the massive expansion of the business, the human cost required by each business line is getting higher and higher, gradually leading to a vicious circle. From a user perspective, longer delivery times result in a significant decline in experience and quality, hindering further development.

Combined with actual situation

This time the focus is on how to improve the development efficiency of the junior front-end developers and to solve the operational staff after the launch of maintainable issues. Then, from the product form, you can refer to Dreamweaver part of the interface, such as design view and preview view. This can reduce the learning cost of most of our template developers. In addition, special personalization needs are addressed by providing partially open code editing capabilities. In this regard, my initial vision of using an existing front-end framework to upgrade and push for new component development specifications was unrealistic. Therefore, we decided to use react to implement the tool itself. The component part combined with the existing background template string method, divided the style and script namespace, and loaded as needed.

Function implementation

According to the above sorting, the core function of the tool lies in the drag-and-drop layout and component attribute editing in the editing state and the parsing and display part in the preview mode. Then define the new component development specification according to the actual situation, and prepare the component management system, can accomplish the initial release goal. The components here still use the original HTML+ JS + CSS development mode, but the difference is that the component package will be escaped by the background and the front end will parse the template string written in accordance with the rules, and output to the page for display.

The data structure

In the previous project, I found that the self-implemented state management tool was too simple and lacked documentation, which made it difficult for maintenance personnel to modify it. Take the opportunity to use Redux, which works well with React, for development. The flat state tree structure adopted in the last project was just for search convenience at the beginning. After learning Redux, I found that the formal state was more suitable for complex scenarios, especially in sorting and associative query.

A tree of component nodes needs to be implemented in the project

Design view

While Dreamweaver has been out of use for a long time, it does have to be admitted that its WYSIWYG page effects used to be amazing.

In this project, it is certainly far from functional. For H5 tools, or all kinds of prototype tools (recently used in Xiaopiu.com, form item design is very beautiful), they are all using ps-like canvas.

Drag and drop functionality

React-dnd is used here, and the separation of API definition and data processing from DOM really opened my eyes. The internal design has been carried out using redux architecture. The core part is pure function, and DOM operation is separated, so it is easier to expand.

Flat sorting and nested sorting are required, including floating positioning.

When using Dnd, you need to set types for both sortable and nested nodes in the view, similar to unique identifiers. When the event is triggered by the bound DOM node, the state is passed through the previously wrapped advanced component to trigger the custom event.

After several modifications, we finally decided on a layout container that could be nested and a presentation module that could not be nested again and could only be sorted

Compare the handling of the problem is to restrict the drag-and-drop instant sorting method, when a nested hierarchy, too flexible directly insert when used in deep level nested instead lets users confused about what to do, such as I want to be a second hierarchy sort operations, but due to the use of the instant ordering, if there are nested hierarchy, when moving into the insert operation. , of course, this is also because of the poorly conceived, think that as long as the mouse passes through the container, since can’t judge whether user need to insert the nested hierarchy, then directly inserted into the handle, but real docking business scenario but found some inside the container because its content is too long, cause easily wrong operation, constraint the hover event, after adopting the drop event for judging truth Nested intent or sort.

For nested containers, the need when sorting based on the current node with the mouse drag after node of actual position after and before the sort of way, such as when a sort node 50% height automatically do sorting, placed in a nested nodes, when removed from the bearing should be recorded, when after the node, and accordingly the collation.

At the same time, a canvas-level container needs to be defined to meet the requirements of floating positioning. When the display module is dragged, it can be placed in this container to solve the requirements of floating positioning layout.

Partial interaction

Another complication is that the design view needs to be able to support external stylesheets and external scripts, so in order not to conflict with the tool itself, or even affect the tool operation, the design view uses iframe as the presentation layer. Refer to react – frame – component, create a new blank iframe, manual override when creating the complete document, early use ReactDOM directly. Unstable_renderSubtreeIntoContainer across node component updates, after Changed to reactdom.createPortal due to repeated rendering problems.

The problem with using iframe in design views is that components need to be reconstructed according to the context, where drag and drop zooming and box selection alignment and simultaneous editing in the canvas class container need to be recalculated according to the Document of the IFrame. Here, the logic of the previous project is adopted, and components can be reconstructed in the manner of React.

Property editor

Relying on powerful state management tools, we can achieve the effect of property editing by bidirectional binding between form items and node data, so only the property declaration for the presentation module is left here.

Not IDE

In fact, the role of the tool itself is only to combine the code in a more general way. In the case that most implementation and operation personnel cannot grasp the component-based development quickly, they also need to promote it through engineering means. At least through tools and the introduction of new component development specifications, this inefficient manual approach can be optimized and upgraded, including some accumulation. Not to mention, separate patterns are better for automated testing.

Redefining the XML file to support the configuration requirements of the presentation module is also a declaration that has the following effect:

A module of the same type can have multiple displays (HTMl structure and independent functions). The general configuration items are written in the main XML of the module. The specific content structure of the display package is as follows:

The CSS part will be compiled after it is uploaded to the application center. The CSS-like module scheme will add identifiers, and the local instances will be packaged by the combination of template engines to generate the root className that is not repeated.

In the main structure part, THE HTML template string is adopted to define the key-value data source, and the data can be modified according to the user operation form items in the design view to achieve real-time editing effect. In internal use also need to open partial source editing effect to meet the rapid revision online.

And the tool internal corresponding node data storage, and finally assembled a template page required component node tree. The implementation of the tool itself is actually hidden, and ordinary template developers may not know the implementation of its internal components, but they can write template fragments based on previous experience, the only difference is that they need to increase the awareness and writing of template strings. As a transitional plan, at least to solve the real cost of the problem.

Form item extension

Cascade identifiers asFor and asForValue are added in the description of form items, so that the tool can judge whether to display the current form items, and classification identifier classify is added to display excessive form items. For presentation module developers, you can simply declare type. Further extensions will be made to provide additional types

Parsing the translation

After completing the design view through drag and drop and configuration, it is only necessary to parse and translate the actual content of each terminal for preview display. Here you just need to translate it into an HTML string.

End point or starting point

The initial requirements are basically over here. In addition to business requirements, I still want to explore how to promote the front-end engineering development of the team based on the reality. If we follow the summary of front-end engineering — Foundation, we are still struggling in the first stage.

After basically completing the above tools, I couldn’t help thinking that it would be better to use the tools as a starting point to implanting advanced abilities into online projects than to push the framework hard and accumulate them at the same time. The page template, for example, had not even done the most basic resource compression in the past, but the new tool was used to compress it uniformly, without increasing the workload of the developers, and achieved the results. Using quick tools not only reduces the user’s development pressure, but also enhances the actual quality of online projects. Why not? Not to mention the value of the tools themselves and the derivatives they generate.

To rethink

Do combinations

Each business scenario that can be extended is complex, and the project cycle would have been too long if the previous pattern had been to develop tools separately for each scenario. Especially once the tools do interactive functions, such as embedded questionnaire in the site building tool, or add process flow in the data screen, it will not work without overall consideration.

Why do we need to do combinations? Part of the reason, of course, is to save development effort, but part of the reason is that these scenarios all have something in common: presentation modules in site construction, form items in custom forms, and even data diagrams and process nodes can be assembled as data nodes.

The final product of each tool is really just a combination of code, the difference is that before it was edited by humans, now it is generated by tools. By taking a generic business scenario and generalizing it, you’ve actually solved most of the problems of online development efficiency.

Can see from the analysis: these scenarios need to be capable of supporting a drag operation of canvas, the smallest unit consisting of a canvas (hereinafter referred to as nodes) to proceed with typesetting, a set of intuitive logic auxiliary editing tools (here is controlled by flow chart), one can design view of the real rendering (edit state, generating runtime needed to store), as well as the corresponding The translator of the terminal platform (previewing the state, parsing the previously generated store, and rendering according to the rules) can do this.

nodeTree

Data that controls the structure of the page rendered by the entire application. Define the specification infrastructure:

The behavior of the node tree operation is provided directly by the framework, and the drag and drop behavior is encapsulated and the callback is provided.

For the presentation module required in each scenario, it only needs to follow the uniform specification and be abstracted by the framework

Node registered

At present, it seems that the previous XMl file definition can be used. For additional data information, such as events needed in the questionnaire system or lines needed in the flow chart, data expansion can be carried out in the form of associated tables.

The event

Some are globally defined for common events, such as page initialization and node destruction, and associated state resets. The other part is declared separately by the module, for example, the single conditional jump of the table in the questionnaire is declared in the module. The onChange event is declared in the module, and the user binds the corresponding node through the flow chart tool. The triggering effect here should be extended by both the common event and the event that the module changes its own property. Of course, there is no need to do the degree of customization, just according to the pre-set rules can be handled.

Ability to expand

The capability extension here is to separate the core functions. When the tool needs additional functions such as component tree display, format brush, etc., the tool capability is added in the form of middleware, and the plug-in can be extended using internal data flow

At the same time, provide reserved UI rendering nodes in the frame:

<div id="toolbar"/ > <! Toolbar node injection --> <div id="artboard"/ > <! -- Canvas page injection, be careful not to block component nodes, define hierarchy according to specification --> <div id="sidebar"/ > <! -- Sidebar node injection -->Copy the code

Node capability Definition

All nodes are moved to the top of the mouse to display the draggable area and shortcut menu

conclusion

In this process, both product and can renew component development standard, to achieve the integration of unity from top to bottom, to avoid the kind of split type development process before, so even if the front frame or reference library transformation happens, as long as according to the rules in the statement, on the basis of made it this far, talk about other, I think it will be much easier.

The tools themselves are also intended to liberate front-end engineers, because the day-to-day accumulation of business code can easily SAP motivation, and no one naturally wants to be part of the resource pool all the time. By building a new infrastructure, engineers can look at problems from a different perspective. Even boring business code, after packaging, redeclaring, attaching configuration items, etc., will be found where can be reused, where there are problems written, and other previously ignored information. I think that’s the most valuable part