20+ visual builders, one at a time

Ps: this article is following the last lazy, front-end page visualization tools industry wheel article did not figure to fill the map

No matter big company or a small company, we develop the front-end engineering, project engineering and many similar functions or page, development are often work overtime to move brick to do some work without growth repeatedly, see ctrle key on the keyboard has been worn off the paint, C and V are worn right away, so how to develop the repetitive work with machines to solve? In the case of shortage of front-end resources, is there a tool that can directly build the front-end page I want? This article will introduce the most popular page visualization building tools, and also provide some open source visual building projects for your reference.

1 Overview of Page Visualization

Programming development page: Dynamic Logic page is decomposed into HTML Tree, Data and Dynamic Logic. The process of front-end development engineer developing front-end page is to add, delete and modify HTML Tree, Data and Dynamic Logic of the page by using programming tool (IDE) in essence.

Page visual construction: it is to add, delete and modify HTML Tree, Data and Dynamic Logic of the page in a visual interactive way, so as to achieve page generation. Page visual building tool is a software tool to realize page visual editing

Purpose: Any tool exists to solve problems more efficiently. Page visual building tool, used to solve the efficiency of page generation. Front-end engineers may feel that the most efficient way to generate pages is to code, but it’s not just front-end engineers who need to build pages. Visual page-building tools are designed for people who just need a front end engineer to increase their page-generating efficiency.

2 Industry Research (20+)

The project name	Project introduction	What does it solve?	Technical ideas used
Baidu amis(open source)	Front-end low code framework, through JSON configuration can generate a variety of background pages, greatly reduce the development cost, you do not even need to understand the front-end	You don’t need to know the front end to make a professional and complex background interface, not affected by the front end technology update, you can use the visual page editor to create the page completely
Zheng Caiyun – Lu BanLuban H5 (Open source)	Luban is a building system based on business components to quickly generate pages (sites, pages, components, data, permissions). JSON Schema transforms business into data → transforms data into definition → standardizes definition into structure	Improved user experience: static page scheme, faster rendering and access; Improved stability: The Nginx direct forwarding scheme ensures the availability of page routes and provides better response performance. At the same time, it supports a more robust Dr Scheme and supports fast version sending and rollback. ; Fast response to business requirements: through componential reuse, it can quickly respond to business requirements and improve r&d human efficiency; Better business empowerment: enable students such as product and operation to participate in page building, improve business iteration efficiency and data availability. ; Better systematization ability: Based on the built system, it is convenient to connect the horizontal and performance testing system, stability assurance system, operation and maintenance deployment system and online monitoring system, forming system-level synergy and compound interest.
Taobao – imgcook(Not open source)	Skecher, PS, pictures and prototype drawings are intelligently generated by the design draft with one key, and then transformed into DSL through intelligent recognition expression of algorithm UI, and then analyzed DSL as front-end page	Restore the design draft; Skecher, PS, images, prototype diagram directly generate code; Accurate reduction; What you see, what you get; The code is maintainable; Machine intelligence recognition and understanding; DSL/Plugin can be customized
Ali-iceluna, Paas	Configuration Generation Build Description Protocol – Standard Specification – Schema Regeneration into pages and logic, low code editor – Development ecology	Change production relations, improve productivity (enabling) – middle and background universal build products – all; Reduce R&D cost (improve efficiency) – low code development platform – developers (project creation, development, debugging, release full link); Incubation products (Construction ecology) — PaaS platform — developers (infrastructure, production of construction materials based on standard construction agreement, operation and development environment for construction services for various business scenarios)
Ali – Cloud swallowtail(not open source) /pipeline(Similar to open source)	Do the web front like powerpoint; Page Data editing	Support page Data editing, for operation, product personnel, editing freedom for no nested components. At present, the production of operations, activities page function on the best tool. Provides templates for building pages, and supports custom templates. Configuration form based on Schema generation, configuration form operation function is perfect.
Ali – Fly ice(not open source) /vue-layout(Similar to open source)	Component Tree edit; For mid-background developers; For componentized pages, the main implementation of Component Tree visual editing. Its core function is page layout design: select the appropriate component from the UI component list, drag and drop the component into the page, and generate a page with layout and style.	Support Component Tree editing, for middle and background developers, editing freedom for non-nested components; With “material-block “, non-front-end developers can quickly build usable, standards-compliant pages. Page output in source code. A way to servitize the front end.
Taobao – Tianma(Not open source)	Cross-site page building	Cross-terminal building page; Develop schema.json for standard data; Description of the props entry parameter to the module; Data standardization; Data-driven display; Write module code (decoupled, module as code); Package Each module separately; Seed loading dynamically from the page perspective; Cross-terminal cache scheme (phone TM TB cache copy, corresponding access, code identification); Server rendering SSR
Taobao ark	Design and implement toC marketing setup	Terminal seconds open; Using the front-end optimization means to realize the terminal open in seconds
Ali’s mom. – Panning for blocks(Not open source)	Build a complete marketing page from the basic components of the scheme design
Ari@Vecchi	Documentation is code; Documents are converted into parts of code
Ali alist /Formily(open source)	When Formily forms schemes are the preferred search area, they can be integrated to quickly achieve standardized list scenarios. ; At the same time, AList supports JSON Schema protocol rendering, which can be rapidly developed by data-driven.	Built-in Formily as a search area scheme, performance and powerful function; Support Ant Design/Fusion Next component system; Support JSON Schema data-driven scheme; Side effect logic is independently managed, covering all kinds of complex linkage verification logic; Supports a variety of complex layout schemes	https://alistjs.netlify.com/; https://github.com/alibaba/alist
Jingdong – MPM(Not open source)	ComData data configuration is used to resolve the front-end page, which is the core of the system. 7PageData is the abstract description layer of the page	Abundant materials for construction :MPM has 30+ components and 500+ templates, and its business capability covers many scenarios such as commodities, shopping guide and marketing. Powerful configuration functions: Three-terminal rendering is a powerful capability of MPM. In addition, MPM also supports page configuration BI sorting, automated buried points, automated testing, page speed measurement, etc. Comprehensive system capability :MPM escorts the page, not only equipped with smooth drag-and-drop editor, real-time preview and page health diagnosis ability, but also for the system and page to do a full aspect of monitoring and disaster recovery degradation plan.
Meituan rubik’s cube(Not open source)
Meituan lego(Not open source)	Support Dynamic Logic editing, for background developers, editing freedom for nested components. A way to servitize the front end.
esview(Lego open Source)	Drag vue dynamic components to build your page, generate Vue code.	Esview open source project, imitating Meituan Dianping lego. Complete visual page building framework, for the background developers. Page layouts look messy and custom components look weird. There is no merging business logic and no code logic for writing pages in the framework.
Element UI form design and code generator(open source)	Element UI form design and code generator to run the generated code directly in element-based VUE projects; You can also export JSON forms and use the accompanying parser to parse the JSON into a real form.
Vue-Layout(open source)	From the basic components to build a complete marketing page scheme design based on UI components Vue visual layout, generation. Vue code tools. https://github.com/JakHuang/form-generator	Component Tree editing is supported for mid-background developers, with editing freedom to nested components. Page drag generation, very complete implementation. Used for page design, so biased toward style control of page elements. The technical article has a deep understanding of the data flow of visual construction tools: Visual online editor architecture design.
gaea-editor(open source)	Open source project. Support Component Tree editing, for middle and background developers, editing freedom for nested components. Page drag generation, very complete implementation. Used for page design, so biased toward style control of page elements. The technical article has a deep understanding of the data flow of visual construction tools: Visual online editor architecture design.
pipeline(open source)	Operations/Product activity page
genGen (Open source)	Generate pages from interfaces to reduce repetitive work
H5.cn	https://www.ih5.cn/not-logged-in
Brick Design(open source)	Drag and drop blocks can be directly edited to generate front-end pages and preview
Baidu H5(Not open source)	https://h5.bce.baidu.com/docs/intro page set up marketing activities
Others (open source)	1.website-builder 2.site-builder 3.VvvebJs 4.grapesjs 5.Maha 6.Have like micro page 7.X-Page-Editor-Vue

