Cross-framework development system and method, electronic equipment, storage medium and product

Abstract

The invention discloses a cross-framework development system and method, electronic equipment, a storage medium and a product, and relates to the technical field of cross-framework integration, and the system comprises a container layer, a communication layer and a state management layer; the container layer is used for loading an inline framework container in the main application, the inline framework container is used for isolating a runtime environment of a sub-module from the main application, and the sub-module is a module running in the inline framework container; the communication layer is used for communicating between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; and the state management layer is used for synchronizing the states of the main application and the sub-module according to a preset state synchronization mechanism, so that the technical problems of frequent occurrence of life cycle conflicts caused by asynchronism of different frame loading time sequences, difficult state synchronization caused by difference of different frame response mechanisms and low system development efficiency during cross-frame integration in related schemes are solved, and the system development efficiency is improved. The technical effect of improving the development efficiency of the cross-framework integration system is achieved.

Description

Technical Field

[0001] The present application relates to the field of cross-framework integration technology, and in particular to a cross-framework development system, method, electronic device, storage medium and product. Background Art

[0002] In related cross-framework development solutions, since the frameworks of the main application and sub-modules are different, the asynchronous loading timing of different frameworks will cause frequent conflicts in the system life cycle. The differences in the response mechanisms of different frameworks will make it difficult to synchronize the system status, which will lead to low system development efficiency. Summary of the invention

[0003] The present application provides a cross-framework development system, method, electronic device, storage medium and product to at least solve the problem in the related art that due to the different frameworks of the main application and the sub-modules, the asynchrony of the loading timing of different frameworks will cause frequent conflicts in the system life cycle, and the differences in the response mechanisms of different frameworks will make it difficult to synchronize the system status, which in turn leads to low system development efficiency.

[0004] The present application provides a cross-framework development system, including: a container layer, a communication layer, and a state management layer; The container layer is used to load the iframe container in the main application. The iframe container is used to isolate the runtime environment of the submodule from the main application. The submodule is a module running in the iframe container. The communication layer is used to communicate between the main application and the submodules according to the preset message protocol and preset communication mechanism; The state management layer is used to synchronize the state of the main application and sub-modules according to the preset state synchronization mechanism.

[0005] This application provides a cross-framework development method, including: Loading an iframe container in the main application. The iframe container is used to isolate the runtime environment of the submodule from the main application. The submodule is a module running in the iframe container. Communicate between the main application and the submodules according to a preset message protocol and a preset communication mechanism; Synchronize the status of the main application and submodules according to the preset status synchronization mechanism.

[0006] The present application also provides a cross-framework development device, including: A loading unit, used for the container layer, is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the submodule from the main application, and the submodule is a module running in the inline frame container; A communication unit, used for communicating between the main application and the submodules according to a preset message protocol and a preset communication mechanism; The state synchronization unit is used to synchronize the states of the main application and the submodules according to a preset state synchronization mechanism.

[0007] The present application also provides an electronic device, comprising: a memory for storing a computer program; and a processor for implementing the steps of the above-mentioned cross-framework development method when executing the computer program.

[0008] The present application also provides a computer-readable storage medium, in which a computer program is stored, wherein the computer program implements the steps of the above-mentioned cross-framework development method when executed by a processor.

[0009] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned cross-framework development method when executed by a processor.

[0010] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure. Figure 1 A schematic diagram of the structure of a cross-framework development system provided in an embodiment of the present application; Figure 2 A schematic diagram of a flow chart of communication between a main application and a submodule provided in an embodiment of the present application; Figure 3 A schematic diagram of the structure of a cross-framework development system provided in an embodiment of the present application; Figure 4 A schematic diagram of a cross-framework development method provided in an embodiment of the present application; Figure 5 A schematic diagram of the structure of a cross-framework development device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0012] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0013] It should be noted that, in the description of this application, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. The terms "first", "second", etc. in this application are used to distinguish similar objects, and are not used to describe a specific order or sequence.

[0014] In order to enable those skilled in the art to better understand the present application, the present application is further described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0015] In conjunction with the specific application environment architecture or the specific hardware architecture on which the execution of the cross-framework development method depends, the specific application environment architecture or the specific hardware architecture is described herein.

[0016] The Dojo framework is used to build large-scale, complex web applications.

[0017] The Vue3 framework is a progressive JavaScript framework for building user interfaces. Vue3 has the advantages of responsive system upgrades and component-based improvements.

