preface

Recently, I have been studying the Lowcode platform and have done a lot of practice. I have developed the basic research and development direction and solutions for the page visualization platform. In the later stage, I will continue to share some of my understanding and solutions on the Lowcode platform and make some exploration in the enterprise application layer.

The body of the

1. What is low code and what does it mean

I recently read one of the best articles on low-code platforms on the Outsystems website, and here’S a simple definition:

Low code is a set of tools that help you intuitively create complete applications using a drag-and-drop interface. Instead of writing thousands of lines of complex code and syntax, low-code platforms enable users to quickly and intuitively build complete applications with modern user interfaces, integration, data, and logic.

Low code is a software development method that delivers applications faster and with minimal manual coding. By using visual modeling in a graphical interface to assemble and configure applications, developers can skip all the infrastructure and reimplement previously difficult scenarios, allowing developers to focus on building their own business uniqueness.

Imagine, for example, that you run a mask manufacturing plant: the machines involved in automation don’t determine how a mask looks, but they do speed up the process of assembly and delivery. That’s what low code is for.

Low code is to software what an assembly line is to a facemask maker: both automate difficult and time-consuming manual tasks, freeing people up to do more important things.

Our common low-code development platforms on the market are:

  1. Visual IDE: An environment for visually defining an application’s UI, workflow, and data model, and adding handwritten code when necessary.
  2. Connectors with various back-end or services: Automatic processing of data structures, storage and retrieval.
  3. Application Lifecycle Manager: An automated tool for building, debugging, deploying, and maintaining applications in test, staging, and production.

More advanced systems (e.gOutSystems) gives us everything we need to create modern, cross-platform enterprise mobile and Web applications, with capabilities that complement existing team structures. The process is shown in the following figure:

2. Low code development process

Our traditional software development process tends to go through a process like this:This is from basic requirements design, product planning, back and forth application development, and finally to testing and deployment.

Using low code, his development process looks like:Each step can be achieved with a very simple drag and drop, greatly reducing development costs, allowing developers and product workers to focus more on the core business of grinding and rapid trial and error, providing a strong support for more agile development.

3. How to realize the interaction between internal and external systems in a low-code system

After introducing the low-code platform, we begin to focus on real business scenarios to implement the core problems and solutions encountered in the low-code development platform. Here the author takesH5-DooringAs an example, take a look at Dooring’s interface:When we use the visual platform, in addition to meeting the design requirements of the display page, we are more to get through with the enterprise business, such as how to achieve cross-system interaction, how to achieve the interaction ability of basic elements, how to embed external API to make the data flow inside the enterprise, etc. The actual scenarios of these requirements are as follows:

  1. Web pages embedded in the App need to communicate with the App side, rather than simply display
  2. Web pages need to realize basic interactive capabilities for user operations, such as jump links, open pop-ups, and so on
  3. When an enterprise collects external data, it wants to flow the configured form into its own internal system for data collection and analysis

The author will present solutions to the above scenarios in H5-Dooring.

3.1 Web page embedded in App and Implementation of App communication

In order to communicate with external containers, you must have the ability to customize your code, which is why I used LowCode instead of noCode, which can be implemented in a variety of ways, such as using popular code editing plug-insreact-codemirror2orreact-monaco-editorThe second thing to figure out is which components need this interaction capability, which is clearly oursButtonComponent. The effect is as follows:This enables true code autonomy and cross-container communication. As for thereact-codemirror2The use of the author simply write a demo for your reference:

import {Controlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/javascript/javascript');

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data.value) = > {
    this.setState({value});
  }}
  onChange={(editor, data, value) => {
  }}
/>
Copy the code

Of course, its internal support for more language extensions, interested in can be studied, the author also based on it to achieve a simple code editor, can be studied.

3.2 Page elements achieve basic interactive capabilities for user operations, such as jump links, open pop-ups, etc

Basically, any visual building platform provides a certain degree of interaction, and these interactions are often bound to interactive components, such as buttons and links. Here, I show you the application of Button components:The above are common interaction patterns in 3, namely:

  1. Skip links
  2. Open the popover and customize the popover content
  3. Custom interaction capabilities

Because the third way has been introduced above, I will focus on popover interaction here. A general popover interaction might support the following popover contents:

  1. The picture
  2. The tooltip
  3. By prompt
  4. form

There are many forms, and it would be a lot of work to implement these components at once in our implementation, so I have designed a way to do it once and for allRich text editorThe author provides a rich text editor to enable the ability of users to define any form of content, as shown below:On the mobile side, it looks like this:To implement this interaction, you need to define a JSON-Schema for the interaction, which I have dissected in my previous article. Instead of dissecting the implementation of H5-Dooring, let’s focus on the rich text editor. I recommend two:

  • react-quill
  • braft-editor

3.3 When an enterprise collects external data from a configured form, it wants to collect and analyze data in its own internal system

For interactive applications, the ability to track and analyze data is an important part. There are many forms and questionnaire tools available, and H5-Dooring also provides an integrated form and questionnaire solution. Users can build custom questionnaires and collect and analyze data within the platform. For users with private domain requirements, they want the form data to flow to their own internal system for their own analysis, so theoretically, we should also provide such a development interface for users to use. In the form design, the author exposed API interface to achieve this requirement:If the user provides an API interface, the page will be automatically submitted to the address specified by the API. The author has done cross-domain processing for this interface, and the user only needs to provide the corresponding cross-domain interface. Code implementation is as follows:

if (api) {
    fetch(api, {
      body: JSON.stringify(formData),
      cache: 'no-cache'.headers: {
        'content-type': 'application/json',},method: 'POST'.mode: 'cors'}); }else {
    req.post(`xxx/xxx`, formData)
}
Copy the code

So, are you learned again today?

The last

The above tutorial has been integrated into H5-Dooring, and some of the more complex interactive features are also possible with proper design, which you can explore on your own.

Github: H5 editor H5-Dooring

Open source Polling portal: Vote for H5-Dooring

If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.

More recommended

  • React+Koa based h5 page editor -Dooring
  • How to realize H5 editor real-time preview and real machine scan code preview function
  • H5 editor image upload and image library design scheme
  • Introduction to online IDE development: Implement an online code editor from scratch
  • How to design the template library in the H5 editor and realize the automatic generation of cover art
  • In-depth analysis of Github star number 15.1k open source project Redux-Thunk