State-keeping front-end code hot updating method and device

Abstract

The invention relates to a state-keeping front-end code hot updating method and device. Comprising the steps of monitoring an updating condition of a code file in a target application, and determining a function module corresponding to an updated part in the code file in the target application as a to-be-updated function module; according to the language and the framework of the code file, calling a corresponding compiling tool to compile the updated first code of the to-be-updated function module to obtain a compiled second code; the second code is sent to the client side, the client side determines a to-be-updated function module corresponding to the second code, the current state of the to-be-updated function module is stored, the second code is injected into the to-be-updated function module of the target application, and the stored current state is applied to the second code of the to-be-updated function module. Therefore, a user can automatically load the updated code into the running application without manually refreshing the page, and the current running state of the application can be kept, so that the use experience of the user is improved.

Description

Technical Field

[0001] The embodiments of the present specification relate to the field of computer technology, and more particularly to a method and device for hot updating of front-end codes while maintaining a state. Background Art

[0002] In the process of front-end development, developers often need to frequently modify the code and view the modified effects. The traditional development method requires developers to manually refresh the page or reload the entire application after each code modification to view the modified effects. This method is not only inefficient, but also fails to maintain the runtime state, increasing the complexity and time cost of development. Especially in large projects, frequent page refreshes and reloads will greatly affect development efficiency and developer work experience. Summary of the invention

[0003] To solve the problems existing in the prior art, the embodiments of this specification provide a state-maintaining front-end code hot update method and device, which realizes hot loading and hot update of front-end code without the user refreshing the front-end page or restarting the front-end application, and can maintain the state before the hot update.

[0004] The specific technical solutions of the embodiments of this specification are as follows:

[0005] On the one hand, an embodiment of the present specification provides a state-preserving front-end code hot update method, the method comprising:

[0006] Monitor the update of the code file in the target application, and if an update occurs, determine the function module corresponding to the updated part of the code file in the target application as the function module to be updated;

[0007] Calling a corresponding compilation tool according to the language and framework of the code file to compile the updated first code of the to-be-updated functional module to obtain the compiled second code of the to-be-updated functional module;

[0008] The second code is sent to the client, so that after the client receives the second code, it determines the functional module to be updated corresponding to the second code, saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated.

[0009] Furthermore, after the client receives the second code, determining the to-be-updated functional module corresponding to the second code further includes:

[0010] The client verifies the integrity and compatibility of the second code;

[0011] If the integrity and compatibility verification of the second code are passed, the client compares the version information of the second code with the version information of each local functional module in the target application, determines the version information of each local functional module that corresponds to the version information of the second code, and uses the local functional module corresponding to the determined version information as the functional module to be updated.

[0012] Furthermore, saving the current state of the to-be-updated functional module further comprises:

[0013] Capturing the current state of the functional module to be updated, wherein the current state at least includes variable values ​​and object states;

[0014] The current state is saved in a specified storage space using serialization technology.

[0015] Furthermore, after the client receives the second code, the method further includes:

[0016] The client determines whether the current running environment of the target application satisfies the dependency relationship of the second code;

[0017] If not, the client determines and loads the operating resources in the current operating environment of the target application that do not satisfy the dependency relationship.

[0018] Furthermore, after the client receives the second code, the method further includes:

[0019] The client loads the second code into the memory by using a dynamic import technology;

[0020] Injecting the second code into the to-be-updated functional module of the target application further comprises:

[0021] When the user's operation instruction on the target application meets the predetermined instruction requirement, suspending the operation of the to-be-updated functional module;

[0022] By using a dynamic code injection technology, the original code of the functional module to be updated is replaced with the second code;

[0023] Reinitialize the to-be-updated functional module replaced with the second code.

[0024] Furthermore, after replacing the original code of the to-be-updated functional module with the second code, the method further includes:

[0025] The client clears the original code from the memory.