[0018] The Model-View-Controller (MVC) pattern helps developers separate the data management, user interface, and control logic of an application, thereby improving the maintainability, scalability, and reusability of the code. The model is responsible for managing the data and business logic of the application; the view is responsible for displaying data to the user and handling user interactions; the controller, as an intermediary between the model and the view, handles user input, calls the model's methods to update the data, and then notifies the view to update accordingly.

[0019] Document Object Model (DOM) is a cross-platform, language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. DOM represents a HyperText Markup Language (HTML) or Extensible Markup Language (XML) document as a tree structure, where each node represents a part of the document (such as an element, attribute, text, etc.). In a browser environment, a document usually refers to the HTML page currently loaded into the browser.

[0020] Related storage management software has been using the Dojo framework, and has encountered bottlenecks in component development efficiency. Its underlying implementation mechanism is limited, compatibility processing is complicated, and DOM operations are intricate. At the same time, Dojo's component architecture has also revealed shortcomings, with lagging component definition methods and fragmented state management, which seriously restricts the improvement of development efficiency. In addition, the complexity of the build process and the lack of ecological support have also become its shortcomings that cannot be ignored. In the Dojo project, the mixed use of MVC and custom modes has led to a surge in code coupling, while the component reuse rate is as low as 30%, which has brought great challenges and cost pressure to subsequent maintenance work. Although Dojo has effectively solved many problems of early Web applications, its component development efficiency is now obviously restricted by the limitations of underlying mechanisms, architectural design, and ecological development.

[0021] Vue3 significantly improves development efficiency and user experience through its innovative responsive mechanism. It uses modern JavaScript's Proxy object to achieve deep monitoring and efficient updates of object properties. This mechanism enables Vue3 to automatically track and trigger view updates when data changes, without manually operating the DOM. In addition, Vue3's responsive system also supports responsive processing of nested objects, which can more flexibly deal with complex data structures. These features together constitute Vue3's efficient responsive mechanism, providing developers with more intuitive and powerful tools to help build high-performance front-end applications.

[0022] In order to reduce the workload of reconstruction and break through the bottleneck of current development efficiency, Vue3 and hybrid frameworks are introduced to achieve more efficient enterprise-level system development. However, the compatibility problem between Vue3 and the old version of Dojo modules has become the main obstacle to smooth technology upgrades. The current cross-framework integration strategy faces three major bottlenecks: First, the mixing of global variables and DOM events can easily cause data confusion, increase maintenance difficulty and risk, and lead to low communication efficiency. Secondly, the asynchronous timing of loading components of different frameworks often leads to rendering confusion, resulting in frequent life cycle conflicts and affecting user experience. Finally, the difference in the two-way data binding mechanism between Vue3 and Dojo makes it easy to lose the state when transferring between frameworks, making it difficult to achieve seamless docking, resulting in many difficulties in state synchronization.

[0023] In order to solve the technical problems existing in related solutions, the global variables between different frameworks can be isolated through middleware to reduce data confusion caused by variable pollution; by formulating unified lifecycle management specifications, the behavior of different framework components during loading and destruction can be ensured to avoid rendering errors; the communication protocol can be used to establish a state synchronization bridge to ensure the accuracy and completeness of data transmission between frameworks, overcome compatibility barriers, and promote the integrated development of the technology ecosystem.

[0024] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system.

[0025] In order to enable those skilled in the art to better understand the present application, the present application is further described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0026] Figure 1 A schematic diagram of the structure of a cross-framework development system provided in an embodiment of the present disclosure.

[0027] like Figure 1 As shown, the cross-framework development system is based on a layered design, including a container layer, a communication layer, and a state management layer; The container layer is used to load the iframe container in the main application. The iframe container is used to isolate the runtime environment of the submodule from the main application. The submodule is a module running in the iframe container. The communication layer is used to communicate between the main application and the submodules according to the preset message protocol and preset communication mechanism; The state management layer is used to synchronize the state of the main application and sub-modules according to the preset state synchronization mechanism.

[0028] In some embodiments, the main application can be an application of the Dojo framework, an application of the React framework, or an application of the Angular framework, and the sub-module can be a sub-module of the Vue3 framework or a sub-module of the React framework. In this application, the main application takes the application of the Dojo framework as an example, and the sub-module takes the sub-module of the Vue3 framework as an example.

[0029] In some embodiments, the inline frame container is an iframe container, and each submodule runs in its own iframe container and has an independent JavaScript context.

