I understand low code

Low code is a development platform that generates applications quickly with no coding (zero code) or with a small amount of code.

With a visual approach to application development, developers of all levels of experience can create Web and mobile applications using drag-and-drop components and model-driven logic through a graphical user interface.

The benefits of that low code are self-evident, who uses who knows 😄

My journey through low code

  • 2017 – In the embryonic stage, I participated in the development of a set of government affairs system, and generated the government affairs office system through the configuration of JSON data of operation personnel. A set of codes supported the system generation of dozens of different departments. (The first time I was touched, I really felt amazing, and the germ of low code came into my heart…)
  • In the practice period of 2019, I made a simple activity configuration project, which generated JSON data by filling in forms and rendered several commonly used activity templates. Simple routine activities can be configured by marketing personnel. (Start practicing some simple scenarios…)
  • 2020 – In the advanced stage, based on an open source project, a set of H5 editor for activity visualization suitable for company operation scenarios was developed. You can drag and drop the configuration activity page. (This is a real low code scenario, not only with the data model, but also with visual drags…)
  • From 2019 to now, many of the projects I have participated in are writing templates and generating components or pages using configuration JSON data. (This is really a simplification, as I understand that all pages or components are data models…)
  • At the beginning of 2022, a questionnaire platform was developed, which can generate questionnaire forms through visual editing, dragging and dropping, and quickly configure the questionnaire page for collecting questionnaire information. (A real low-code practice from zero, and something I want to focus on in this article…)

Low code platform core capabilities

The core capabilities of a low-code platform, I think, are four:

  • Data model Driven (core)
  • Visual Development (core)
  • scalability
  • engineering

The following four points are analyzed one by one:

Data model driven

Low code platform, can be defined through the operation on the page to assemble a data model, can flexibly define the field attributes in the model, can also freely assemble the model, can also carry out the correlation of relevant data models.

  1. The model definition

Design data model to ensure semantic, simple, model unique identification, public attributes, private attributes, extended attributes, etc.

  1. The model association

Establish the relationship between data model and data model, which can be expressed as 1 to N, N to N, N to 1, 1 to 1, etc.

  1. Data manipulation

Provide a CRUD operation based on the data model so that the application can manipulate the data model.

Visual development

A business person can simply drag and drop a desired page based on a visual page or tool. This page can be automatically deployed online for related personnel to operate.

scalability