[0026] Furthermore, after injecting the second code into the to-be-updated functional module of the target application, the method further includes:

[0027] The client clears the original cache data of the functional module to be updated, and reinitializes the cache system of the functional module to be updated.

[0028] Furthermore, after applying the saved current state to the second code of the functional module to be updated, the method further includes:

[0029] The client executes the specified test case of the functional module to be updated to check the functional module to be updated.

[0030] Furthermore, if the check result of the to-be-updated functional module is failure, the method further includes:

[0031] The client rolls back the state of the to-be-updated functional module to the state before the second code is injected.

[0032] On the other hand, the embodiment of this specification also provides a state-maintaining front-end code hot update device, the device comprising:

[0033] A code file update monitoring unit, used to monitor the update of the code file in the target application, and if an update occurs, determine the function module corresponding to the updated part of the code file in the target application as the function module to be updated;

[0034] A compiling unit, configured to compile the updated first code of the to-be-updated functional module by calling a corresponding compiling tool according to the language and framework of the code file, so as to obtain the compiled second code of the to-be-updated functional module;

[0035] A sending unit is used to send the second code to the client, so that after the client receives the second code, it determines the functional module to be updated corresponding to the second code, saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated.

[0036] On the other hand, an embodiment of the present specification further provides a computer device, including a memory, a processor, and a computer program stored in the memory, and the processor implements the above method when executing the computer program.

[0037] On the other hand, an embodiment of the present specification further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program implements the above method when executed by a processor.

[0038] Finally, the embodiments of this specification also provide a computer program product, wherein the computer program product includes a computer program, and the computer program implements the above method when executed by a processor.

[0039] By using the embodiments of this specification, when the code file of the application is updated, only the updated functional module is determined, and the updated first code of the functional module to be updated is compiled, and the entire code file of the application does not need to be compiled, thereby improving the compilation speed and reducing the processing capacity of the computer. Then the compiled second code of the functional module to be updated is sent to the client, and the client first determines the functional module to be updated corresponding to the second code, and then saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated, so that when the code of the functional module is updated, the user can automatically load the updated new code into the running application without manually refreshing the page, and can also maintain the current running state of the application, and the user does not need to re-enter information or locate the page position, thereby improving the user experience.

[0040] And for developers, it avoids the frequent manual page refresh operations in traditional development, significantly improves development efficiency, and supports the compilation and development of various front-end projects without being restricted by programming languages. It can even be applied to traditional back-end development such as C language, and realizes hot loading and hot updating of code. Developers can modify the code while keeping the application running without restarting the application or disconnecting, ensuring the continuity and efficiency of development. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of this specification or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the embodiments of this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0042] Figure 1 It is a schematic diagram of a flow chart of a method for hot updating of front-end code with state preservation in an embodiment of this specification;

[0043] Figure 2 The figure is a schematic diagram of a process of determining the to-be-updated functional module corresponding to the second code after the client receives the second code in an embodiment of this specification;

[0044] Figure 3 The figure is a schematic diagram of a process of saving the current state of the functional module to be updated in the embodiment of this specification;

[0045] Figure 4 The figure is a schematic diagram of a process of performing dependency analysis on a second code by a client in an embodiment of this specification;

[0046] Figure 5 The figure is a flow chart of injecting the second code into the to-be-updated functional module of the target application in the embodiment of this specification;

[0047] Figure 6 It is a schematic diagram of the structure of a state-maintaining front-end code hot update device in an embodiment of this specification;

[0048] Figure 7 The figure is a schematic diagram of the structure of a computer device in an embodiment of the present specification.

[0049]

Description of the accompanying drawings

[0050] 601, code file update monitoring unit;

[0051] 602. Compilation unit;

[0052] 603, sending unit;

[0053] 702. Computer equipment;

[0054] 704. Processing equipment;

[0055] 706. Storage resources;

[0056] 708. Drive system;

[0057] 710, input / output module;