[0030] In some embodiments, the runtime environment of a submodule refers to all resources and technology stacks that the submodule relies on during execution, including but not limited to JavaScript engines, frameworks or core libraries of frameworks, style sheets, layout mechanisms, and scripts.

[0031] In some embodiments, different frameworks may have different global variables or namespaces, which may conflict if not isolated. Therefore, by isolating the runtime environment of the sub-module from the main application through the inline frame container in the container layer, different frameworks can run independently without interfering with each other.

[0032] In some embodiments, the preset message protocol and preset communication mechanism in the communication layer can enable the main application and the sub-modules to exchange data safely and efficiently, wherein the preset message protocol is used to define the format and rules followed when exchanging data between the main application and the sub-modules, ensuring that the main application and the sub-modules can correctly parse and process the received messages, thereby achieving safe and efficient communication; the preset communication mechanism is used to define how the main application and the sub-modules perform actual data exchange operations, which may include message delivery methods, event monitoring and response to ensure that data can be delivered safely and efficiently.

[0033] In some embodiments, the preset state synchronization mechanism is used to determine the rules for state synchronization between the main application and the sub-modules, specifically including how to share, update and maintain consistent state data between the main application and the sub-modules.

[0034] In some embodiments, the states of the main application and the sub-modules are synchronized through a preset state synchronization mechanism in the state management layer, so that data consistency between the main application and the sub-modules can be ensured.

[0035] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system.

[0036] In some embodiments, the container layer adopts a lazy loading strategy, and the lazy loading strategy is used to load the inline frame container according to event driving, and the event driving at least includes form input driving or position scrolling driving.

[0037] In some embodiments, the lazy loading strategy aims to delay the loading of non-core resources or content until they are actually needed. This strategy is widely used in large applications, complex pages, or resource-intensive modules.

[0038] In some embodiments, when a user enters specific content in a form, such as a search box, selection box, etc., the lazy loading logic is triggered to dynamically load sub-modules. This driving method is suitable for scenarios where content needs to be dynamically loaded based on user input, such as search suggestions, dynamic form validation, etc. Specifically, the input event can be used to monitor the user's input and determine whether the triggering conditions are met.

[0039] In some embodiments, when the user scrolls to a certain area of ​​the page, the lazy loading logic is triggered to dynamically load the sub-module. This driving method is suitable for scenarios where part of the content in a long page needs to be delayed in loading, such as infinite scrolling lists, paginated loading, etc. Specifically, the scroll event can be used to monitor the user's scrolling behavior and determine whether the target area enters the viewport, where the viewport refers to the area currently visible to the user in the browser window, which is the part of the page that the user can see directly without scrolling. The size of the viewport depends on the user's device screen size, the size of the browser window, and the zoom ratio.

[0040] In some embodiments, the event-driven method may also be click-driven, that is, when a user clicks a button or a link, the lazy loading logic is triggered to dynamically load the sub-module.

[0041] In some embodiments, lazy loading delays the loading of non-critical resources through an on-demand loading mechanism, thereby reducing initial loading time and memory consumption.

[0042] In some embodiments, the lazy loading strategy can also be driven by network status, that is, whether to load resources is determined based on the user's network status, such as Wi-Fi strength or cellular data.

[0043] In some embodiments, dynamically loading the iframe container in an event-driven manner can avoid unnecessary resource consumption and improve user experience.

[0044] In some embodiments, the on-demand loading of the iframe container in the Dojo main application can be achieved by the following statement: / / Load iframe on demand in Dojo main application require(["dojo / dom-construct"],function(domConstruct){ const iframe=domConstruct.create("iframe",{ id:"vue3-container", style:"width:100%;height:600px", src:" / vue-module / index.html" }); domConstruct.place(iframe,"appContainer"); }); Among them, id:"vue3-container" means setting the ID of the iframe container to "vue3-container", style:"width:100%;height:600px" means setting the style of the iframe, with a width of 100% and a height of 600px, src:" / vue-module / index.html" means setting the src attribute of the iframe container to point to the entry file of the Vue3 submodule, and domConstruct.place(iframe,"appContainer") means inserting the created iframe container into the DOM with ID "appContainer".

[0045] In some embodiments, the container layer utilizes a hidden visible display control mechanism, and the hidden visible display control mechanism is used to hide the iframe container and retain the placeholder information of the iframe container.

[0046] In some embodiments, the hidden visible display and hiding control mechanism refers to the visibility hidden display and hiding control mechanism. Visibility hidden only hides the element (iframe container) but retains its placeholder information. The placeholder information refers to the placeholder space. The DOM tree and component instance corresponding to the hidden element will not be destroyed, so the responsive state of the Vue3 sub-module (such as form input value, scroll position) can be completely retained.

