Git repository address

I am very happy to have recently broken through the Go Micro service. Golang-based micro services — Micro Practices (I) will try to write a complete micro services project, which is irrelevant to this article.

This article topic

In addition to go Micro service, I have been working as a front-end visual editing tool recently. I just got up during the Mid-Autumn Festival holiday, so I’d better write some articles to make the holiday more meaningful. The article may not involve too much source code, after all, is a company project, can not share. But you can discuss the implementation ideas with everyone and say where you think. Please leave comments and discuss.

I. Positioning of visual editing tools

Technical stack: React.js + node. js (currently Vue version I also preliminary implementation… There is a feeling that the ultimate way to make visual editing tools like this useful is to drill down into the AST abstract syntax tree.

Here’s where the visual editing tools I described in this article are positioned: to quickly generate front-end pages and build projects by dragging and configuring them for junior front-end developers and back-end people.

When I first received this requirement, I was confused and felt that there were not too many examples to refer to. Later, when I made technical plans and researches, I found that many predecessors and martyrs were actually making visual editing tools. Compared with big factories or martyrs are considering how to improve the development efficiency through such development tools. In fact, our original intention is also to build a rapid development platform, to achieve the rapid development of a project, as little as possible to write code. A lot of information was collected during the investigation. The article will also list some inspiring ones.

How to improve development efficiency?

Usually many people should do stacking work, many repetitive things do for a long time tired, so we all want to improve efficiency. Many large factories are developing tools related to improving performance, among which visual editing tools are a big trend. According to my research, Alibaba’s Yunfengdie prepared to switch its mobile terminal building function into a rapid development platform of Medium platform one or two months ago. So this positioning is basically coupled with the visual editing tools that we envision. A big idea when we do this is that we can use visual editing tools to quickly generate a simple medium platform, saving development costs and cycles.

We make tools to improve development efficiency, so how can we improve efficiency? You can refer to this article, which I think summarizes very well 7 or 8 ways to reduce code.

I’ve made a few simple ones myself based on these articles:

To briefly explain the points involved:

Scaffolding:

Similar to vue-cli create-react-app, which quickly initializes a project from the command line, our vision is that this CLI tool can help us quickly initialize a project architecture and dependencies that are aligned with our specifications. The tool is published to the NPM repository, and users can download it globally and use it from the command line, so that users can avoid creating new projects step by step and achieve a standard process for project initialization. You can also quickly generate files to a directory or multiple files to an associated directory with specific commands, if you have used Laravel Tinker. You’ll see how convenient this is. Also look at the Angular CLI, which has the most powerful set of CLI tools on the front end. You can increase efficiency naturally.

engineering

Do a set of project specifications, this specification will not be refined to the variable function positioning rules, etc., more is a large specification, to ensure standardized output.

Editor plug-in

The analogy is to develop Vscode plug-ins, which generate code automatically for our own rules and project structures

Component design system

Storybook, for example, integrates component development, preview, debugging, and documentation. Component code can be copied and used directly, making it easy to develop components for fast systems.

Reduce code

This is a generalization, but overall, reducing the amount of handwritten code is an increase in efficiency.

Material resources

You can think of packaged components and blocks (the concept of blocks can be compared to ANTD-Design, which I was inspired by) as page-level blocks as resources that can be versioned and modified. Just use it next time you need it. Uploaded images can also be used as a resource pool. When needed, you can directly select images from the resource pool without repeatedly uploading them.

Visual editor tools

That is the focus of this article. Then the editor tool reads the props configuration information of the component, configures the props of the component in a visual configuration way, and the user can preview the component. Finally, download and save the code. JSX code files can be generated on the browser side and downloaded through the browser, without the need for back-end involvement.

Editor tool

Business architecture

Use two diagrams to describe the overall business architecture

There are several concepts involved, including components, plug-ins, blocks and templates, and there are also notes on the diagram. It is emphasized that these are collectively referred to as material resources for the purpose of code reuse and code reduction.

Editor configuration principles

Let me draw a picture

This diagram is a schematic of the component props configuration mentioned above. When a preset component is dragged into the main action area, click on the current component object and the component’s props configuration information is displayed through the form component with different value types. For example, String is represented by the Input component and Boolean by the Switch component. The configuration form component is determined by the value type to be configured.

The overall technical architecture of the editor

Or above,

Analyze this picture: First, look at the whole, forming a closed loop, that is, our entire visual editing tool and supporting CLI tools and other supporting facilities to improve development efficiency can be repeated, continuous iteration has vitality. To look from the lower right corner, we eventually generates a series of tools is a complete project, project is made up of the CLI command line after the initialization, and then made up of individual components, these components are aggregated to generate blocks, namely the page level component, again by drag and drop, the component drag and drop to the editor of the main operating area, form the component tree data structure, The editor constructs a set of component tree objects by dragging and dropping them, which actually changes the JSON structure of the component tree. React allows you to modify the data and drive real-time updates to the page. You just need to use the JSON data tree to describe the component tree, component configuration props, and the hierarchy between components. The editor outputs JSON data and then compiles and restores the jOSN object to a component using a parsing engine. JSX react file. This file can be accessed directly in the umi.js pages directory. You can think of this file as the React component or page file we write everyday.

Some of the concepts involved in the project are illustrated in more concrete figures below:

component

This picture describes the more specific component concept, which is the minimum resource level in the system upon which other large blocks are built.

block

Blocks are page-level, and versioning can be done through the code base, which can be understood by referring to antD-Design blocks. The diagram on the right of the image shows the lifecycle logic of the entire block.

The template

A template can be understood as a theme, and the project initializes with a body color, body layout, and so on. Themes can also be versioned.

compile

Compilation here is still the most basic editing, not deep into the AST abstract syntax tree and, compilation is the principle behind automatic code generation. In my opinion, to do a good job with visual editor tools, you have to go deep into AST compilation.

Visual configuration

  • Visual drag and drop + real-time compilation preview
  • Drag map to HTML tree structure ->AST-> generate code
  • Visualize generated blocks, which can be copied after parsing
  • The code generated by the late implementation directly generates or modifies the source file
  • You can select the target directory when you drag the build file

There is not only one way to configure functions. Here are some examples that COME to my mind

  • config.json + JSON-Schema
  • Template
  • Props
  • States
  • The Service of storage
  • LocalStorage storage

Data driven

Data-driven is the thinking transformation that you must do well. The drag and drop operation ultimately maps the change of data structure, and the data is handed over to a framework like React Vue to do UI rendering. During the whole tool development process, I deeply realized my own shortcomings and deep-rooted data structure and algorithm. You must pay attention to these two aspects of ability oh. Use a graph to describe the data drive.

Node.js service support

  • Browsers can’t manipulate files. Use Node.js to extend browser functionality
  • Server support, operating files and reading system information
  • Node operates file streams, the underlying support and core of the CLI command line

At present, the implementation of the entire editor does not use Node to do expansion, but in summary, the browser in the operation of the file this part is problematic, the later need to introduce node to do browser function expansion

What functions does the CLI tool provide?

  • Command line script
  • Quick look up create project (interactively select layout)/git Clone
  • Quick Block creation
  • A file is quickly created (data + template = file) and routes are generated
  • Project quick release script
  • The underlying support is Node
  • See the Angular CLI

Instant build preview

Here is a picture of how recT implements hot updates and instant previews

At present, there are many visual editing related projects, but the real use of almost no. Ali tritium cloud, internal project jincicada, external projects such as cloud butterfly. However, this direction is indeed a big trend, and I have summarized a future outlook in this direction:

Eventually it should move to AI programming and no code.

Existing problems:

Auto-generated data flow and business logic cannot be resolved for the time being. Although react files are generated, there are great obstacles in the automatic generation of data flow and business logic. If you have a good solution, please comment and discuss it together. Only some technical architecture and principles can be posted here, the specific code presentation can not be shown.

We have been mentioned in the article all the time. In fact, THIS project is done by me alone, which is very difficult. There are too many supporting facilities and technologies to consider, so it is not easy to see the results quickly. At present, in addition to the automatic data stream generation problems encountered, other basic practical code to demonstrate the feasibility of the scheme, there is also a prototype editor can generate react. JSX files.

There are a few open source tools out there, but one difference between mine and most is that I output react. JSX files, while many output rendered pages.

Relevant concepts

No code programming platform, visual editing tools

Program = data + algorithm

To be code free, you have to have data and algorithms

The reference example

In the process of technical program research found some good principle analysis and code implementation, here for you

Page visualization build tool past life and present life

Page visual building tools past life and present life: article introduction

The death and life of page builder tools

Block visual code editor

A simple and easy to use e-commerce activity page generation system

Use React to write a simple active page operating system – design

Ctrip: Some of my thoughts in the process of building the activity thematic system

The above one is fresh, it was released on the last day of National Day

Lu Ban of Zhengcaiyun: Visual Construction System of Front-end Engineering Practice (PART 1)

[E-commerce] Use visual editing to deconstruct the theme page that looks very cool

Loaded: How to design a highly scalable online web creation platform

Research and development efficiency improvement practice of Papilio cloud in Taiwan

gaea-editor

Based on the presents

X-Page-Editor-Vue

Vue-Layout

Point stone at the beginning of the official website looked very rough, seems to make money?

antd-visual-editor

Tenfold efficiency improvement — The establishment of Web basic RESEARCH and development system

Page visual building tools technical points

Build thematic systems from front to back

grapesjs

How to Build a Front-end Configuration Framework with Complex Functions (I)

Visual online editor architecture design

gaea-editor

The author of the article above seems really cool

Uform Smart form

The smart form idea above solves the problem of visually configuring forms for components

Tencent IMWeb community: building blocks system, will operate the system to the extreme

QQ: how to ensure the H5 page high quality low cost quickly generated?

Baidu’s: Front End as a Service – the road to zero cost development

Baidu takeout how to achieve front-end development configuration

Baidu Waimai Blocks open-source address

Meituan lego

Renrendai: Activity Operation automation platform practice

Turning: continuous iteration of e-commerce visual operation page generation system

Jingdong: Mall activity page construction system – Babel

Aliyun: Cloud swallowtail butterfly

Ali cloud

Ali Yun: It’s perfect

imgcook

Fly ice

Ali seems to have a golden cicada inside.

No code programming

The code free programming principle architecture diagram above is very graphic

additional

The 2.0 plan of Yunfengdie is very similar to what I want to achieve, and of course I also refer to a lot of ideas of ICE flying ice project. Unfortunately, cloud swallowtail is not open source, otherwise it can save us a lot of time to step on pits, hahaha… , see the derivation and realization of cloud swallowtail visual construction in the following article 👇

Research and development efficiency improvement practice of Papilio cloud in Taiwan

Cloud fengdee is late to engage in intelligent visualization construction in Taiwan?

foreign

structor

bubble

vvvebjs

forestadmin

colonel-kurtz

mobirise

Nuggets don’t have columns or did I not notice? Put a visual drag on a knowledge point:

<! < HTML > <head> <title> </title> <style type="text/ CSS "> #target{height: 160px; width: 200px; border:1px solid #000; position: relative; } .dot{ position: absolute; width: 10px; height: 10px; border: 1px solid pink; border-radius: 50%; background: #fff; } .left{ top:50%; left: -6px; transform: translateY(-50%); cursor: w-resize; } .top{ top:-6px; left: 50%; transform: translateX(-50%); cursor: n-resize; } .right{ top:50%; right: -6px; transform: translateY(-50%); cursor: e-resize; } .bottom{ left:50%; bottom:-6px; transform: translateX(-50%); cursor: s-resize; } </style> </head> <body> <div id="target"></div> <script type="text/javascript"> window.onload = function () { var startX, startY, moveX, moveY, status, width, height, direction var target = document.getElementById('target') var arr = ['top', 'left', 'right', 'bottom'] var len = arr.length for(var i = 0; i < len; i++){ var div = document.createElement("div") div.classList.add("dot", arr[i]) div.dataset.direction = arr[i] target.appendChild(div) div.addEventListener("mousedown", function(event){ event.stopPropagation() startX = event.clientX startY = event.clientY width = target.offsetWidth height  = target.offsetHeight direction = event.target.dataset.direction status = true }) } document.addEventListener("mousemove", function(event){ event.stopPropagation() if(status){ moveX = event.clientX - startX moveY = event.clientY - startY switch (direction) { case 'top': target.style.height = height + moveY + 'px' break; case 'right': target.style.width = width + moveX + 'px' break; case 'bottom': target.style.height = height + moveY + 'px' break; case 'left': target.style.width = width + moveX + 'px' break; } } }) document.addEventListener("mouseup", function(event){ event.stopPropagation() status = false }) } </script> </body> </html>Copy the code

Implement element drag – and – drop to modify the width and height of elements. The elements in this example are not absolutely positioned, so ignore (left, top two drag buttons) and change the width and height of the elements from left to right, up to down.

React version: ASTX, never had time to maintain…. However, a low-code visual editor is a good direction to follow