[0058] 712. Input devices;

[0059] 714. Output devices;

[0060] 716. Presentation equipment;

[0061] 718. Graphical user interface;

[0062] 720, network interface;

[0063] 722. Communication link;

[0064] 724. Communication bus. DETAILED DESCRIPTION

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

[0066] It should be noted that the terms "first", "second", etc. in the description and claims of the embodiments of this specification and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the embodiments of this specification described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, device, product or equipment that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or equipment.

[0067] It should be noted that the acquisition, storage, use, and processing of data in the technical solutions of the embodiments of this specification comply with the relevant provisions of national laws and regulations.

[0068] It should be noted that in the embodiments of this specification, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of this application, but it does not mean that the applicant has or will necessarily use the solution.

[0069] In view of the problems existing in the prior art, the embodiments of this specification provide a method for hot updating of front-end code with state preservation. Figure 1 The flowchart of the method for hot updating the front-end code in the embodiment of this specification is shown. The process of hot updating the front-end code of the client is described in this figure. The order of steps listed in the embodiment is only one way of executing the order of many steps, and does not represent the only execution order. When the system or device product is executed in practice, it can be executed in the order of the method shown in the embodiment or the accompanying drawings or in parallel.

[0070] Specific as Figure 1 As shown, the method may include:

[0071] Step 101: monitoring the update of the code file in the target application, and if an update occurs, determining the function module corresponding to the updated part of the code file in the target application as the function module to be updated;

[0072] Step 102: calling a corresponding compilation tool according to the language and framework of the code file to compile the updated first code of the to-be-updated functional module to obtain the compiled second code of the to-be-updated functional module;

[0073] Step 103: Send the second code to the client, so that after receiving the second code, the client can determine the functional module to be updated corresponding to the second code, save the current state of the functional module to be updated, inject the second code into the functional module to be updated of the target application, and apply the saved current state to the second code of the functional module to be updated.

[0074] By using the embodiments of this specification, when the code file of the application is updated, only the updated functional module is determined, and the updated first code of the functional module to be updated is compiled, and the entire code file of the application does not need to be compiled, thereby improving the compilation speed and reducing the processing capacity of the computer. Then the compiled second code of the functional module to be updated is sent to the client, and the client first determines the functional module to be updated corresponding to the second code, and then saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated, so that when the code of the functional module is updated, the user can automatically load the updated new code into the running application without manually refreshing the page, and can also maintain the current running state of the application, and the user does not need to re-enter information or locate the page position, thereby improving the user experience.

[0075] And for developers, it avoids the frequent manual page refresh operations in traditional development, significantly improves development efficiency, and supports the compilation and development of various front-end projects without being restricted by programming languages. It can even be applied to traditional back-end development such as C language, and realizes hot loading and hot updating of code. Developers can modify the code while keeping the application running without restarting the application or disconnecting, ensuring the continuity and efficiency of development.

[0076] In the embodiments of the present specification, an event notification mechanism of the file system or other monitoring tools are used to monitor the update of the code files in the target application, and if an update occurs, the updated code portion is determined.

[0077] The embodiments of this specification divide the application into independent functional modules in advance and record the correspondence between the code and the functional modules. Each functional module has a unique identifier and version number. A module registry is implemented in the application to record the current version and dependencies of each functional module. The dependencies represent the necessary resources required for the operation of the functional module, such as libraries.

[0078] After determining the updated code part, determine the function module corresponding to the updated part as the function module to be updated. Then obtain the current version and dependency of the function module to be updated in the module registry to facilitate subsequent client injection.

[0079] Then, only the updated first code of the function module to be updated (that is, the code of the function module to be updated in the updated code file) is compiled.