[0047] In some embodiments, to avoid re-rendering overhead, the sub-module is hidden through visibility hidden after being loaded for the first time. When it is displayed again, the existing instance can be reused directly to avoid repeated resource requests, and cooperate with lazy loading.

[0048] In some embodiments, the container layer utilizes a hidden visible display control mechanism, which is used to hide the inline frame container and retain the placeholder information of the inline frame container. This display control mechanism is suitable for situations where content needs to be loaded dynamically but the page layout jumps caused by content loading is avoided.

[0049] In some embodiments, the preset message protocol includes at least the following information: version number information of the message, event type information of the message, timestamp information of the message and payload information of the message, and the payload information of the message includes the source of the message, the destination module of the message and the data transmitted by the message.

[0050] In some embodiments, the format of the preset message protocol is as follows: Interface HybridMessage{ version: string; / / Protocol version number eventType:'DATA_UPDATE'|'STATE_SYNC'; timestamp:number; payload:{ source:'DOJO'|'VUE'; targetModuleID:string; data:Record<string,unknown> ; }; } Among them, HybridMessage is used to communicate between different application modules or frameworks, version: string is the protocol version number of string type, which is used to identify the version of the message protocol and ensure the communication compatibility between the main application and the submodule; eventType: 'DATA_UPDATE' | 'STATE_SYNC' refers to the event type, and the value can be 'DATA_UPDATE' or 'STATE_SYNC'. Specifically, 'DATA_UPDATE' represents a data update event, which is usually used to notify a module that the data has changed, while 'STATE_SYNC' represents a state synchronization event, which is used to synchronize state information between the main application and the submodule. timestamp: number refers to a digital timestamp, which is used to record the time when the message is generated. It is usually a Unix timestamp in milliseconds and is used to track the time sequence of messages or debug. The content in payload represents the payload of the message, source: 'DOJO' | 'VUE' indicates which framework the message is sent from, and the value can be 'DOJO' or 'VUE', such as 'DOJO' means the message comes from the Dojo main application, and 'VUE' means the message comes from the Vue3 submodule. targetModuleID:string represents the target module ID of string type, which is used to specify the target module ID of the message to ensure that the message is correctly routed to the target module. data:Record<string,unknown> Represents the data content of the key-value pair type, where the key is a string and the value can be of any type. It is used to store actual message data, such as the specific content of the status update or the data that needs to be synchronized.

[0051] In some embodiments, the preset communication mechanism includes a connection establishment phase and a data exchange phase. The connection establishment phase is used to establish a communication connection between the main application and the sub-module, and the data exchange phase is used to exchange data between the main application and the sub-module.

[0052] In some embodiments, Figure 2 As shown, Figure 2 A flow chart of communication between a main application and a sub-module provided for an embodiment of the present application is essentially a two-way communication mechanism, in which the main application can be a sender or a receiver, and correspondingly, the sub-module can be a sender or a receiver, and the present application does not limit this.

[0053] In some embodiments, taking the main application as the sender and the sub-module as the receiver as an example, the connection establishment phase includes initialization handshake and ready confirmation, that is, the main application sends a STATE_SYNC signal to the sub-module to trigger connection establishment, and the sub-module returns a STATE_SYNC_ACK response after receiving it, indicating that the STATE_SYNC signal sent by the main application has been received.

[0054] In some embodiments, taking the main application as the sender and the sub-module as the receiver as an example, after the connection establishment phase is completed, the main application sends DATA_UPDATE data to the sub-module, and the sub-module returns a DATA_ACK response after receiving it, indicating that the DATA_UPDATE data sent by the main application has been received, thereby realizing one data exchange. According to the above process, multiple data exchanges can be realized. If the DATA_ACK returned by the sub-module is not received within the time limit, retransmission is triggered to ensure the reliability of two-way communication and greatly reduce the packet loss rate.

[0055] In some embodiments, the preset communication mechanism further includes a serial number verification phase, which is used to verify whether the communication connection and data exchange between the main application and the sub-module are successful.

[0056] In some embodiments, the sequence number provides a unique identifier for each message. The recipient can determine whether the message has been processed by checking the sequence number, thereby avoiding duplicate processing. It can also effectively prevent malicious or erroneous message injection. Only messages with legitimate sequence numbers will be accepted.

