1. Configuration solution
In Feima LowCode front-end technology (1), Feima proposed that at least 2 major capability points must be met and 16 corresponding refinement points must be met. In complex business scenarios, data has a flow nature, and the triggering of events will change the data and trigger other events at the same time. Feima uses a data-driven + event-driven model to solve the problems of data flow and event uncertainty. The data-driven + event-driven model determines that Feima's editing state needs to be data configurable and event configurable. Lay a solid foundation for LowCode or NoCode to solve scenarios in the marketing domain. The overall design is detailed in Figure 1
In Flying Code LowCode front-end technology (1), the design of Flying Code DSL and the data structure of each independent unit are detailed. The following will explain how to conveniently configure the first three items (data source, component, template) on the page (editing state).
2. Data source (interface) design
The interaction between the web page and the server is generally implemented using the http interface. Feima studies the interface configuration and data usage in four steps. They are interface sources, interface input parameters, interface output parameters, components or other places to use. See Figure 2 for details
Interface source : Usually the source is http, sometimes jsf is used to realize data interaction, and the interface can be reused and customized in the same page. We use j-api platform and BFF platform to solve http configuration issues and jsf interface issues respectively. It also supports manual entry of interfaces and interface reuse capabilities. See Figure 3 for details
When you select the j-api under the corresponding permissions of the user, you can then select the corresponding interface through cascading, and you can quickly echo the data to the basic information of the interface. The input parameters of the interface may come from the input parameters of the page, the output parameters of the component, the output parameters of other interfaces, the data processed by the business logic, or other constants. Scenario 1: There are many components in the form submission. We can bind the parameters of all sub-components in the form component with one click through associated attributes. As shown in Figure 2, click { } to achieve the association. Scenario 2: In other cases, the input parameters of the interface come from many situations. Feima uses component parameter output + js script solution. After clicking { } on the js script solution, you can select the input parameters of the page, the output parameters of the component, the output parameters of other interfaces, the data after business logic processing, or other constant conditions. Configuration can be achieved from a global perspective, and simple js processing can also be performed. See Figure 4 for details
Interface input parameters : The data source can be configured through convenient selection. As a cover-up solution, you can use js for processing. In order to minimize code writing, Feima integrates 11 types of common js functions, as well as other common js functions. See Figure 5 for details
The http interface configuration is obtained from the interface, the interface input parameters are configured, and how to configure the interface input parameters in the case of complex business logic has been made most convenient.
Interface parameters : Interface parameters include success and exception data, and data are often mocked during development. So Feima includes 3 configuration items. See Figure 6 for details
Normal and abnormal data structures, data can be brought in from j-api and bff. Simulated data can be manually entered and adjusted according to business conditions.
Question 1 : How to solve the problem of different flying codes when the normal data structure is judged differently when the business lines are different?
Solutions are:
1. Merge the interface data structure and describe the entire possible situation through one data structure.
2. General interfaces are distinguished by an identification code, such as type=1,2... and then type is used to determine which data structure to use.
Among the 11 business scenarios recently verified by Feima, no similar situation has been encountered so far. Feima currently supports Solution 1. For Solution 2, Feima will be upgraded and configured based on specific needs.
Question 2 : There are multiple interfaces on the previous page. How to switch between testing, pre-release and online environments at one time?
There are 2 solutions for Feima
1. Configure the page backend. A field hostUrl is set in the page configuration. After configuring through the backend, you can automatically switch between testing, pre-release, and online environments.
2. Page-level configuration is configured in the editing page. See Figure 7 for details
Question 3 : If the business lines are different, the interface may return different codes (normal data). How to deal with this?
Feima uses page configuration for unified management, see Figure 8 for details. Built-in 200, success, 00000 situations. In other cases, you can configure it directly, with the highest priority.
The above describes the design ideas and solutions of Feima data source. The triggering events of the interface will be described in detail in the events section.
3. Component design
The richness and convenience of components determine the ease of use and scalability of the LowCode tool. Feima divides the components into official components + business components. Implementing components through configuration and supporting dynamic loading are essential requirements for low-code. Looking at Figure 2 in Feima LowCode front-end technology (1), Feima distinguishes whether a component is a local component or a remote component through type=1,2. Business components and flying code are completely decoupled. Feima LowCode front-end technology (1) is described in Figure 2. The component has four dimensional capabilities: style, data, attributes, and events.
Style : The CSS style configuration of each component is consistent, and the CSS configuration of Feima components is implemented through fixed + expansion. See Figure 9 for details
Properties : Feima relies on the elementUI component (other components are also supported, and the following description focuses on the elementUI component). Various configurations in the component are not commonly used in actual business scenarios. Feima uses Feima lite version to implement attribute configuration. Feima lite version is a tool for quickly generating data structure visualization. Taking el-button as an example, the purpose is to convert Attributes into configurable attributes of the flying code component. Figure 10 shows the various properties of el-button, and Figure 11 shows the visual configuration of component properties by the flying code tool.
Feima lite version is specially designed to configure simple form tools, so that Figure 11 can be easily configured through Feima lite version. The material design of flying code components is shown in Figure 12.
Component styles, data, properties, and event configurations in Feima are all quickly built through the Feima lite version. The Feima lite version is shown in Figure 13.
The Feima component JSON file format is shown in Figure 14. JSON contains the default values of styles, data, properties, events, and component types.
The JSON output of the component in Figure 12 is the content of Figure 14. When type=2 in Figure 14, it means that the component comes from a remote location. In Figure 11, there is a { } on the right side of the name field, indicating that this attribute supports dynamic configuration, and the data source of dynamic configuration is consistent with Figure 4. Different business lines need different configuration attributes according to the situation of the business line web page. Feima provides data matching support for the component and declares it by adding the "reactive":["v-model"] field in the propsModel. If multiple fields need to be declared, just add them to the array field corresponding to reactive.
Event : Consistent with attribute configuration, just configure the declaration in the component. As shown in Figure 15
Data : Feima is a data-driven + event-driven design idea. The component data area contains style configuration and attribute configuration lists. See Figure 16 for details.
In the component data configuration area, the style prefix is style to configure the style. It can be data-driven to implement the component style, or data configuration can be performed through the style in Figure 4. When there is a conflict, js has the highest priority. The data configuration also includes an attribute configuration list, and the values corresponding to the attribute fields can also be configured as shown in Figure 4. The data configuration areas are put together to facilitate overall observation of configuration relationships.
Question : Can components automatically generate Feima component json files through scripts?
In practice, we found that the UI component library provides a lot of attribute & event capabilities, but some attributes are not used in actual scenarios, which will cause the attribute field configuration area to become longer. At the same time, you need to consider which attribute fields support { } configuration. Subsequent flying codes will be automatically generated based on business conditions.
template design
The same areas between different pages can be easily extracted as templates; Feima official can customize some templates for R&D use, and R&D developers can also collect templates for use next time.
Feima believes that there are two types of templates, one is UI template, and the other is UI+BIZ template (also including page template). As shown in Figure 17
Feima’s previous design ideas were based on two template types. In practice, it is found that there are difficulties in reusing UI+BIZ. The difficulties include:
1. The template may depend on multiple interface issues;
2. The template has event conditions, or there may be multiple events;
3. The interface address prefixes of page 1 and page 2 may be different;
4. The v-model of the component configuration in the template, There may be duplications in other pages;
5. If the template is a form with validation rules, other pages may also exist; etc.
Feima currently only supports UI templates and page templates. This avoids troubleshooting problems and other configuration-time problems.
Five: Summary
This section analyzes how Feima LowCode front-end technology (2) can conveniently configure page-1, and explains it from the perspective of data sources, components, and templates. The goal of Feimao is to achieve configuration and be close to NoCode. The following section is about Feima LowCode front-end technology (3) How to conveniently configure page-2 to analyze the technical implementation of Feima data, events, and business support.
Lei Jun announced the complete system architecture of Xiaomi's ThePaper OS, saying that the bottom layer has been completely restructured. Yuque announced the cause of the failure and repair process on October 23. Microsoft CEO Nadella: Abandoning Windows Phone and mobile business was a wrong decision. Both Java 11 and Java 17 usage rates exceeded Java 8 Hugging Face was restricted from accessing. Yuque network outage lasted for about 10 hours and has now returned to normal. The National Data Administration officially unveiled Oracle. Launched Java development extension for Visual Studio Code. Musk: Donate 1 billion if Wikipedia is renamed "Weiji Encyclopedia" USDMySQL 8.2.0 GAAuthor: Wang Guanghui of JD Technology
Source: JD Cloud Developer Community Please indicate the source when reprinting