[0080] Before compiling, first determine the language of the code file and the compilation tool corresponding to the framework. For example, for JavaScript, Babel or SWC can be used for translation; for TypeScript, the TypeScript compiler or SWC is used; for Python, Transcrypt can be used to translate Python code into JavaScript; for C / C++, Emscripten can be used to compile into WebAssembly. This flexible design enables the present invention to adapt to various front-end development scenarios and provides scalability for supporting more languages ​​in the future.

[0081] After the compilation tool is determined, the first code of the function module to be updated is compiled to obtain the compiled second code, that is, the new version code of the function module to be updated is obtained.

[0082] The second code is an update package of the function module to be updated, which includes the compiled module code of the new version, version information and dependency description. The version information may include a unique identifier for each function module and the version number of the compiled new code, so that the client can extract the unique identifier of the corresponding function module in the second code and determine the function module corresponding to the unique identifier in the target application it is running as the function module to be updated.

[0083] The second code is then sent to the client.

[0084] According to one embodiment of this specification, Figure 2 As shown, after the client receives the second code, determining the to-be-updated functional module corresponding to the second code further includes:

[0085] Step 201: The client verifies the integrity and compatibility of the second code;

[0086] Step 202: If the integrity and compatibility verifications of the second code are passed, the client compares the version information of the second code with the version information of each local functional module in the target application, determines the version information of each local functional module that corresponds to the version information of the second code, and uses the local functional module corresponding to the determined version information as the functional module to be updated.

[0087] In the embodiment of the present specification, static code analysis is performed before the second code is injected. For example, ESLint is used to check the JavaScript code to ensure that there are no syntax errors or potential runtime errors.

[0088] Then run the unit test on the second code. If the result of the unit test fails, stop updating. For example, the new function is tested using the Jest framework. The pseudo code of the unit test is as follows:

[0089] javascript

[0090] test('The new calculation function works correctly',()=>{

[0091] expect(newCalculateTotal([10,20,30])).toBe(60);

[0092] });

[0093] Then, perform integration testing on the second code to verify whether the integration of the second code with the client's current operating environment meets the requirements. Example: Test whether the new user authentication module interacts with the database correctly:

[0094] javascript

[0095] test('User login process', async()=>{

[0096] const user=await loginUser('testuser','password123');

[0097] expect(user).toBeDefined();

[0098] expect(user.isAuthenticated).toBe(true);

[0099] });

[0100] After the functionality and integrity of the second code are verified, the client can load the second code into the memory through the dynamic import technology without activating it immediately.

[0101] Then a series of pre-injection preparations are carried out.

[0102] First, save the current state of the function module to be updated. Specifically, Figure 3 As shown, saving the current state of the to-be-updated functional module further includes:

[0103] Step 301: Capture the current state of the function module to be updated, where the current state at least includes variable values ​​and object states;

[0104] Step 302: Use serialization technology to save the current state into a specified storage space.

[0105] In the embodiment of this specification, before injecting the second code, a complete snapshot of the current state of the function module to be updated is created, and the complex object structure and closure environment are captured using deep copy technology. An isolated execution environment is created for running the second code, thereby ensuring that the execution of the second code does not directly affect the saved existing state.

[0106] In the embodiments of this specification, the current state may be saved in memory or temporary storage.

[0107] Then, the state structure differences between the original code of the functional module to be updated and the new second code are analyzed, a state transition mapping is created, and a migration strategy for migrating the current state to the new structure is defined.

[0108] Then the dependency analysis of the second code is performed, specifically, Figure 4 As shown, after the client receives the second code, the method further includes:

[0109] Step 401: The client determines whether the current running environment of the target application satisfies the dependency relationship of the second code;

[0110] Step 402: If not, the client determines and loads the operating resources in the current operating environment of the target application that do not satisfy the dependency relationship.

[0111] In an embodiment of the present specification, the dependencies in the second code are extracted, and then the resource situation in the current running environment of the target application, such as modules and libraries, is obtained, and then it is determined whether the resource situation in the current running environment includes the resource situation included in the dependencies of the second code. If so, it means that the resources on which the second code depends have been loaded, otherwise, the missing resources are loaded.