[0057] In some embodiments, taking the main application as the sender and the sub-module as the receiver as an example, the connection establishment phase includes a serial number verification phase, wherein the main application sends a STATE_SYNC signal with a random serial number to the sub-module to trigger connection establishment, and the sub-module returns a STATE_SYNC_ACK response after receiving the signal, carrying a confirmation number of the main application serial number plus one and the random serial number of the sub-module, to complete two-way capability verification. Specifically, on the main application side, it is determined whether the confirmation number of the sub-module is the random serial number of the main application plus one. If so, the verification is successful. On the sub-module side, it is determined whether the random serial number of the sub-module plus one is the confirmation number of the main application. The confirmation number of the main application is the serial number carried in the message sent by the sub-module that the main application confirms receipt of.

[0058] In some embodiments, taking the main application as the sender and the sub-module as the receiver as an example, the data exchange stage includes a serial number verification stage, wherein, after the connection establishment stage is completed, the main application sends DATA_UPDATE data to the sub-module, and the sub-module returns a DATA_ACK response after receiving it, indicating that the DATA_UPDATE data sent by the main application has been received, thereby realizing one data exchange. According to the above process, multiple data exchanges can be realized, and each data transmission is identified by a serial number. The receiver returns an incremental confirmation number (cumulative confirmation). If the DATA_ACK returned by the sub-module is not received within a timeout, retransmission is triggered to ensure the reliability of two-way communication and greatly reduce the packet loss rate.

[0059] In some embodiments, by assigning a unique serial number to each message and using a serial number verification mechanism to verify whether the communication connection and data exchange between the main application and the sub-module are successful, problems such as message loss, duplication or forgery can be effectively prevented, and the security and reliability of communication between the main application and the sub-module can be significantly improved.

[0060] In some embodiments, the preset state synchronization mechanism includes an incremental state synchronization mechanism and a shared memory state synchronization mechanism.

[0061] In some embodiments, the incremental state synchronization mechanism is suitable for processing sensitive data or scenarios that require strict isolation due to its cross-domain communication capabilities and high security.

[0062] In some embodiments, the shared memory state synchronization mechanism is suitable for scenarios with strict performance requirements due to its high efficiency, which not only takes into account performance, but also ensures the flexibility and security of the system.

[0063] In some embodiments, the incremental state synchronization mechanism only sends the data portion that has changed since the last synchronization (i.e., incremental data), rather than sending the complete state data each time. Specifically, during each state synchronization, the system generates a current state snapshot and compares it with the previous state snapshot to find the differences. Only these differences will be sent to the other party; each state has a version number or timestamp, and the recipient can determine which states need to be updated based on this information. This method can significantly reduce the use of network bandwidth and improve synchronization efficiency.

[0064] In some embodiments, the shared memory state synchronization mechanism refers to allowing different modules to directly access the same state data through a shared memory space, thereby improving the access speed.

[0065] In some embodiments, postMessage is a simple and secure way of cross - page or cross - process communication. It allows messages to be sent and received between different windows, tabs, or iframes. The message receiver can verify the source of the message, providing good security.

[0066] In some embodiments, the incremental state synchronization mechanism includes a sending phase and a receiving phase. The sending phase is used to serialize the first data in the state management of the main application to obtain the second data, and send the second data to the sub - module. The receiving phase is used to deserialize the second data to obtain the third data, and update the third data to the state management of the sub - module. The first data is the data whose state has changed in the main application.

[0067] In some embodiments, the incremental state synchronization can be implemented through the following statements. The Dojo - side state listener corresponds to the sending phase in this application, and the Vue3 - side response handling corresponds to the receiving phase in this application: / / Dojo - side state listener aspect.after(store,"onChange",function(changes){ Const iframeWindow = document.getElementById("vue3 - container").contentWindow; iframeWindow.postMessage({ type:'DOJO_STATE_UPDATE', payload:serializeChanges(changes) },targetOrigin); }); / / Vue3 - side response handling window.addEventListener("message",(event) => { if(event.origin!==trustedOrigin)return; if(event.data.type === 'DOJO_STATE_UPDATE'){ store.commit('syncExternalState',deserialize(event.data.payload)); } }); Among them, store is the state of the application, "onChange" means being triggered, changes is the parameter representing the state, ID is the DOM element of vue3-container, type:'DOJO_STATE_UPDATE' is the state update notification from the Dojo main application, payload:serializeChanges(changes) is the serialization processing of the changed data, targetOrigin is the target source of the received message; it realizes the function of sending state updates from the Dojo main application to the Vue3 submodule, which serializes the changed data and sends it to the submodule through postMessage by listening to the state change event (onChange) of the main application.