3 summary of key points of industry research

Based on the research on the above page visual building tools, the industry has a lot of views, come up with two representative articles for your reference:

• Based on modern front-end frameworks, why aren’t there mature designers that support drag and drop layouts for controls and automatically generate front-end code?
• Front-end servitization – Life and death of page builder tools

The above research has investigated so many outstanding front-end visualization framework projects in the industry. The general idea is similar, and a hundred schools of thought contend. Although Ali’s Flying ice Cloud Butterfly is very perfect, there are still the following two problems:

• Interaction logic cannot be generated automatically
• It can only be used in limited, specific business scenarios

If these two problems exist, we need low code to produce the designed things. If low code is used, developers are unwilling to use it, because the generated code is difficult to maintain and bloated. If it’s for non-developers, they can’t write code, they don’t want to write any code, so they don’t want to use it;

And we stand on the shoulders of giants, can the above two problems solved? At present I do not have any good idea, but we can first go to their implementation of the idea of research understand, it is possible to remove the above most difficult to solve the problem.

3.1 Summary of tools in the industry

similarities

• DSL method to parse drag or configured pseudo code generation required front-end pages, most of the use of JSON Schema form;

• The entire process is similar from configuration to page generation

The difference

• Different treatment methods;

• The DSL fields defined are different;

• Different degree of optimization;

• The service scenarios are different

For reference