[0112] Then check whether the second code conflicts or is incompatible with the original code.

[0113] The second code is then syntax checked and security verified to ensure that no potential errors or security vulnerabilities are introduced, such as using static analysis tools to check code quality and potential problems.

[0114] When all the above verifications are passed, the second code is injected. Specifically, Figure 5 As shown, injecting the second code into the to-be-updated functional module of the target application further includes:

[0115] Step 501: When the user's operation instruction on the target application meets the predetermined instruction requirement, suspend the operation of the function module to be updated;

[0116] Step 502: replacing the original code of the to-be-updated functional module with the second code by means of dynamic code injection technology;

[0117] Step 503: Reinitialize the to-be-updated functional module replaced with the second code.

[0118] In the embodiment of the present specification, the user's operation instruction for the target application is first captured, and then it is determined whether the operation instruction meets the predetermined instruction requirements, such as the natural pause point of the user operation. If so, the operation of the function module to be updated is paused. Then, the original code of the function module to be updated is replaced with the second code through dynamic code injection technology (such as dynamic link library (DLL)). Then, the function module to be updated replaced with the second code is reinitialized, such as loading the resources on which the second code depends.

[0119] Then the state is restored. Specifically, the state is reconstructed first, and the stored current state is applied to the second code of the function module to be updated according to the defined migration strategy. For example, the serialized state is rebuilt in the new code environment, the state mapping is applied, the state in the snapshot is reconstructed into the new code structure, and data type changes, new fields, etc. are handled.

[0120] Then update all references to the replaced code to ensure that all related calls point to the new implementation. Special attention is paid to the state involving closures to ensure that the new code can correctly access the original lexical scope.

[0121] Then perform a state consistency check to verify whether the application state remains consistent before and after the code update.

[0122] Exemplarily, compare the key status values ​​before and after the update:

[0123] javascript

[0124] const beforeState=JSON.stringify(app.getCurrentState());

[0125] performCodeUpdate();

[0126] const afterState=JSON.stringify(app.getCurrentState());

[0127] console.assert(beforeState===afterState, "State inconsistencydetected");

[0128] Then rebind the event listeners that may be affected, making sure all event processing logic points to the new code implementation.

[0129] Then a consistency check is performed. Specifically, the client executes the specified test cases of the functional modules to be updated, checks the functional modules to be updated, ensures that the application still runs normally after the code is updated, and verifies the correctness of key functions and business logic.

[0130] As an example, let's use Selenium to automate testing of a new UI element:

[0131] Python

[0132] deftest_new_button_functionality():

[0133] driver.find_element_by_id("new-feature-button").click()

[0134] assert driver.find_element_by_id("result-display").text=="NewFeature Activated"

[0135] You can also perform performance testing on the updated functional modules to check whether the new code affects system performance. For example, use Apache JMeter to test the response time of the new API endpoint:

[0136] Test Plan:

[0137] Thread Group:100users

[0138] Ramp-up period: 10 seconds

[0139] Loop Count:10

[0140] Assertion:Response time<200ms.

[0141] You can also simulate user interactions to ensure that new features respond properly. For example, use Cypress for end-to-end testing:

[0142] javascript

[0143] describe('New Feature Test',()=>{

[0144] it('responds correctly to user input',()=>{

[0145] cy.visit(' / newfeature');

[0146] cy.get('#user-input').type('test data');

[0147] cy.get('#submit-button').click();

[0148] cy.get('#result').should('contain','Processed:test data');

[0149] });

[0150] });

[0151] Regression testing can also be performed to ensure that the new code has not broken existing functionality.

[0152] By way of example, run the automated test suite, covering all major functionality:

[0153] shell

[0154] npmrun test:regression

[0155] The second code can also be tested in a simulated production environment (created sandbox). For example, a Docker container is used to simulate the production environment and run the test:

[0156] Dockerfile

[0157] FROM production-image:latest

[0158] COPY new-code.js / app /

[0159] RUN npm run test:production

[0160] In addition, the entire injection and update process of the second code can also be recorded in detail (for example, through logs), including updated content, updated modules, version changes, execution results, timestamps, and possible affected scopes, to facilitate subsequent tracing.

[0161] As an example, use Sentry to capture and analyze runtime errors in new code:

[0162] javascript

[0163] Sentry.init({dsn:"https: / / examplePublicKey@o0.ingest.sentry.io / 0"});

[0164] try{

[0165] newlyLoadedFunction();

[0166] }catch(e){

[0167] Sentry.captureException(e);

[0168] }

[0169] Finally, the hot update is completed and a notification is sent to the developer or system administrator that the update is complete. A summary of the update and items that may require attention are provided.

[0170] Furthermore, after replacing the original code of the to-be-updated functional module with the second code, the method further comprises: the client clearing the original code from the memory, and cleaning up objects no longer in use to release memory space.

[0171] After the second code is injected into the to-be-updated functional module of the target application, the method further includes:

[0172] The client clears the original cache data of the functional module to be updated, and reinitializes the cache system of the functional module to be updated.

[0173] It should be noted that after the client injects the second code, the original code and the original cache data are cleared only when no error occurs. If an error occurs, a rollback is performed.

[0174] Specifically, according to an embodiment of the present specification, if the check result of the to-be-updated functional module is not passed, the method further includes:

[0175] The client rolls back the state of the to-be-updated functional module to the state before the second code is injected.

[0176] By executing these processing steps, we can ensure the safe and stable injection of new code and maintain the overall consistency and reliability of the application. This comprehensive processing mechanism is the key to reliable hot updates, which can significantly improve the robustness of the system and development efficiency. In addition, it is possible to ensure the normal operation of the entire application while only updating the changed part of the code. This approach not only improves the update efficiency, but also minimizes the impact on the user experience.

[0177] Based on the same inventive concept, the embodiment of this specification also provides a state-maintaining front-end code hot update device. Figure 6 As shown, the device comprises:

[0178] A code file update monitoring unit 601 is used to monitor the update of the code file in the target application, and if an update occurs, determine the function module corresponding to the updated part of the code file in the target application as the function module to be updated;

[0179] A compiling unit 602, configured to compile the updated first code of the to-be-updated functional module by calling a corresponding compiling tool according to the language and framework of the code file, to obtain a compiled second code of the to-be-updated functional module;

[0180] The sending unit 603 is used to send the second code to the client, so that after the client receives the second code, it can determine the functional module to be updated corresponding to the second code, save the current state of the functional module to be updated, inject the second code into the functional module to be updated of the target application, and apply the saved current state to the second code of the functional module to be updated.

[0181] Furthermore, after the client receives the second code, determining the to-be-updated functional module corresponding to the second code further includes:

[0182] The client verifies the integrity and compatibility of the second code;

[0183] If the integrity and compatibility verification of the second code are passed, the client compares the version information of the second code with the version information of each local functional module in the target application, determines the version information of each local functional module that corresponds to the version information of the second code, and uses the local functional module corresponding to the determined version information as the functional module to be updated.

[0184] Furthermore, saving the current state of the to-be-updated functional module further comprises:

[0185] Capturing the current state of the functional module to be updated, wherein the current state at least includes variable values ​​and object states;

[0186] The current state is saved in a specified storage space using serialization technology.

[0187] Furthermore, after the client receives the second code, the client is further configured to:

[0188] Determining whether the dependency relationship of the second code is satisfied in the current running environment of the target application;

[0189] If not, it is determined that the operating resources in the current operating environment of the target application do not satisfy the dependency relationship and are loaded.

[0190] Furthermore, after the client receives the second code, the client is further configured to:

[0191] Loading the second code into the memory by using a dynamic import technology;

[0192] Injecting the second code into the to-be-updated functional module of the target application further comprises:

[0193] When the user's operation instruction on the target application meets the predetermined instruction requirement, suspending the operation of the to-be-updated functional module;

[0194] By using a dynamic code injection technology, the original code of the functional module to be updated is replaced with the second code;

[0195] Reinitialize the to-be-updated functional module replaced with the second code.

[0196] Furthermore, after replacing the original code of the to-be-updated functional module with the second code, the client is further used to clear the original code from the memory.

[0197] Furthermore, after the second code is injected into the to-be-updated functional module of the target application, the client is further used to clear the original cache data of the to-be-updated functional module and reinitialize the cache system of the to-be-updated functional module.

[0198] Furthermore, after applying the saved current state to the second code of the functional module to be updated, the client is further used to execute a specified test case of the functional module to be updated to check the functional module to be updated.

[0199] Furthermore, if the check result of the to-be-updated functional module is failure, the client is further used to roll back the state of the to-be-updated functional module to the state before the second code is injected.

[0200] Since the principle of solving the problem by the above device is similar to that of the above method, the implementation of the above system can refer to the implementation of the above method, and the repeated parts will not be repeated.

[0201] like Figure 7 The structure diagram of the computer device of the embodiment of this specification is shown, and the computer device in this embodiment can execute the method of the embodiment of this specification described above. The computer device 702 may include one or more processing devices 704, such as one or more central processing units (CPUs), and each processing unit may implement one or more hardware threads. The computer device 702 may also include any storage resource 706, which is used to store any kind of information such as code, settings, data, etc. Non-limiting, for example, the storage resource 706 may include any one or more combinations of the following: any type of RAM, any type of ROM, flash memory device, hard disk, optical disk, etc. More generally, any storage resource can use any technology to store information. Further, any storage resource can provide volatile or non-volatile retention of information. Further, any storage resource can represent a fixed or removable component of the computer device 702. In one case, when the processing device 704 executes an associated instruction stored in any storage resource or a combination of storage resources, the computer device 702 can perform any operation of the associated instruction. The computer device 702 also includes one or more drive systems 708 for interacting with any storage resources, such as a hard disk drive system, an optical disk drive system, and the like.

[0202] The computer device 702 may also include an input / output module 710 (I / O) for receiving various inputs (via input devices 712) and for providing various outputs (via output devices 714). A specific output mechanism may include a presentation device 716 and an associated graphical user interface (GUI) 718. In other embodiments, the input / output module 710 (I / O), the input device 712, and the output device 714 may not be included, and the computer device 702 may be used as a computer device in a network. The computer device 702 may also include one or more network interfaces 720 for exchanging data with other devices via one or more communication links 722. One or more communication buses 724 couple the components described above together.

[0203] The communication link 722 may be implemented in any manner, for example, through a local area network, a wide area network (e.g., the Internet), a point-to-point connection, etc., or any combination thereof. The communication link 722 may include any combination of hardwired links, wireless links, routers, gateway functions, name servers, etc. governed by any protocol or combination of protocols.

[0204] The embodiments of the present specification also provide a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program implements the above method when executed by a processor.

[0205] The embodiments of the present specification also provide a computer-readable instruction, wherein when a processor executes the instruction, the program therein causes the processor to execute the above method.

[0206] It should be understood that in the various embodiments of the present specification, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present specification.

[0207] It should also be understood that in the embodiments of this specification, the term "and / or" is only a description of the association relationship of the associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in the embodiments of this specification generally indicates that the associated objects before and after are in an "or" relationship.

[0208] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the embodiments of this specification can be implemented with 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 terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the embodiments of this specification.

[0209] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0210] In the several embodiments provided in the embodiments of this specification, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, or it can be an electrical, mechanical or other form of connection.

[0211] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiments of this specification.