[0068] In some embodiments, the Vue3 submodule listens to the message event from the Dojo main application, first checks whether the source of the message is trusted (event.origin!==trustedOrigin), if the source is not trusted, then ignore the message directly; if the source is trusted and the message type is 'DOJO_STATE_UPDATE', then call deserialize(event.data.payload) to deserialize the message payload into available data, and finally, submit a mutation named 'syncExternalState' through the store.commit method of Vue3 to synchronize the external state to the internal state of the Vue3 submodule. The Vue3 submodule receives and processes the state update from the Dojo main application, listens to the cross-window communication through the message event, and executes the corresponding logic according to the message type and source.

[0069] In some embodiments, serialization employs binary serialization.

[0070] In some embodiments, Concise Binary Object Representation (CBOR) is an efficient data encoding method, which aims to provide a compact and easy-to-parse format, similar to JavaScript Object Notation (JSON), but CBOR is more compact and can improve data transmission efficiency.

[0071] In some embodiments, the incremental state synchronization mechanism uses a difference comparison algorithm, and the difference comparison algorithm is used to obtain the first data according to the difference between the first state data and the second state data of the main application.

[0072] In some embodiments, the first state data refers to old state data, the second state data refers to new state data, and the state data refers to the data in the aforementioned key-value pair.

[0073] In some embodiments, the following statement may be used to obtain the first data: / / Difference comparison algorithm const diff=deepDiff(prevState,newState); if(diff.changes.length>0){ postMessage({type:"STATE_PATCH",payload:diff}); } Among them, prevState represents the old state data, newState represents the new data state, STATE_PATCH represents the state incremental update message, and diff represents the difference. If the length of the difference change is greater than zero (there are elements in the array), it means that there is a difference between the first state data and the second state data. If the length of the difference change is zero, it means that the first state data and the second state data are exactly the same, that is, there is a difference, and there is no corresponding incremental data.

[0074] In some embodiments, only the changed data fields are transmitted through a difference comparison algorithm, which can reduce the number of invalid synchronizations and reduce network load.

[0075] In some embodiments, shared memory communication is an efficient cross-page or process communication method that allows multiple processes to directly access the same memory area, enabling fast data reading, writing and sharing. This method is suitable for scenarios that require large amounts of data exchange and real-time updates, but it is relatively complex to implement and requires a synchronization mechanism to ensure data consistency.

[0076] In some embodiments, the shared memory state synchronization mechanism includes an atomic write phase and an atomic read phase. The atomic write phase is used to write a data state identifier to a location with index zero in the shared memory. The atomic read phase is used to read data with an index other than zero in the shared memory in response to the data state identifier corresponding to the index zero in the shared memory being one.

[0077] In some embodiments, efficient cross-context data sharing and synchronization may be achieved through atomic write phases and atomic read phases on shared memory.

[0078] In some embodiments, the following statements can be used to achieve data synchronization between the main application and the sub-modules: / / Write data on Dojo side const buffer=new SharedArrayBuffer(1024); const view=new Int32Array(buffer); Atomics.store(view,0,1); / / Update data flag / / Vue side reads data if (Atomics.load(view,0)===1){ processData(view.subarray(1)); } Among them, buffer is the newly created shared memory, the shared memory size is 1024 bytes, the shared memory view is converted so that the shared memory can be accessed in the form of a 32-bit integer, and the Atomics.store method is used to set the first position of the shared memory (index 0, data flag) to the value 1, indicating that the data is ready. The Atomics.load method is used to read the value from the first position of the shared memory (index 0). If the read value is 1, the processData function is called to process the remaining data in the shared memory starting from index 1.

[0079] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system.

