Wonderful review
Getting started with online IDE development: implementing an online code editor from scratch
Summary of TS core knowledge points and analysis of actual project cases
Preface
The author has been studying the Lowcode platform recently, and has done a lot of practice. I have a basic research and development direction and solutions for the page visualization platform. I will continue to share some of my understanding and solutions for the low code platform later. , And do some exploration in the enterprise application layer.
text
1. What is low code and the meaning of low code
Recently, the author read a good article explaining low-code platforms on the outsystems website. Here I have made a simple definition:
Low Code is a series of tools that help us create complete applications intuitively using a drag and drop interface. The low-code platform does not need to write thousands of lines of complex code and syntax, but enables users to quickly and intuitively build complete applications with modern user interfaces, integration, data and logic.
Low code is a software development method that can deliver applications faster with minimal manual coding. By using visual modeling in the graphical interface to assemble and configure applications, developers can skip all infrastructure and re-implement scenarios that were difficult to solve in the past, allowing developers to focus on the uniqueness of their business.
For example, imagine a mask manufacturing factory that you open: machines that involve automation do not determine the appearance of masks, but they do speed up the assembly and delivery process of masks. This is the role of low code.
Low code is to software what assembly lines are to mask manufacturers: both automate difficult and time-consuming manual tasks, thereby freeing people up to do more important things.
The more common low-code development platforms on the market are:
Visual IDE: An environment for visually defining the UI, workflow, and data model of an application, and adding handwritten code when necessary.
Connectors with various backends or services: automatic processing of data structure, storage and retrieval.
Application Lifecycle Manager: An automated tool used to build, debug, deploy, and maintain applications in testing, staging, and production.
More advanced systems (such as OutSystems) provide us with everything we need to create modern, cross-platform enterprise mobile and web applications, and have functions that complement the existing team structure. As shown in the following figure:
2. Low code development process
Our traditional software development process often goes through the following processes: that is, from basic requirements design, product planning, to front-end and back-end application development, and finally to testing and deployment.
Using low code, his development process looks like: every step can be implemented by very simple drag and drop, greatly reducing development costs, allowing developers and product workers to focus more on the polishing and core business Quick trial and error provides strong support for agile development.
3. How to realize the internal and external system interaction under the low-code system
After introducing the low-code platform, we began to focus on actual business scenarios to realize the core problems and solutions encountered in the low-code development platform. Here I take H5-Dooring as an example, let’s take a look at the operation interface of dooring first : When we use the visualization platform, in addition to meeting the design requirements for display pages, we also need to connect with the company's own business, such as how to achieve cross-system interaction, how to achieve the interaction capabilities of basic elements, how to plant Importing external APIs allows data to flow into the enterprise, etc. The actual scenarios corresponding to these requirements are as follows:
The webpage embedded in the App needs to communicate with the app, not just display
Web pages need to implement basic interaction capabilities for user operations, such as jump links, open pop-up windows, etc.
The form configured by the enterprise, when collecting data externally, hope to flow into its own internal system for data collection and analysis
The author will give corresponding solutions in H5-dooring for the above scenarios.
3.1 Webpage embedded in App internal and app communication realization
To communicate with external containers, you must have custom coding capabilities, which is the reason why the author uses LowCode instead of noCode. There are many specific implementation methods, such as using the more popular code editing plugins react-codemirror2 or react-monaco-editor The second thing to be solved is which components need to have this kind of interaction capability, here is our Button component. The effect is as follows:
so that we can achieve true code autonomy and cross-container communication. As for the use of react-codemirror2, The author simply wrote 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) => {
}}
/>
Of course, it supports more language extensions. Those who are interested can study it. The author has also implemented a simple code editor based on it. You can study it.
3.2 Page elements implement basic interaction capabilities for user operations, such as jump links, open pop-up windows, etc.
Basically any visual construction platform will provide a certain degree of interaction capabilities. These interactions are often bound to interactive components, such as buttons and links. Here I show you the applications in the Button component: the above are common in 3. The interactive mode, namely:
Jump link
Open the pop-up window and customize the content of the pop-up window
Custom interaction capabilities
Because the author has already introduced the third method above, here is the focus on the pop-up interaction. The general pop-up interaction may support the following pop-up content:
image
Text prompt
Graphic prompt
form
There are still many forms. If we want to implement these components at once in our implementation, it will be a very large workload, so the author here designed a once and for all way-rich text editor. The author provides a rich text editor to achieve The user's ability to define any content form is shown in the following figure: The effect on the mobile phone is as follows:
To realize the interaction, you need to define the interactive json-schema. Here the author has also dissected the specific implementation of H5-dooring in the previous article. Introduced one by one, we mainly take a look at the rich text editor, here I recommend two:
react-quill
braft-editor
3.3 The form configured by the enterprise, when collecting data externally, it hopes to flow into its own internal system for data collection and analysis
For interactive applications, data tracking and analysis capabilities are an important part. There are also many form questionnaire tools. Similarly, H5-Dooring also provides an integrated solution for form questionnaires. Users can build custom questionnaires on the platform. And for data collection and analysis. For users with private domain needs, they want the data of the form to flow to their own internal system and analyze by themselves, so we should theoretically provide this development interface for users to use, in the form design , The author exposes the api interface to achieve this requirement: if the user provides the api interface, the page will be automatically submitted to the address specified by the api, the author has done cross-domain processing on the interface, and the user only needs to provide the corresponding cross-domain interface. The code is implemented 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)
}
So, are you knowledgeable again today?
At last
The author of the above tutorial has been integrated into H5-Dooring. For some more complex interactive functions, it can also be realized through reasonable design. You can explore and study by yourself.
github address: H5 editor H5-Dooring
Open source voting entrance: 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 actual combat, welcome to study and discuss together in "Interesting Frontend" to explore the front-end boundary together.
References: https://www.outsystems.com/blog/posts/what-is-low-code/