[0212] In addition, each functional unit in each embodiment of the present specification can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of software functional units.

[0213] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of this specification is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the embodiment of this specification. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program code.

[0214] The embodiments of this specification use specific embodiments to illustrate the principles and implementation methods of the embodiments of this specification. The description of the above embodiments is only used to help understand the methods and core ideas of the embodiments of this specification. At the same time, for those skilled in the art, according to the ideas of the embodiments of this specification, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the embodiments of this specification.

Claims

1. A state-preserving front-end code hot update method, characterized in that: The method comprises: Monitor the update of the code file in the target application, and if an update occurs, determine the function module corresponding to the updated part of the code file in the target application as the function module to be updated; Calling a corresponding compilation tool according to the language and framework of the code file to compile the updated first code of the to-be-updated functional module to obtain the compiled second code of the to-be-updated functional module; The second code is sent to the client, so that after the client receives the second code, it determines the functional module to be updated corresponding to the second code, saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated.

2. The method according to claim 1, characterized in that After the client receives the second code, determining the to-be-updated functional module corresponding to the second code further includes: The client verifies the integrity and compatibility of the second code; If the integrity and compatibility verification of the second code are passed, the client compares the version information of the second code with the version information of each local functional module in the target application, determines the version information of each local functional module that corresponds to the version information of the second code, and uses the local functional module corresponding to the determined version information as the functional module to be updated.

3. The method according to claim 1, characterized in that Saving the current state of the to-be-updated functional module further includes: Capturing the current state of the functional module to be updated, wherein the current state at least includes variable values ​​and object states; The current state is saved in a specified storage space using serialization technology.

4. The method according to claim 1, characterized in that After the client receives the second code, the method further includes: The client determines whether the dependency relationship of the second code is satisfied in the current running environment of the target application; If not, the client determines and loads the operating resources in the current operating environment of the target application that do not satisfy the dependency relationship.

5. The method according to claim 1, characterized in that After the client receives the second code, the method further includes: The client loads the second code into the memory by using a dynamic import technology; Injecting the second code into the to-be-updated functional module of the target application further comprises: When the user's operation instruction on the target application meets the predetermined instruction requirement, suspending the operation of the to-be-updated functional module; By using a dynamic code injection technology, the original code of the functional module to be updated is replaced with the second code; Reinitialize the to-be-updated functional module replaced with the second code.

6. The method according to claim 5, characterized in that After replacing the original code of the to-be-updated functional module with the second code, the method further includes: The client clears the original code from the memory.

7. The method according to claim 1, characterized in that After the second code is injected into the to-be-updated functional module of the target application, the method further includes: The client clears the original cache data of the functional module to be updated, and reinitializes the cache system of the functional module to be updated.

8. The method according to claim 1, characterized in that After applying the saved current state to the second code of the functional module to be updated, the method further includes: The client executes the specified test case of the functional module to be updated to check the functional module to be updated.

9. The method according to claim 8, characterized in that If the check result of the to-be-updated functional module is failure, the method further includes: The client rolls back the state of the to-be-updated functional module to the state before the second code is injected.

10. A state-maintaining front-end code hot update device, characterized in that: The device comprises: A code file update monitoring unit, used to monitor the update of the code file in the target application, and if an update occurs, determine the function module corresponding to the updated part of the code file in the target application as the function module to be updated; A compiling unit, configured to compile the updated first code of the to-be-updated functional module by calling a corresponding compiling tool according to the language and framework of the code file, so as to obtain the compiled second code of the to-be-updated functional module; A sending unit is used to send the second code to the client, so that after the client receives the second code, it determines the functional module to be updated corresponding to the second code, saves the current state of the functional module to be updated, injects the second code into the functional module to be updated of the target application, and applies the saved current state to the second code of the functional module to be updated.

11. A computer device comprising a memory, a processor, and a computer program stored in the memory, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 9 is implemented.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

13. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

Images