• The overall architecture design and ideas from configuration to pseudo-code generation in DSL mode to how to parse and finally to generate front-end page can be used for reference;
• How to schedule DSL field schema schema, how to handle transfer compilation package on-line and optimization

Problems should be avoided

• Identify potential user groups;

• Post-maintenance Problems

Open source code for reference

• Baidu Amis (open source)

• Vue-layout (Similar to Open Source VUE of Flying Ice)

• Pipeline (similar to fly Ice open source React)

• Meituan lego

• Meituan rubik’s cube

• Esview (Lego open Source)

• Brick Design (React)

• Gen (Open source)

• Gaea-editor (open source)

• Alialist /Formily (open source)

• Luban H5(Open source)

3.2 the DSL way

JSON Schem data structure

• flat
• A tree,

Not:

{
  "type": "object".  "properties": {
    "$attr": {
      "type": "object". "properties": {  "hidden": {  "type": "boolean"  }  }  },  "$theme": {  "type": "object". "properties": {  "themeColor": {  "type": "string"  }  }  },  "items": {  "type": "array". "items": {  "type": "object". "properties": { "ItemId" : { "type": "string"  }  }  }  }  } } Copy the code

Demo2:

{
    "type": "page".    "body": {
        "title": "".        "type": "form". "autoFocus": false. "api": "https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=1". "mode": "horizontal". "controls": [  {  "type": "fieldSet". "title": "Basic configuration". "controls": [  {  "name": "a". "type": "text". "label": "Text 1"  },  {  "name": "a". "type": "text". "label": "Text 2"  }  ]  },  {  "type": "fieldSet". "title": "Other Configuration". "collapsable": true. "collapsed": true. "controls": [  {  "name": "c". "type": "text". "label": "Text 3"  },  {  "name": "d". "type": "text". "label": "Text 4"  }  ]  } ]. "submitText": null,  "actions": []  } } Copy the code

For more front-end documentation, please refer to Little Round Face [1]

The resources

[1]

More documentation: https://juejin.cn/user/1398234520230989

The resources

[1] Baidu Amis: github.com/baidu/amis

[2] Zheng Caiyun – Lu Ban: juejin.cn/post/684490…

[3] ImgCook: Imgcook.taobao.org/

[4], ali iceluna, Paas: note.youdao.com/s/EDn5RopC

[5] Ali yunfengdi: www.yunfengdie.com/intro

[6] pipeline: github.com/page-pipepl…

[7] Work /docs/guide/…

[8] vue – layout: github.com/jaweii/Vue-…

[9] taobao – tianma: zhuanlan.zhihu.com/p/137470317

[10] ali mother – tao building blocks: chuangyi.taobao.com/pages/teemo…

[11] Alialist: github.com/alibaba/ali…

[12] Formily: github.com/alibaba/for…

[13] Meituan Rubik’s Cube: cube.sankuai.com/#/admin/tea…

[14] Meituan lego: lego.waimai.sankuai.com/template

[15] esview: chuangyi.taobao.com/pages/teemo…

[16] Element UI form design and code generator: github.com/JakHuang/fo…

[17] Vue – Layout: github.com/jaweii/Vue-…

[18] gaea – editor: github.com/ascoders/ga…

[19] pipeline: page – pipepline. Making. IO/pipeline – Ed…

[20] gen: github.com/daycool/gen

[21] H5. Cn: www.ih5.cn/not-logged-…

[22] Brick Design: anye931123. Gitee. IO/react – visua…

[23] Baidu H5: H5.baidu.com/

[24] website – builder: github.com/topics/webs…

[25] site – builder: github.com/topics/site…

[26] VvvebJs: github.com/givanz/Vvve…

[27] grapesjs: github.com/artf/grapes…

[28] Maha: maka.im/store

[29] There is a micro page like www.youzan.com/

[30] X – Page – Editor – Vue: github.com/OXOYO/X-Pag…

[31] Based on modern front-end frameworks, why aren’t there mature designers that support drag and drop layouts for controls and automatically generate front-end code? : www.zhihu.com/question/33…

[32] the front – page set up tools of death and life of service: www.cnblogs.com/sskyy/p/649…

[33] Baidu Amis: github.com/baidu/amis

[34] vue – layout: github.com/jaweii/Vue-…

[35] pipeline: github.com/page-pipepl…

[36] Meituan lego: lego.waimai.sankuai.com/template

[37] Meituan Rubik’s Cube: cube.sankuai.com/#/admin/tea…

[38] esview: github.com/furioussoul…

[39] Brick Design: anye931123. Gitee. IO/react – visua…

[40] gen: github.com/daycool/gen

[41] gaea – editor: github.com/ascoders/ga…

[42] Ali Alist: github.com/alibaba/ali…

[43] Formily: github.com/alibaba/for…

[44] Lu Ban H5: github.com/ly525/luban…

[45] More details: juejin.cn/user/139823…