Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

I don’t know if you find that more and more technical people and non-technical people are talking about low code or zero code to build a platform. There are many such visualization tools on the market, both open source and paid, such as class, li, yi, etc. Our company also wants to build such a platform, which I am also in charge of. I have never touched such a platform before, and I am also exploring it. Therefore, I will write a blog every time I finish each stage, and those who are interested can build it with me.

What is Low Code Development or No Code Development? The industry responds that complex business systems can be developed with a small amount of code. Then, taking it one step further, a new concept was born: zero code development. My understanding is to separate business from project engineering. For example, I package all the details of the whole page into a component library, and then build a platform. By dragging and dropping or dynamically configuring the corresponding components of the page, I can combine them into a page without repeated development of redundant code, as long as I maintain the component library.

Preparatory work

Our company basically uses Vue2. X framework to build projects, so react or other frameworks can be used as a visual platform to share with others.

I usually plan the development plan of the whole project as well as the project specification and version plan before I do a project. So our first article is about the visualization platform solution

1. Collect requirements

Our company is a combination of multiple technical departments, each with their own business needs and perspectives, so the first step is to get everyone’s input so that you can develop products that people can use. We’ve collected a lot of ideas, and I’ll give you some of the more frequent ones:

  1. Supports personalized and diversified functions
  2. Dynamic preview is supported
  3. Support for drag-and-drop generation
  4. Support for sharing templates
  5. Supports various data management functions
  6. Support for multiple components
  7. Support for personalized code editors
  8. Support a variety of adaptive devices
  9. Independence, division of authority

And so on…

This time, we collected some ideas mentioned more frequently. After collecting the ideas, we need to classify them. This is the main part of our game, which is also the moment of brainstorming

2. Demand classification

We first divided it into major categories as follows:

ClassDiagram visualization tools - | > login visualization tools - | > console Visualization tools - | > editor kernel visualization tools - | > login data center configuration class {purview division independence... } Class console {Project management Create project entry (distinguish mobile and PC) Template center Project grouping Project Sorting Project Preview project delete... } Class editor kernel {toolbar component loader Component Information Configurator Canvas editor Release preview Rollback Associated Data} Class Data Configuration Center {data source Management Data set management code snippet management}

The above is the category of our overall demand. At present, we have sorted out so many categories. Next, we will divide the categories into smaller categories and make them more detailed

3. Classification of details

Next this step is also more important, how to refine the big categories into more small categories, is also a difficult point of our analysis, nonsense not to say, directly open dry

3.1 Details classification of the console

ClassDiagram console - | > project group console - | > create project entry console - | > preview class projects grouping {support project group Mobile group each other... } class create project entry {PC create entry mobile create entry... } Class project preview {PC preview interface mobile preview interface... }

3.2 Editor kernel details classification

Kernel classDiagram editor - | > toolbar editor kernel - | > kernel module loader editor - | > canvas editor Information editor kernel - | > component configurator class {toolbar to return to the console Control the implicit control component column hidden layer column Control Right panel Explicit Settings Item Filter View component update Configuration Beautify Toolbox Switch Canvas Migrate to mobile Configuration Blueprint Editor Configure Component Delete Backup release preview Help error... Class component loader {classify, group, diversify, merge into a combination of auxiliary functions (control levels, delete, lock/unlock, favorites, etc.) linkage... } class Component information configurator {page Style configuration (screen size, background color, background image, thumbnail, etc.) Component size chart position Rotation Angle transparency data interface data response result interactive event Dynamic CSS editor Dynamic JS editor... } Class Canvas editor {Support for setting multiple guides support element/group drag support element/Group Rotation Hide/Show Guides panel shortcut keys Canvas percentage Canvas percentage Progress bar Global Zoom View... }

Once you’ve sorted out the details, there’s a more important step ahead. Component abstraction. Components are developed in code. How to abstract the configuration information of components into operation forms so that users can directly control the information of forms through configuration?

This is the end of the content of this article, I believe that everyone has different views, you can write down your opinion in the comment section, I will include good views, and it is possible to open source the project later, let everyone participate in.

Thank you all for watching, here is a little bitmap _ ridiculous, a lot of likes, attention support