Flying Code LowCode front-end technology series: How to quickly and easily verify production and fly code exploration | JD Cloud technical team

From data to large model application, on November 25th, Hangzhou Yuanchuang Conference was held to share development tips.

This article analyzes three aspects: how the data center and event center work according to the protocol, how vue2.x and vue3.x can be supported regardless of the environment, and how to locate problems on the production page.

1. Data center and event center design

Feima is a data-driven + event-driven product. Considering the Feima operating environment, Feima encapsulates the store itself.

Data center : There may be multiple Feima tags on the same page, and Feima implements the store through instantiation. See Figure 1 for details when accessing Feimao

figure 1

 

At run time, Feima will create an instance of this part. See Figure 2 for details

figure 2

 

The data center will borrow the underlying capabilities of different technology stacks to achieve data flow based on the current operating environment. The JSONSchema in Figure 2 comes from the paasDSL in Figure 1 or is obtained through the page id, among which the page pageId has the highest priority.

Event center : Events will be triggered when page life cycle functions and user operations occur, and events may trigger other events. For details on event types, see Feima [LowCode Front-end Technology (3)]. Flying code events are implemented by instantiating objects. When an event is triggered, an event instance eventCenter will be created. The edit state event product eventId corresponds to the event center. Sometimes other events will be triggered when the pop-up box disappears, and other events will continue to perform tasks. Feima introduces an event enhancement mechanism to monitor when the pop-up box disappears and continue to execute the previous task. See Figure 3 for details

image 3

 

The event center will trigger data changes in the data center, and the data center will trigger component-related UI changes. The relationship between them is detailed in Figure 4. The arrow pointing does not happen every time. For example, the page life cycle function does not necessarily have events configured. When the page is running, if there are no events configured in the life cycle function, the event center will not be triggered.

Figure 4

2. Design that does not depend on the environment

Differences in technology stacks of front-end projects. The current mainstream technology stacks include vue (vue2.x, vue3.x) and react. According to the department’s internal technology stack, Feima supports vue2.x and vue3.x. See Figure 5 for details

Figure 5

 

The components in the flying code running state are developed using the h function, and the environment is judged in the component. Each component is associated with a data center, which notifies components of updates. A component's events are associated with an event hub. Taking button as an example, use isV3() to determine whether the current running environment is vue3 for adaptation. See Figure 6 for details

Figure 6

 

Feima's design ideas for complex business scenarios are consistent with circuit diagram design. Feima itself is also a component, and Feima supports nesting itself. See Figure 7 for details

Figure 7

 

Question : Will Feima support react?

It will be supported. According to the current business scenario requirements, just add react capabilities to the data center and event center. The current model will not change.

3. Problem locating on the production page

FMHelper can monitor many problems on the page in the editing mode. When a problem is found after previewing the page, the builder needs to have front-end experience to locate the problem and then make changes in the editing mode to achieve the desired effect. If you don’t know much about the front-end knowledge, quickly locating and correcting it is one of the directions of flying code exploration.
Feima continues to explore in the direction of convenience, robustness, and zero testing.

Four: Summary

This chapter analyzes how Flying Code can be conveniently and quickly verified to achieve production and Flying Code exploration, focusing on three aspects: how the data center and event center work through protocols, how vue2.x and vue3.x can be supported independently of the environment, and how to locate problems on the production page. introduced in detail. The next chapter introduces [Flying Code LowCode front-end technology (7)] Introduction to Flying Code canvas technology.

Author: Wang Guanghui of JD Technology

Source: JD.com has a developer community. Please indicate the source when reprinting.

Alibaba Cloud suffered a serious failure and all products were affected (restored). Tumblr cooled down the Russian operating system Aurora OS 5.0. New UI unveiled Delphi 12 & C++ Builder 12, RAD Studio 12. Many Internet companies urgently recruit Hongmeng programmers. UNIX time is about to enter the 1.7 billion era (already entered). Meituan recruits troops and plans to develop the Hongmeng system App. Amazon develops a Linux-based operating system to get rid of Android's dependence on .NET 8 on Linux. The independent size is reduced by 50%. FFmpeg 6.1 "Heaviside" is released

{{o.name}}

{{m.name}}