[0080] Figure 3A schematic diagram of the structure of a cross-frame development system provided for an embodiment of the present application, the system includes a container layer, a communication layer and a state management layer, wherein the container layer includes display and hidden control and delayed loading, the communication layer includes a standardized communication protocol and two-way communication, and the state management layer includes incremental synchronization and shared memory synchronization. The system is designed specifically for the coexistence of Dojo and Vue3 in storage management software, effectively solving the key problem of hybrid development. After actual measurement in the field of storage operation and maintenance management software, the system significantly improves development efficiency. Lazy loading is adopted in the container layer, and asynchronous module definition (AMD) is adopted in the Dojo main application to load the iframe container on demand. By delaying the loading of non-critical resources, the initial loading time is reduced and the memory consumption is reduced, thereby improving the user experience. In terms of the container layer, the visibility hidden display and hidden control mechanism is adopted, the DOM tree and component instance will not be destroyed, which can significantly optimize performance and retain component status, avoid re-rendering overhead, and complete coordination with lazy loading. In terms of the communication layer, a standardized message protocol is formulated, and the structured message format HybridMessage is adopted, and the reliability of data transmission is ensured by means of a two-way communication mechanism. At the state management layer, the postMessage incremental synchronization method is provided, which is suitable for processing sensitive data or scenarios that require strict isolation. The CBOR binary serialization is used to improve transmission efficiency; the deepDiff difference comparison algorithm is used to transmit only changed data fields, reducing the number of invalid synchronizations and reducing network load. At the state management layer, the SharedArrayBuffer shared memory state synchronization method is provided, which is suitable for scenarios with strict performance requirements. At the state management layer, two state synchronization methods are provided in the hybrid framework, which not only takes into account performance, but also ensures the flexibility and security of the system.

[0081] The present disclosure provides a cross-framework development method, which can be applied to the fields of micro-front-end architecture implementation, cross-technology stack component reuse, etc.

[0082] Figure 4 A flowchart of a cross-framework development method provided in an embodiment of the present disclosure.

[0083] like Figure 4 As shown, the method comprises the following steps: Step 401, loading an iframe container in the main application, the iframe container is used to isolate the runtime environment of the submodule from the main application, the submodule is a module running in the iframe container; Step 402, the main application and the submodule communicate according to a preset message protocol and a preset communication mechanism; Step 403: synchronize the status of the main application and the submodules according to a preset status synchronization mechanism.

[0084] In some embodiments, in the present application, the main application takes an application of the Dojo framework as an example, and the sub-module takes a sub-module of the Vue3 framework as an example.

[0085] In some embodiments, the inline frame container is an iframe container, and each submodule runs in its own iframe container and has an independent JavaScript context.

[0086] In some embodiments, the runtime environment of a submodule refers to all resources and technology stacks that the submodule relies on during execution, including but not limited to JavaScript engines, frameworks or core libraries of frameworks, style sheets, layout mechanisms, and scripts.

[0087] In some embodiments, different frameworks may have different global variables or namespaces, which may conflict if not isolated. Therefore, isolating the runtime environment of the sub-module from the main application through an inline frame container allows different frameworks to run independently without interfering with each other.

[0088] In some embodiments, a preset message protocol and a preset communication mechanism can be used to enable the main application and the sub-modules to exchange data safely and efficiently, wherein the preset message protocol is used to define the format and rules followed when exchanging data between the main application and the sub-modules, ensuring that the main application and the sub-modules can correctly parse and process received messages, thereby achieving safe and efficient communication; the preset communication mechanism is used to define how the main application and the sub-modules perform actual data exchange operations, which may include message delivery methods, event monitoring and response to ensure that data can be delivered safely and efficiently.

[0089] In some embodiments, the preset state synchronization mechanism is used to determine the rules for state synchronization between the main application and the sub-modules, specifically including how to share, update and maintain consistent state data between the main application and the sub-modules.

[0090] In some embodiments, the states of the main application and the sub-modules are synchronized through a preset state synchronization mechanism, so that data consistency between the main application and the sub-modules can be ensured.

[0091] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system.

[0092] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method.

[0093] The embodiment of the present application also provides a cross-framework development device 500, Figure 5 A schematic diagram of a cross-framework development device provided by an embodiment of the present disclosure is shown in FIG. Figure 5 As shown, including: A loading unit 501 is used for a container layer to load an iframe container in a main application, where the iframe container is used to isolate a runtime environment of a submodule from the main application, and the submodule is a module running in the iframe container; The communication unit 502 is used to communicate between the main application and the submodule according to a preset message protocol and a preset communication mechanism; The state synchronization unit 503 is used to synchronize the states of the main application and the submodules according to a preset state synchronization mechanism.

[0094] Through the present application, the cross-frame development system includes a container layer, a communication layer and a state management layer; the container layer is used to load an inline frame container in the main application, the inline frame container is used to isolate the runtime environment of the sub-module from the main application, and the sub-module is a module running in the inline frame container; the communication layer is used to communicate between the main application and the sub-module according to a preset message protocol and a preset communication mechanism; the state management layer is used to synchronize the state of the main application and the sub-module according to a preset state synchronization mechanism, which solves the technical problems in related solutions that when cross-frame integration occurs, the asynchrony of the loading timing of different frameworks leads to frequent life cycle conflicts, the differences in the response mechanisms of different frameworks lead to difficulties in state synchronization, and the system development efficiency is low, thereby achieving the technical effect of improving the development efficiency of the cross-framework integration system.