This refers to whether a low-code platform can provide some mechanism to extend. (You can do not have it in the early stage, just meet the current demand, but try to consider this factor in the early stage, to provide the ability for the subsequent. Avoid heavy lifting in late implementation.

Specific expansion methods include the following three points:

  1. Data model extension

New components can be added, and the existing data model can support extensions that do not affect the previous one and satisfy the subsequent one.

  1. The logical extension

Can the low code platform make some calls on the business by defining some flow charts and extending the business logic to perform the business if and else processes?

  1. Usage Scenario Extension

Can the low-code platform access to new scenes? In the development period, we should think more divergent and leave ourselves as many backways as possible. We can accept new members and new things.

engineering

Whether the low code platform can carry out local development and debugging, version control, automatic construction and release online, free operation and maintenance, monitoring and data statistics. Simply put, whether or not the platform is one-stop supporting the ability. (The early stage is not the key, is the key content of the later stage. These things slowly empower the platform and enable it to serve its users more fully.)

  1. precognition

Low-code platforms should be able to do native “development and debugging”, which means previewing, manipulating, viewing effects, etc., so that the product can be controlled in advance. And some adaptation capabilities, PC, H5 and so on.

  1. Version management

The low code platform allows version rollback/recovery operations, as well as the ability to copy, open/close, and view history without affecting the released product.

  1. automation

The low-code platform can automatically build the one-stop capability of launching, free operation and maintenance, supporting monitoring and data statistics.

Here’s the thing. What did I do this time?

Requirement: We need to make a low code questionnaire platform, its background:

  1. External platform: Exposes user information.
  2. Internal document form: complex operation, no replication and other functions, can not be embedded in the web page.
  3. Team low code direction exploration.

Research: JSON Schema + form data validation + excellent low code platform on the market + about drag and drop + canvas (there are a lot of specific content, I will not take up this space, I will output it later)

JSON Schema

JSON (short for JavaScript Object Notation). JSON is a data format that provides concise, readable, and extensive Notation. JSON gives you the flexibility to represent arbitrarily complex data structures.

JSON Schema describes JSON data. For different application scenarios, we want to agree on the fields, field value types and even dependencies that JSON data contains, so we need to have a specification that describes the relationships between these constraints. And that’s why JSON Schema exists.

JSON Schema itself is written in JSON, in other words, it is a JSON file itself!

JSON Schema is essentially a structured JSON definition

Form data verification

Validator library:

  1. Ajv (the classic open source tool, it is a very popular JSON Schema validation tool, and claims the best performance, the fastest JSON Schema validator)
  2. Async-validator (async validator used by Element and iView)
  3. Validator.js (string validation library)
  4. Joi (Object Pattern Description Language and Validator based on JavaScript objects)
  5. Superstruct (simple and composable way to validate data in JavaScript and TypeScript)

Some of the best low code platforms on the market

  1. H5-dooring (React, Ant-design)
  2. Example of Baidu – Amis document (React)
  3. Vue – layout (vue)
  4. Alibaba – Formily (React, Ant Design)
  5. Alibabalist
  6. Luban (Luban H5) (Ant Design, Vue)
  7. Sparrow (based on Vue, element-UI)
  8. Wti-form (low code form component, secondary development based on Element-UI)
  9. JeecgBoot (Ant Design, Vue)
  10. Diboot (Ant Design, Vue)
  11. Variant Form (Vue Element)
  12. GrapesJS — Craft. Js (GrapesJS is a foreign page editor framework)

About the drag and drop

  1. Vuedraggable (which is a Vue drag plugin based on the sortable.js implementation)
  2. Vue-draggable – Resizable (Vue, control can be customized for size drag)
  3. HTML5 native Drag/Drag & Drop (there are also a lot of low code libraries that are native HTML5 apis that you use)
  4. Easy Drag (native JS)
  5. Carddragger (Vue)
  6. React-dragable and React-resiable libraries for drag and zoom
  7. Rc – drag (React)
  8. @shopify/draggable (native JS start more, more users)
  9. The react – DND (react)

The canvas module

Generally, the proportion of canvas is mostly set to 16:9 or 4:3.

Information obtained after research

“All” low-code platforms must have “declarative” code, which is why all low-code platforms have a built-in “DSL”.

DSL (Domain Specific Language) is a programming Language with limited expression designed for a Specific Domain.

Ideal for scenarios where DSL is used:

  • Repetitive work
  • The communication cost is big, the participation role is many
  • The business knows the details

As mentioned above, the front-end interface with low code is relatively easy, but interaction and logical processing are difficult. There are three common solutions at present:

  • Using graphical programming scratch.mit.edu/
  • Solidification interaction
  • Using JavaScript

Making requests, opening links, and refreshing other components in addition to popboxes, using solidified interactions has two advantages:

  • Visual editing
  • High integration, for example, the popbox can continue to use the configuration, through nesting to achieve complex interaction logic

However, the biggest disadvantage of this solution is that it has limited flexibility and can only use the behavior built into the component.

Why does everyone almost always use JSON? I think there are two reasons:

  • Low-code platform editors are almost always Web-based implementations, and JavaScript makes it easy to manipulate JSON.
  • JSON supports bidirectional editing, with one-to-one correspondence between reads and writes.

Here are a few typical low code visualization platform requirements:

  • Code generation capability (i.e. source code download function)Copy the code
  • Component interaction (that is, components support link jumps, popover interactions, custom events, etc., commonly used in business)Copy the code
  • Data source management (that is, the ability for different user-created pages to share data, and for different components to share data)Copy the code
  • Component stores (that is, the ability for users to produce components, define components, and access component data)Copy the code
  • Layout ability (i.e. users can choose different layout schemes to design the page)Copy the code
  • Common functions integration (page screenshots, wechat sharing, debug ability)Copy the code

Plan: Develop my own implementation plan (editor layout interaction design, data model design, etc.)

1. Material area on the left (a component selection area for users to select required components)

Component library

  • The common components of the questionnaire, such as Input, Select, Radio, and Checkbox, are encapsulated firstCopy the code

Template library (early can not be considered)

  • Customize the common questionnaire template firstCopy the code
  • . Other component libraries can be extended laterCopy the code

2. Middle edit area (an edit canvas that allows users to drag and drop sorted page previews and various operations)

Header toolbar

  • Cancel undo and restore redo. To store each step, use a data structure like an array structure or a stackCopy the code
  • Device responsive PC, Pad, H5. Set different widths, plus device shape background picturesCopy the code
  • Component hierarchy Tree (not done for now) traverses the node, using the Tree component implementationCopy the code
  • Clear, clear the canvas, and start againCopy the code
  • Preview the JSON configuration and render the page with the Render componentCopy the code
  • Import JSON (optional) Import JSON data that meets the data format. For code editors, ACE open source libraries are availableCopy the code
  • Export JSON (temporarily do not get the configuration of JSON, involving code editor, can use ACE open source libraryCopy the code
  • Export code (temporarily not done) generate HTML file or.vue file, write template, use string concatenation. Finally add configuration data, involving code editor, can use ACE open source libraryCopy the code
  • Generating SFC (not for now) involves a code editor and can use the ACE open source libraryCopy the code

Edit panel (Canvas)

  • You can use Vue's '< Component :is="componentId"></ Component >' dynamic components, and drag and drop component libraries.Copy the code

3. Configuration area on the right

  • Form + can use vue's '< Component :is="componentId"></ Component >' dynamic componentCopy the code
  • Form Settings, the properties of a form, are also open, commonly used, and frequently changing properties. Same technique.Copy the code
  • Associated SettingsCopy the code
  • The questionnaire is setCopy the code

The user selects components in the left component area to add to the edit area, rendering each element component through the dynamic component feature. The basic idea and project planning has become, then open dry, open the road, meet water bridge…

Technology selection: Vue3 + Vite2 + TS + Antd + Nest

Vue3 + Vite2 + TS is a new technology in the front end market. Also learned a period of time, just new project, can practice!

Ant Design Vue continues to use AntD because most of the existing projects in the group use this UI library and try to keep it as uniform as possible.

Nest is part of the ts trend to use annotations in depth and provide a variety of enhanced development experience framework, it provides a complete solution, including authentication, database, routing, HTTP status code, security, configuration, requests and other out-of-the-box technologies. (It is not the focus of this article and will not be introduced in detail)

The implementation of the editor is as follows:

The editor generates the page JSON data, and the server is responsible for accessing the JSON data. During rendering, the server takes the data JSON and gives it to the front-end template for processing.

Overall code structure:

Front-end things to do:

  1. Design the data model for each component
  2. Write a single component template for the left component library
  3. Component drag-and-drop handling
  4. Canvas area render template
  5. Operations in the Canvas action area
  6. Component property Settings configuration
  7. Associated Information Settings Configuration
  8. Questionnaire Configuration
  9. Data management operations
  10. The data is analyzed visually

The data model corresponding to the component

The idea originated from a project before 2020. If you are interested, you can go to the sharing address

const inputJson = {
  tag: 'input'.// Tag is more semantic than type, while leaving type empty for more use
  tagName: 'Single line input box'.key: ' '.// The front end automatically generates the key corresponding to the value of the submitted form, which is also the unique identifier of the component
  formItemProps: { / / support AntD Form. The Form Item parameter configuration, https://2x.antdv.com/components/form-cn
    label: 'Single-line input box label' // Title (required)
  },
  nodeProps: { // Support AntD Form for each component node. Such as: input https://2x.antdv.com/components/input-cn
    value: ' ' / / the default value
  },
  hidden: false // The component's true/false is hidden
}
Copy the code

The other component data models are similar and are presented separately.

Here is a key point: the generation of key (unique), used to ask for this back end, this time and the back end does not matter, or to! Only the front-end generates itself, 😢

  1. Follow a fixed character + index (or length+1) (no longer unique when deleting/moving positions)
  2. Use the current timestamp as the key (guaranteed uniqueness, but too long, and unprofessional)
  3. Random numbers (all numbers, and also slightly unprofessional)
  4. Improve the above scheme by specifying a random string
export const getRandomCode = (length: number) = > {
  const data = ['0'.'1'.'2'.'3'.'4'.'5'.'6'.'7'.'8'.'9'.'A'.'B'.'C'.'D'.'E'.'F'.'G'.'H'.'I'.'J'.'K'.'L'.'M'.'N'.'O'.'P'.'Q'.'R'.'S'.'T'.'U'.'V'.'W'.'X'.'Y'.'Z'.'a'.'b'.'c'.'d'.'e'.'f'.'g'.'h'.'i'.'j'.'k'.'l'.'m'.'n'.'o'.'p'.'q'.'r'.'s'.'t'.'u'.'v'.'w'.'x'.'y'.'z']
  let nums = ' '
  for (let i = 0; i < length; i++) {
    const r = parseInt(Math.random() * 61 + ' ')
    nums += data[r]
  }
  return nums
}
Copy the code

Single component template development

The content of input-widget.vue is as follows:

<template>
  <FormItem
    :form-item-props="widget.formItemProps"
    :widget="widget"
    :purpose="purpose"
  >
    <a-input
      v-bind="widget.nodeProps"
      :allow-clear="true"
      placeholder="Please enter"
      v-model:value="formData[widget.key]"
      @change="inputChange"
    />
  </FormItem>
</template>>

<script lang="ts">
import { defineComponent, computed, getCurrentInstance } from 'vue'
import FormItem from './form-item.vue'
import Common from './common'

export default defineComponent({
  name: 'InputWidget'.components: { FormItem },
  props: {
    widget: { type: Object.default: () = >{}},purpose: { type: String.default: 'render' }
  },
  setup (props, context) {
    const instance = getCurrentInstance()
    const { valueChange, getFormData } = Common(instance, props)
    const inputChange = (e: any) = > {
      valueChange(e.target.value)
    }
    const formData: { [key: string]: any } = computed(getFormData)
    return {
      formData,
      inputChange
    }
  }
})
</script >
Copy the code

It’s basically about customizing your individual components and thinking about how extensible your components can be. There’s too much code, so I’m not going to show you all of it.

Component drag and drop

Since the Vue3 framework was used, the corresponding mature Vuedraggable solution was used.

<! -- Material Template List -->
<draggable
    v-model="widgets"// Drag the list data source:options="{group: {name: 'dragGroup', / / can be drag and drop column group, the same table name can push pull pull each other: 'clone' / / drag template materials, copied to the target list}, sort: false / / can push pull sorting}"  
    :clone="handleClone"// Copy the template material execution methodanimation="300"// Animation delay >
    <div
      v-for="(item, index) in widgets"
      :key="index"
      class="control-widgets-item"
    >
      <span>{{ item.tagName }}</span>
    </div>
</draggable>
Copy the code

Canvas area render template

Here we need a Render scheme that assembs the corresponding data model of the component that we drag and drop into a large JSON, and then renders the JSON into the desired page using a written template. Component this is implemented with Vue’s dynamic component < Component :is=”componentId”>
.

<! Canvas area panel -->
<draggable
    :list="getWidgetList"
    item-key="key"
    v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }"
    tag="transition-group"
    :component-data="{ name: 'fade' }"
    handle=".drag-handler"
    @end="onDragEnd"
    @add="onDragAdd"
    @update="onDragUpdate"
    :move="checkMove"
  >
    <template #item="{ element: widget, index }">
      <component
        :is="getWidgetName(widget)"
        purpose="drag"
        :widget="widget"
        :key="widget.key"
        :parent-list="getWidgetList"
        :index-of-parent-list="index"
      />
    </template>
  </draggable>
Copy the code

Component property Settings configuration

Also by configuring the corresponding JSON data, directly using the form-render component to render.

Associated Information Settings Configuration

Make an association configuration form, you can configure the association after a certain item show/hide, or jump.

Questionnaire Configuration

Also by configuring the corresponding JSON data, directly using the form-render component to render.

Data management operations

I can think of it in two ways:

  1. Maintain your own class class, used to add, delete, change and check data.
  2. Directly use the Vue state management tool Vuex

The first one requires me to implement that class myself, which, alas, seems too limited for me. The second kind of direct use is good, out of the box! State, Getter, Mutation, Action, Module…

The data is analyzed visually

The current version only does the data volume statistics and data statistics results download, the later will improve its function.

The final editor effect

Editor panel:

Preview panel:

H5 panel:

Last user access:

conclusion

This is just a preliminary attempt to low code, technical expansion, and strive to do more meaningful practice in the future.

Low code is a trend now, but why? Personally, I think it’s an “industrial revolution” in the world of programming. For example: weaving machines allow ordinary workers to produce high-quality cloth, and at the same time have a qualitative leap in output, efficiency and so on. That low code platform is the loom we developed. Say more also so return a responsibility, oneself experience!