Background & Value
At present, the company has many special logic arrangement technology for the back end, and there is no unified standard, precipitation general scheme. Our front-end students often try to reuse at the page level and module level to reduce repeated code development, reduce human resource investment and improve development efficiency. Can we also break it down to smaller, function-level logic reuse?
Recently, our team created a logical arrangement scheme with front-end characteristics, and established an arranger that allows users to freely and normalize the arrangement logic. In the form of no code, with the help of graphical components, students in product and operation can build production logic, which can be reused for multi-business scenarios.
In this paper, through the design and business practice of logical layout and visual construction, to do some communication with you.
choreographer
Basic concept
Choreographer is a logical orchestration through visual construction, generating a container with business logic; Export the logic flow chart and convert it into DSL to generate the code logic actually executed in the business. Can be understood as production logic in logical choreography.
The platform side choreographer is designed as shown in four parts. Toolbar, component list, Build canvas, basic configuration.
The toolbar contains basic operations such as saving logic, checking and setting up norms, and exporting logic. Component is a node in logic, a function, is the business commonly used logic out of the precipitation according to the code specification. The following list of components with different shapes and colors is the classification of components by function type.
The middle part is the canvas for logical construction. The main operation action is to drag the logical components in and connect them with directional lines to combine them into a complete logic with beginning and ending. It is also the core part to realize simple or complex flow charts with specific business meanings.
On the right side, click the panel of corresponding basic configuration information displayed by a component, that is, the input parameter of the function. Our design must allow users to flexibly configure the basic information of the component.
When designing this choreographer, my goal is to create a standard choreographer that maximizes the freedom of user choreography through technical means, making it non-intrusive and reusable for various business scenarios. Here is how we specifically design.
The overall design
Component design
Based on the capability of G6 drawing engine, different shapes, colors and structures of components can be registered according to the definition type of components. The component is composed of four parts: main body shape, branch line, description text and node. The node figure is also divided into two parts, the upper node is the node that other components can connect to the current component, the lower node is the node that the current component can connect to other components.
Element type
Components are divided into two categories based on whether they contain logic: basic components and business components. As shown in the tree diagram.
The basic component does not have any business logic, and contains the beginning and end components, which are fixed as the starting or end identification of a logic. Each logic must have the beginning and end components. Design the base element as round and green; Business elements, each with business logic and only one input node, are further divided into three more fine-grained types based on the number of results they can output. (Details are as follows)
The end business element, although with business logic, can also be the end of a logic. Such as jump to a new page logic, this action will jump to a new address after execution, the current logic in the current page cannot continue to the next action, so it is called ending business element, so it is designed as only one input node, no output node. Because it also marks the end of a piece of logic, I also made it a circle, with yellow as the distinction.
A common business element is a component that normally has input and a fixed result-oriented element. For example, to obtain data through an interface request, there will be a fixed schema format of returned data output. So a normal business element has an input node and an output node, shaped like a rectangle.
Judging the complexity of business components, according to component design specifications, when creating components, it can be determined that there are multiple output results, which are >1, and there will also be returned data output in fixed schema format. For example, to determine whether a user has logged in, there are two cases: logged in and not logged in. The business component is not either one or zero. It may have a, B, C, D… Multiple results orientation. Thus, a normal business element has one input node and N output nodes in a diamond shape design.
We define and register components according to function types, and cover all types as far as possible. The purpose is to make this logical layout scheme universal and reusable, and suitable for multiple businesses and scenarios.
Registered components
Element has a variety of shapes, colors, branches, nodes and lateral platform registered components of ideas: take judgment business components, for example, using SVG drawing diamond – element main body shape, style custom component, depending on the type of element according to component, the number of branch dynamic mapping, node position, the length of branch line of anchor point information and so on.
G6.registerNode(
'diamond',
{
draw(cfg: Cfg, group: GGroup) {
const size = [94.64]; // Convert to [width, height] mode
const width = size[0];
const height = size[1];
// SVG custom body shape
const path = [
['M'.0.0 - height / 2].// Upper vertex
['L', width / 2.0].// Right vertex
['L'.0, height / 2].// Lower vertex
['L', -width / 2.0].// Left vertex
['Z']./ / closed]; . },afterDraw(cfg: Cfg, group: GGroup) {
const size = [100.64];
const width = size[0];
const height = size[1];
// Branch description
addDesc(cfg, group, width, height, cfg.outLine);
/ / branch line
addLine(group, width, height, cfg.outLine);
// Connect anchor points (small dots)addNode(group, width, height, cfg.outLine, cfg.showNode); },... },'base-node',);Copy the codeComponent branch lines are also different in length and direction. The length of the line is determined by the number of branches, that is, the outline field in the code:
const addLine = (group, width, height, outLine) = > {
group.addShape('path', {
attrs: {
path: [['M', -width / 2 * (outLine - 1), height + 3],
['L', width / 2 * (outLine - 1), height + 3],
['Z']],... edgeStyle },draggable: true}); }Copy the codeThe node of the component is divided into an input node and a group of output nodes. The position of the output node is still determined by the outline
const addNode = (group, width, height, outLine, isShow) = > {
/ / x coordinate
let xPosition = i= > {
return -width / 2 * (outLine - 1) + width * i;
}
outLine && new Array(outLine).fill(0).forEach((d, i) = > {
group.addShape('circle', {
attrs: {
x: xPosition(i),
y: height + 4.r: 4.5. dotStyle },name: `circle-shape-${i + 1}`}); })}Copy the codeCreate component
The user needs to create a new component according to the specification. The initialization project contains four core files, as shown in the figure for example, the basic business component.
Index.js is the main function logic file of the component. Functions usually have input parameters and can be configured flexibly by the user. The input.json file is a standard Schema protocol defined as the basic configuration information of functions. This content can be rendered as a form on the platform side for users to configure basic information and is passed to corresponding functions as payload during logical execution.
Json, which determines the number of branches and branch information, has an array length of 1, and input only one item.
Output. json is the standard JSON Schema protocol information corresponding to the data returned by the final return after the body function is executed. Output data is the product of logical arrangement, as shown in the figure, which can be bound to corresponding fields on the business side and visually display corresponding contents.
The item structure is the same for different component types, but the number of output results is different, and the structure of the content returned asynchronously by the body function is different.
If the login component is checked and two cases are returned, the body function will call the corresponding API and make a decision between the two return cases. The return message branch is 0, which is the unlogged return of the first item of the array corresponding to the branch file. If branch is 1, the second item of the branch file is logged in. The message indicating that data is logged in is returned. The length of the Branch file’s array is the number of output results of the component, and the contents of the array are semantically corresponding. This is the design of the overall structure of the component and the corresponding development input specification, according to which the developer can create the corresponding type of new component.
We also provide a visual build form designer for developers to quickly build the corresponding content.
Visual construction based on form-render
Our platform has embedded form designer based on form-render, which can be linked and customized components can be quickly accessed to meet diversified customization requirements. In view of the schema design, Form-Render sought appropriate existing standards as the carrier to extend moderately on it. After a long time of accumulation, it could cover most business scenarios, so it could basically realize our business demands, that is, possible expansion, so we chose this schema to form scheme.
Technical students can build a configuration form by visual drag and drop according to functional requirements; Click Export Schema to export the standard JSON Schema protocol information, which is the basic configuration information of component registration and the source of the InputSchema protocol and outputSchema standard protocol information of output data.
Provide set up component market
Logic choreography has the advantage of decoupling logic from THE UI and clearly dividing responsibilities. The responsibility of the development student is to develop the logic of components, release components, input components into the market, state management, iteration version management. Product students will select existing components in the component market according to their needs. If there are no corresponding components, they will ask the development students for their needs. Then they will build the logic and produce the logic for the business side to use.
The logical layout
To build logic, drag the components in the list to the canvas and connect the nodes with the corresponding nodes through the directional lines, so that the logical fragments can be combined into a complete logic with beginning and ending. (Effect display)
Through technical means, added the ability to build intelligent alignment, check specifications, automatic error correction and so on. Click the check button and save button in the toolbar, and the non-standard construction behavior will be prompted and explained according to the rules. For example, a field in the component basic configuration form cannot be empty. In the process of user construction, we also designed the component connection rules to automatically correct the non-standard construction behavior, such as components can not be closed loop connection, can not be repeated connection, etc. We build a choreographer that maximizes the freedom and normalization of the user’s orchestration, so that when the user constructs and publishes the logic, it is already the logic that the specification can use.
Of course, we also decouple the material list, canvas and property panel in the designer. Each panel is not strongly dependent on the other, with common adapters, set base specifications and tools to choose from, as well as sections that can be customized for different business scenarios. Our original intention is to focus on logical construction and create different product forms according to actual business scenarios.
Business floor
UI& logical orchestration combined with design
The first business platform we tried to land was also our team’s Hollywood platform, a combination of UI choreography. UI layout, also known as universal hot zone module, is a module production tool launched by the platform. It provides easy-to-use and powerful operation interface, allowing operation and design students to make modules just like PPT. As shown in the figure, UI layout can fully realize the construction of a static page; Users can create hot zone modules at will. As a carrier, hot zone can configure basic information such as text, style and picture, and bind “action” in the corresponding hot zone. The concept of action is a behavior triggered by users’ active clicking, such as jumping to a page, closing a page, opening a small program and so on. This is pure UI choreography scaffolding.
A module of this winter holiday campaign was set up using UI layout. Let’s take a look at the overall design of UI choreography combined with logical choreography.
Triggering logic in the module is divided into two cases, one is active triggering logic, that is, with the loading of components automatically start to execute the logic. One is passive trigger logic, which requires the user to click to trigger the execution of the logic. Select the preset logic in the corresponding function configuration area to mount the logic to the current module.
As shown in the figure, each logic has an independent context, and the corresponding data product after the logic execution will be stored in the context and shared with the current module. The module flattens all data in the format of key.value, and binds the corresponding fields in the hot area of the view through semantics. Once the data state changes during logic execution, it drives local UI dynamic rendering of the module. If the state of the module is bound to the corresponding field, the change of the field data state will also drive the overall UI change of the module.
The actual operation on the platform side is as follows: to the right of the picture below, select “Logical Arrangement” in the action of hot area, and select a logic exported from the logical arrangement platform in the secondary drop-down box.
Logical data products are visually displayed on the business platform according to outputSchema protocol. The corresponding hot area module can select/bind corresponding field contents. When the logic is executed, the data-driven view changes.
Before and after. – What’s the advantage
Before: after the product requirements were raised, the front-end development students needed to rely on the design draft and start page development and logic development. After the development was completed, the module was published and input to the platform side, and the operation students could configure the basic information of the module.
Now: After understanding the requirements, the front-end and the design can start the work in parallel. The front-end students start to develop the logic components that the module needs to rely on. After the development, the product builds the logic according to the requirements. Design students can also start to draw design draft and import the overall style on the platform side, and then instruct students to configure basic information and select matching logic for corresponding actions.
Such advantages are: during the project, frequent changes of UI and logic will not depend too much on technical development and technical release, and the heavy development will be divided into multiple roles, light work and fast iteration; We moved from module reuse, down to smaller component reuse, freeing up developers to move bricks. It has been verified that traditional source development takes about 2 days to evaluate from receiving the demand to going online, while the solution combined with UI logic orchestration only takes 2 hours. Truly achieve cost reduction and efficiency improvement. And the biggest advantage is the decoupling of logic and UI.
When the UI design draft is changed, the comparison of the process before and after:
Pure UI changes have completely released development resources, saving source code development -> code release -> module entry/shelf -> operation upgrade module process, not only save development labor costs, operation students through adding/deleting/changing configuration information also no longer rely on development.
Although logic change seems to be a judgment step, if there are reusable logic components, the product can directly drag and drop to update the logic; Non-reusable components need to be developed by students. However, from a long-term perspective, as we descend from module reuse to smaller component reuse, the component library continues to accumulate logic, and the component reuse rate will definitely increase in the future. From a development perspective, we are also planning to upgrade from local component development to online development, one-click release and shelf components. Let the process orchestration efficiency further improve.
chart
This structure shows the overall upstream and downstream relationship between logical orchestration and the business platform side
Logical orchestration is divided into three parts: choreographer, DSL, and Runtime:
-
Based on Schema analysis and G6 drawing engine, the choreographer combines the definition and registration of component types to draw four components with different forms and functions for canvas construction. Components are developed by the developer and can be managed from the component Management page. Canvas includes toolbar functions such as zooming and unzooming, and user building process. We provide intelligent alignment, check specifications, automatic error correction, online testing and other capabilities through technical means, so that users can build logic more smoothly and standardized.
-
The DSL converter converts all of the canvas information into JSON and provides it to the business side
-
Business platform side logic starting point of the trigger logic in active & passive trigger logic, logic is triggered once, provided by the Runtime API to register components, and begins to execute, the implementation of each element corresponding product data through the context Shared with business, once the state change of the corresponding data binding field, cause local UI changes, Switch module status. After an action is executed, it moves to the next action, and so on until the logic ends.
This is the whole/core idea of logic and UI. Logic orchestration generates data, and UI orchestration listens for data changes and drives attempts to change.
conclusion
Logical choreography makes breakthroughs in three areas:
Logic reuse: avoid repetitive code development by r&d students, save labor costs, achieve cost reduction and efficiency improvement, and reduce the variable cost of demand;
The division of labor is more clear: UI and logic decoupling is realized, the technology only develops logic in the development process, and the development work is divided into multiple roles and light work. At the same time of product building logic, it also visualizes the needs for others to understand;
Business reuse: It can be applied to multiple business scenarios by designing components, canvases, DSLS and Rumtime in a versatile, flexible and extensible way. Our plan is to focus on logical construction and create different product forms according to actual business scenarios, hoping to serve more platforms.
Our logic layout technology is currently in the initial stage of the landing business, as well as the function of iterative expansion, welcome everyone to exchange ~