[0095] For the description of the features in the embodiment corresponding to the cross-framework development device, please refer to the relevant description of the embodiment corresponding to the cross-framework development method, which will not be repeated here.

[0096] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in the above cross-framework development method embodiment.

[0097] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to execute the steps in the above cross-framework development method embodiment when running.

[0098] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.

[0099] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in the above cross-framework development method embodiment are implemented.

[0100] An embodiment of the present application also provides another computer program product, including a non-volatile computer-readable storage medium, the non-volatile computer-readable storage medium storing a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned cross-framework development method embodiment are implemented.

[0101] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0102] The above is a detailed introduction to a cross-framework development system, method, electronic device, storage medium and product provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the claims of the present application.

Claims

1. A cross-framework development system, characterized in that: include: Container layer, communication layer and state management layer; The container layer is used to load an iframe container in a main application, the iframe container is used to isolate a runtime environment of a submodule from the main application, and the submodule is a module running in the iframe container; The communication layer is used to communicate between the main application and the submodule according to a preset message protocol and a preset communication mechanism; The state management layer is used to synchronize the states of the main application and the sub-modules according to a preset state synchronization mechanism.

2. The cross-framework development system according to claim 1, characterized in that: The container layer adopts a lazy loading strategy, and the lazy loading strategy is used to load the inline frame container according to event driving, and the event driving at least includes form input driving or position scrolling driving.

3. The cross-framework development system according to claim 1, characterized in that: The container layer utilizes a hidden and visible display control mechanism, and the hidden and visible display control mechanism is used to hide the iframe container and retain the placeholder information of the iframe container.

4. The cross-framework development system according to claim 1, characterized in that: The preset message protocol includes at least the following information: version number information of the message, event type information of the message, timestamp information of the message and payload information of the message, wherein the payload information of the message includes the source of the message, the destination module of the message and the data transmitted by the message.

5. The cross-framework development system according to claim 1, characterized in that: The preset communication mechanism includes a connection establishment phase and a data exchange phase. The connection establishment phase is used to establish a communication connection between the main application and the sub-module, and the data exchange phase is used to exchange data between the main application and the sub-module.

6. The cross-framework development system according to claim 1, characterized in that: The preset communication mechanism also includes a serial number verification phase, and the serial number verification phase is used to verify whether the communication connection and data exchange between the main application and the submodule are successful.

7. The cross-framework development system according to claim 1, characterized in that: The preset state synchronization mechanism includes an incremental state synchronization mechanism and a shared memory state synchronization mechanism.

8. The cross-framework development system according to claim 7, characterized in that: The incremental state synchronization mechanism includes a sending phase and a receiving phase. The sending phase is used to serialize the first data in the state management of the main application to obtain the second data, and send the second data to the sub-module. The receiving phase is used to deserialize the second data to obtain the third data, and update the third data to the state management of the sub-module. The first data is the data whose state has changed in the main application.

9. The cross-framework development system according to claim 8, characterized in that: The serialization adopts binary serialization.

10. The cross-framework development system according to claim 9, characterized in that: The incremental state synchronization mechanism adopts a difference comparison algorithm, and the difference comparison algorithm is used to obtain the first data according to the difference between the first state data and the second state data of the main application.

11. The cross-framework development system according to claim 7, characterized in that: The shared memory state synchronization mechanism includes an atomic write phase and an atomic read phase. The atomic write phase is used to write a data state identifier into a location with an index of zero in the shared memory. The atomic read phase is used to respond to the data state identifier corresponding to the index of zero in the shared memory being one, and read the data with an index not zero in the shared memory.

12. A cross-framework development method, characterized in that: include: Loading an iframe container in a main application, the iframe container being used to isolate a runtime environment of a submodule from the main application, the submodule being a module running in the iframe container; Communicating between the main application and the submodule according to a preset message protocol and a preset communication mechanism; The states of the main application and the submodules are synchronized according to a preset state synchronization mechanism.

13. An electronic device, characterized in that: include: Memory for storing computer programs; A processor is used to implement the steps of the cross-framework development method as claimed in claim 12 when executing the computer program.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program, when executed by a processor, implements the steps of the cross-framework development method as claimed in claim 12.

15. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the cross-framework development method as claimed in claim 12 are implemented.

Images