Development method and development framework for Web application program

Abstract

The embodiment of the invention discloses a development method and a development framework for a Web application program. A specific embodiment of the method comprises the following steps: acquiring a first JavaScript source code; the first JavaScript source code is compiled into a first WASM byte code; and generating a Web application program based on the first WASM byte code. Therefore, the invention provides a novel development method and a development framework for the Web application program.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular, to a development method and a development framework for Web applications. Background Art

[0002] With the continuous development of Internet application requirements and the continuous iteration of application forms, Web applications and related derivative technologies have gradually evolved from the initial hypertext location to the current technology form of dynamic applications. This technology form of Web applications is currently not only limited to the programs loaded in Web browsers running on desktop computers (PCs) and mobile terminal devices (mainly mobile phones), but also the browser-related technologies relied on by Web applications are applied to some dynamically loaded pages in many client applications, such as applets or H5 pages.

[0003] Although in the initial technical design positioning, Web technology usually serves small-scale programs, due to the booming development of the Internet industry and the improvement of system complexity, Web applications face various running performance problems like other client / server software systems. Summary of the Invention

[0004] This part of the disclosure is provided to introduce concepts in a concise form, which will be described in detail in the subsequent Detailed Description section. This part of the disclosure is not intended to identify the key features or essential features of the claimed technical solution, nor is it intended to limit the scope of the claimed technical solution.

[0005] In a first aspect, an embodiment of the present disclosure provides a development method for a Web application, the method comprising: obtaining a first JavaScript source code, wherein the first JavaScript source code completes the compilation process through static compilation; compiling the first JavaScript source code into a first WASM bytecode; and generating a Web application based on the first WASM bytecode.

[0006] In some embodiments, the method further comprises: performing an inspection step on an initial JavaScript source code based on a preset syntax whitelist, wherein the inspection step is used to determine whether the initial JavaScript source code can complete the compilation process through static compilation; and using the initial JavaScript source code that passes the inspection as the first JavaScript source code.

[0007] In some embodiments, the method further includes: during the execution of the inspection step, if the inspection of the point to be inspected in the initial JavaScript source code fails, the inspection step is aborted and an error message is displayed; the inspection step is based on a fast-fail mechanism; modifying the JavaScript source code according to the first editing information input by the first user, and continuing to execute the inspection step based on the modified JavaScript source code.

[0008] In some embodiments, the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declarations, function calls; object property access; referencing custom objects; referencing custom arrays; Script execution mode.

[0009] In some embodiments, the syntax whitelist includes one or more of the following: variable identifier whitelist, assignment expressions, binary expressions, for loop statements, if conditional statements, block-level scope variable declarations in const manner, block-level scope variable declarations in let manner.

[0010] In some embodiments, the syntax whitelist includes routines that can be called as code units; the initial JavaScript source code includes target routines, and the target routines include routine names, formal parameters, logical bodies, and return values; where the formal parameters indicate the input variables of the routine; the logical body is used to describe the calculation logic during the execution of the routine.

[0011] In some embodiments, performing the inspection step on the initial JavaScript source code based on a preset syntax whitelist includes: performing the inspection step on the input variables and logical body of the target routine according to the syntax whitelist.

[0012] In some embodiments, the first JavaScript source code includes data structure description information; where the data structure description information is used to describe one or more of the following for a data set: fields, types, nested relationships, semantic tags, and range transformation information.

[0013] In some embodiments, the method further includes one or more of the following: performing a storage layout optimization step on the data set according to the data structure description information, and generating storage layout information, where the storage layout information is used to characterize the layout structure of the data set in the storage medium, and the storage layout optimization step includes one or more of the following: field rearrangement, memory alignment, cache optimization; converting the data set to a target format according to the data structure description information and target format information; reading the data set according to the data structure description information during the execution of the first WASM bytecode.

[0014] In some embodiments, the step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: generating an abstract syntax tree according to the initial JavaScript source code, where the abstract syntax tree includes a plurality of nodes; performing a syntax check step on the plurality of nodes according to the preset syntax whitelist, and performing a semantic check step on the nodes according to a preset check rule corresponding to the node type; in response to the syntax check step failing or the semantic check step failing, determining that the check step indicates failure; in response to both the syntax check step and the semantic check step passing, determining that the check step indicates passing.

[0015] In some embodiments, the syntax check step includes: if the type of the node is not in the syntax whitelist, determining that the syntax check fails.

[0016] In some embodiments, the semantic check step includes: performing a variable identifier check step on the variable identifiers of the first JavaScript source code; where the variable identifier check step includes: performing variable name resolution on the target variable identifier, and determining whether the target variable identifier points to a determined value in the scope according to the resolution result; in response to the target variable identifier pointing to a determined value in the scope, determining that the semantic check passes.

[0017] In some embodiments, the semantic check step includes: performing an assignment expression check step on the assignment expressions in the first JavaScript source code; where the assignment expression check step includes: performing the variable identifier check step on the right value in the assignment expression; performing the variable identifier check step on the left value in the assignment expression; in response to the check result of the variable identifier check step being passing, determining whether the left value is a constrained semantic feature element in a preset set of constrained semantic features, and the constrained semantic feature element points to a dynamic feature.

[0018] In some embodiments, the set of constrained semantic features includes one or more of the following: Prototype prototype object, valueOf native method, toString native method, Eval function call.

[0019] In some embodiments, the web application includes a second JavaScript source code, and the second JavaScript source code includes a call function for calling the first WASM bytecode.

[0020] In some embodiments, the method further includes: in response to a debugging instruction, running an initial JavaScript source code, generating and presenting a running result; receiving second editing information based on a second user input, and modifying the JavaScript source code according to the second editing information.

[0021] In some embodiments, the method is executed in a pre-deployed development framework.

[0022] In a second aspect, an embodiment of the present disclosure provides a development framework for a Web application, including: a usage document, where the usage document includes a syntax whitelist; a first compilation tool, configured to: based on the syntax whitelist, perform a checking step on a third JavaScript source code, where the checking step is used to determine whether the third JavaScript source code can complete the compilation process through static compilation; and compile the third JavaScript source code that passes the check into a second WASM bytecode.

[0023] In some embodiments, the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declarations, function calls; object property access; referencing custom objects; referencing custom arrays; Script execution mode.

[0024] In some embodiments, the syntax whitelist includes one or more of the following: a variable identifier whitelist, an assignment expression, a binary expression, a for loop statement, an if conditional statement, a block-level scoped variable declaration in the const manner, a block-level scoped variable declaration in the let manner.

[0025] In some embodiments, the syntax whitelist includes routines, and the routines can be called as code units; the initial JavaScript source code includes target routines, and the target routines include a routine name, formal parameters, a logic body, and a return value; where the formal parameters indicate input variables of the routine; and the logic body is used to describe the calculation logic during the execution of the routine.

[0026] In a third aspect, an embodiment of the present disclosure provides an electronic device, including: one or more processors; a storage device for storing one or more programs, and when the one or more programs are executed by the one or more processors, enabling the one or more processors to implement the method according to any one of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] In conjunction with the accompanying drawings and with reference to the following specific embodiments, the above and other features, advantages, and aspects of the various embodiments of the present disclosure will become more apparent. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic and that the elements and components are not necessarily drawn to scale.

[0028] Figure 1 is a flowchart of an embodiment of a development method for a web application according to the present disclosure;

[0029] Figure 2 is a schematic diagram of an embodiment of a development framework for a web application according to the present disclosure;

[0030] Figure 3 is a schematic diagram of an application scenario of a development framework for a web application according to the present disclosure;

[0031] Figure 4 is an exemplary system architecture to which the development method for a web application according to an embodiment of the present disclosure can be applied;

[0032] Figure 5 is a schematic diagram of the basic structure of an electronic device provided according to an embodiment of the present disclosure. Specific Embodiments

[0033] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although some embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Instead, these embodiments are provided to more thoroughly and completely understand the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of protection of the present disclosure.

[0034] It should be understood that the various steps recited in the method embodiments of the present disclosure can be executed in a different order and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this regard.

[0035] As used herein, the term "including" and its variations are open-ended, i.e., "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description.

[0036] It should be noted that the concepts such as "first" and "second" mentioned in this disclosure are only used to distinguish different nouns, devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these nouns, devices, modules or units.

[0037] It should be noted that the modifications of "one" and "plural" mentioned in this disclosure are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly specified in the context, it should be understood as "one or more".

[0038] The names of the messages or information exchanged between multiple devices in the embodiments of this disclosure are only for illustrative purposes and are not used to limit the scope of these messages or information.

[0039] As an example, some concept explanations applicable to this disclosure are given.

[0040] Web. Web itself is a set of open technical standards formulated and maintained by the non-profit organization W3. It does not specifically refer to a certain specific browser software, but refers to the general term of software systems that follow this program format standard and serve users.

[0041] Framework (a professional term in the computer field). A framework is based on a computer programming language and (usually for a broad scenario) establishes a set of reusable program code libraries and development guidance specifications. Developers can develop based on the framework according to actual business needs (instead of developing completely from scratch), so as to achieve a faster and more predictable project completion progress and better project maintenance efficiency in the later stage.

[0042] Abstract Syntax Tree (AST), a proprietary term in the compilation technology in the computer field, is a data structure or representation form during the compilation process of a program. During the process of parsing the source program code into AST, the syntax legality is often checked. After that, based on this AST data structure, downstream processing can also be carried out using compilation technology theories and tools.

[0043] JavaScript (JS) language is a scripting language, a programming language that can be run by a browser and can implement program logic.

[0044] WebAssembly (referred to as WASM in this disclosure, and WASM is used instead throughout this disclosure), a bytecode technology in web browser technical standards. The development languages compiled to WASM are usually statically typed programming languages for developers with a relatively high level of expertise. Compared with dynamic scripting languages like JavaScript for ordinary developers, the prerequisite learning and familiarity threshold for using WASM technology is relatively high.

[0045] WAT: The text representation form of WASM, which is more conducive to human reading and can be mutually converted equivalently with WASM bytecode.

[0046] Domain Specific Language (DSL). The development framework can provide a set of DSLs, allowing developers to write DSLs defined by the framework instead of directly writing native JavaScript code. It should be noted that the JavaScript code provided in this disclosure can be code based on DSL syntax (since DSL syntax is also an expression based on JS syntax, code based on DSL syntax can also be called JS code), or code based on standard JS syntax.

[0047] Please refer to Figure 1 , which shows the process of an embodiment of the development method for web applications according to this disclosure. As Figure 1 shown, the development method for web applications includes the following steps:

[0048] Step 101, obtain the first JavaScript source code.

[0049] In this embodiment, the execution entity (such as a server and / or terminal device) of the development method for web applications can obtain the first JavaScript source code. The first JavaScript source code can be a source code of the JavaScript type.

[0050] In this disclosure, the first JavaScript source code can complete the compilation process through static compilation.

[0051] Optionally, a development framework can be pre-deployed on the above-mentioned execution entity, and the above-mentioned development method can be executed by using the development framework. The first JavaScript source code can be the code written in the pre-set development framework or the code written in other code writing tools. That is to say, for any JavaScript source code that complies with the compilation process completed through static compilation, the method provided in this embodiment can implement compiling the JavaScript source code into WASM bytecode and generating a web application based on the WASM bytecode.

[0052] Optionally, the first JavaScript source code can be the code written according to a pre-set syntax whitelist (the syntax whitelist can provide syntax elements that meet the requirements of static compilation), or the code based on the general syntax of JavaScript (the dynamic features in the code are restricted).

[0053] Step 102: Compile the first JavaScript source code into the first WASM bytecode.

[0054] The source code of JavaScript type can be compiled into the target code of WASM type.

[0055] As an example, the first JavaScript source code can be converted into an Abstract Syntax Tree (AST).

[0056] Optionally, for the AST to WAT code, the compilation tool LLVM can be used to generate LLVM-IR code (intermediate code) based on the above AST structure, and after analyzing and optimizing the intermediate code, the WAT / WASM code required for the operation of the web application can be further output.

[0057] Step 103: Generate a web application based on the first WASM bytecode.

[0058] The web application is not limited to the programs loaded in the web browsers running on desktop computers (PCs) and mobile terminal devices (mainly smartphones); the browser-related technologies relied on by the web application are also applied to some dynamically loaded pages in client applications, such as some H5 pages and applets.

[0059] The first WASM bytecode is executable code for a web browser, and the program based on browser-related technologies can run the first WASM bytecode in the web application.

[0060] It should be noted that with the continuous improvement of the capabilities of Web browsers themselves, the urgent need for hot update capabilities in Internet products, the significant improvement in the computing capabilities of user terminal hardware, and the regulatory constraints on privacy, some data must be stored on user terminal devices (and programs must therefore perform operations on these devices). These factors have jointly promoted the transfer of a lot of computing logic from the server side to the front-end browser in business scenarios. Therefore, the problem of the running efficiency of code executed in the browser urgently needs to be solved. The Web application proposed in this embodiment, which is generated based on the first WASM bytecode, can solve the technical problem of the running efficiency of code executed in the browser.

[0061] It should be noted that the development method for a Web application provided in this embodiment can obtain the first JavaScript source code, and the first JavaScript source code can complete the compilation process through static compilation; compile the first JavaScript source code into the first WASM bytecode; and generate a Web application based on the first WASM bytecode. Thus, a new development method for Web applications is provided. By using the source code of the JavaScript type as the input, the development threshold and development cycle can be reduced. By restricting the source code of the JavaScript type to the code that can be compiled by static compilation, the compilation efficiency and execution efficiency can be improved; by using the bytecode of the WASM type as the execution code, the running efficiency of the code executed in the browser can be improved; thus, while ensuring the execution efficiency of the developed Web application, the development efficiency of the Web application can be improved (saving development costs and shortening the development cycle).

[0062] In related technologies, languages of the JavaScript type make extensive use of dynamic features. When the front-end computing logic is relatively simple, the problem of the low running efficiency of languages of the JavaScript type can be ignored; when the front-end computing logic is relatively complex, the running efficiency of JavaScript code in the browser is greatly reduced.

[0063] That is to say, the flexible and dynamic features of the JavaScript language also make it difficult to optimize the running performance and efficiency of its code during compilation / interpretation execution on terminal devices. The design of the computer at the physical hardware level determines that it is better at processing programs composed of static and definite data structures. However, the dynamic syntax of the JavaScript language makes it difficult for virtual machine interpreters represented by the Google V8 engine to optimize the compilation stage through program static analysis techniques. The interpreter has to perform dynamic analysis and optimization of the program based on means such as feedback vectors during the program running stage, which is inefficient in terms of memory utilization and CPU running efficiency.

[0064] Therefore, in the related art, for the relatively complex front-end calculation logic scenarios, those skilled in the art usually abandon the JavaScript language and use other language types outside the JavaScript language as input.

[0065] It should be noted that the research on the execution efficiency of code in browsers in this field mainly focuses on whether the running performance of JavaScript can be further improved. In this regard, those skilled in the art usually have the following technical biases: Limited by the dynamic characteristics of the JavaScript language itself, it is difficult to achieve good optimization effects on the source program code written in this language in terms of static analysis and optimization; if JavaScript code is used in front-end logic calculation scenarios, the performance will be reduced, and it is not suitable to use JavaScript code as input in such scenarios. Moreover, since its inception, WASM has been a technology that replaces JavaScript with better running efficiency and other performance indicators; those skilled in the art usually only choose one of the languages between WASM (or the language compiled into WASM) and JavaScript for development (which is also a technical bias).

[0066] However, as a language that has been popular for many years, languages of the JavaScript type have a wide range of usage bases and community ecosystems. Using JavaScript for the development of web applications can shorten the development time cycle of the program and reduce personnel costs.

[0067] The technical solutions proposed in one or more embodiments of the present disclosure address the problem of low running performance of JavaScript in scenarios focusing on front-end logic calculation, and propose a technical solution to compile JavaScript into WASM bytecode (overcoming the above technical biases). The combination of the efficient development characteristics of the JavaScript language and the high running efficiency and high performance characteristics of the WASM technology improves the performance of web applications in a large number of logic calculation scenarios while shortening the development time cycle of the program and reducing personnel costs when using JavaScript for the development of web applications.

[0068] In some embodiments of the present disclosure, the development method for web applications can be executed in a development framework.

[0069] One or more embodiments of the present disclosure propose: combining WASM with development framework constraints to achieve static compilation, thereby optimizing the performance of web applications; that is, using restricted JavaScript code as input, compiling the JavaScript code into WASM bytecode, and the browser executing the WASM bytecode to improve the running efficiency.

[0070] In some embodiments, the method further includes: performing an inspection step on the initial JavaScript source code based on a preset syntax whitelist; using the initial JavaScript source code that passes the inspection as the first JavaScript source code.

[0071] The inspection step is used to determine whether the initial JavaScript source code can complete the compilation process through static compilation.

[0072] The above inspection step based on the syntax whitelist can be understood as a Closed World Assumption (CWA) method, that is, if an element in the initial JavaScript source code is not in the syntax whitelist, it is determined as not passing.

[0073] Thus, the method of allowing through the whitelist can be used to quickly and accurately implement the inspection of whether the initial JavaScript source code can complete the compilation process through static compilation.

[0074] In contrast, if the dynamic features in the initial JavaScript source code are analyzed and inspected one by one, and the writing methods with risks of such dynamic features are intercepted during the compilation process, the code implementation of the judgment step will face a huge workload, and some dynamic features may still not be completely analyzed and processed, resulting in differences between the compiled result and the performance behavior of the original JS source code when executed in the standard interpretation mode.

[0075] In some embodiments, the inspection step is based on a quick-fail mechanism; the method further includes: during the inspection process of the inspection step, if the inspection of the point to be inspected in the initial JavaScript source code fails, the inspection step is aborted, and an error message is displayed; modifying the JavaScript source code according to the first editing information input by the first user, and continuing to execute the inspection step based on the modified JavaScript source code.

[0076] The code point to be inspected in the source code can be called the point to be inspected. Once the point to be inspected fails the inspection, the inspection is immediately aborted to remind the developer (i.e., the first user) to modify the initial JS source code.

[0077] The first editing information input by the first user can be used to modify the initial JavaScript source code. As an example, after seeing the error message, the developer can modify the error point indicated by the error message to quickly complete the update of the initial JavaScript source code; based on the updated initial JavaScript source code, continue to execute the inspection step until it passes the inspection.

[0078] It should be noted that in the present disclosure, if the inspection step indicates that the inspection fails, an error message will be displayed, and when an unexpected syntax node is encountered, the compilation process will be terminated, so as to expose problems as early as possible.

[0079] In contrast, in the related art, during the code inspection process, a blacklist or tolerance strategy is adopted. For some ambiguous code writings, as long as they are not in the blacklist or are not particularly serious errors, they are ignored, and the compilation process is completed as much as possible to reduce the interruption of the development process. However, some potential problems may not be exposed and thus enter the production environment program.

[0080] It should be noted that for the development methods provided in some embodiments of the present disclosure, the target code is WASM bytecode. For JS writings that may cause failure to compile into WASM bytecode (which may conform to the JS standard syntax but not meet the requirements for static compilation into WASM bytecode), an error will be reported immediately, that is, a fast failure mechanism is adopted. This is completely different from the idea of general compilers (completing the compilation process as much as possible to reduce the interruption of the development process).

[0081] In some embodiments, the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declarations, function calls; object property access; reference to a custom object; reference to a custom array; Script execution mode.

[0082] Function-related information (function) can be understood as all information related to the use of functions. Functions in the JS syntax, while serving as code reuse modules, have many dynamic characteristics. As an example, functions in JS can be dynamically created and modified at runtime; the this value of a function is determined at the time of call, not at the time of definition; the this value can be dynamically changed using functions such as call, apply, and bind; functions can implement dynamic parameter processing. For example, a function can accept any number of parameters, and dynamic parameters can be accessed through the arguments object or rest parameters; a function is an object and its properties can be dynamically added or deleted; functions also have the dynamic nature of prototypes and inheritance, and the inheritance relationship can change dynamically. In the case where functions in the JS syntax have so many dynamic characteristics, using functions will cause JS code to usually run in an interpreted execution mode first. During runtime, according to optimization needs, the interpreter may compile some hot code at runtime (just-in-time compilation). And due to its dynamic characteristics, sometimes the just-in-time compilation effect will instead lead to performance degradation, and the interpreter will also perform deoptimization and resume execution in the interpreted mode.

[0083] Therefore, due to its historical burden, the functions in the JavaScript language contain a great deal of dynamic features. To avoid such dynamic features, in the embodiments provided by the present disclosure, the developer-defined function, a basic syntax element, is clearly restricted in the syntax whitelist.

[0084] In the JS language, an object is a dynamic key-val structure, which means that "which keys exist on a JS object and what is the value corresponding to each key" can only be confirmed by the interpreter when running to this line of code during the interpretation execution. Therefore, it has dynamic features and is difficult to be statically compiled.

[0085] In the JS code restricted by the framework, if the use of JS objects is completely prohibited, it will impede some functions implemented by the framework itself. Therefore, users can be prohibited from customizing JS objects, while allowing users to create some framework objects through the framework API. Their structures are determined and can be statically analyzed. The objects created by users themselves (customized objects) are difficult to determine their accurate structures during the static analysis due to reasons such as JS object property access.

[0086] Arrays in JS inherit objects on the prototype chain, so they will have the same dynamic feature problems as objects. In addition, the arrays in JS itself also allow the dynamic change of their storage space size, which is more convenient in development but is a difficult problem for compiler optimization.

[0087] The Script execution mode contains the historical burden left over in the early design process of the JS language, and these historical burdens include some even unnecessary dynamic features. The most significant impact is that the JS code executed in the script mode makes it difficult to determine the symbol table in the JS scope during the static analysis in the compilation stage.

[0088] It should be noted that the elements not included in the syntax whitelist (which can be called the whitelist constraint elements) point to the code that may cause dynamic features. Determining these whitelist constraint elements themselves from the JS syntax requires combining the coding purpose (i.e., compiling into WASM bytecode) and the JS syntax and semantic features, which requires creative labor.

[0089] In some embodiments, the syntax whitelist includes one or more of the following: the whitelist of variable identifiers, assignment expressions, binary expressions, for loop statements, if conditional statements, block-scope variable declarations in the const manner, and block-scope variable declarations in the let manner.

[0090] As an example, most expressions will contain variable identifiers. A whitelist of variable identifiers can be provided as the direct identifier name Identifier Name in the expression; or, after variable name resolution, functions that can be accessed and determined to be identifiers in the whitelist of variable identifiers during the static analysis phase are executed as expressions, otherwise this writing method is intercepted with an error message.

[0091] In some embodiments, the syntax whitelist includes routines, and routines can be called as code units.

[0092] In some embodiments, the initial JavaScript source code includes target routines. A target routine includes a routine name, formal parameters, a logic body, and a return value, and routines can be called as code units; among them, the formal parameters indicate the input variables of the routine; the logic body is used to describe the calculation logic during the execution of the routine. In one or more embodiments of the present disclosure, while restricting (or disabling) functions in JS, in order to meet the programming needs of developers, a custom code reuse tool is proposed. For convenience of description, this code reuse tool can be called a routine. The concept of such a new subroutine module, Routine, replaces functions. Although developers themselves cannot write custom functions, they can abstract a part of the subroutines / submodules in the overall program for reuse in the form of routines.

[0093] For routines, the formal parameters and the logic body in the routine are both values that can be reached in static analysis. Formal Parameters: refer to the input variables declared in the function definition, which are used to accept the actual parameters passed in externally during the call; Logic Body: consists of several instructions or statements, which describe the specific calculation or control logic during the execution of the routine. Routines can be fully understood by the compiler during the compilation phase and further optimized (including but not limited to mid-compilation optimization techniques such as inlining optimization).

[0094] In some embodiments, a Routine has a syntax structure with an identifier (routine name), a parameter set (formal parameters), a return value, and an encapsulated execution logic (logic body). Its main function is to organize a set of program instructions with specific functions or behaviors into an independent and repeatedly callable code unit, thereby achieving the abstraction, modularization, and reusability of program logic.

[0095] A routine can be executed in a call manner at other positions in a program. The caller can pass in actual parameter values and receive return results. This construct is typically used to improve the clarity of the program structure, reduce code duplication, and support logical encapsulation and layered design.

[0096] Optionally, the concept of "Routine" in JavaScript source code also corresponds to "func" in the compiled WASM bytecode output. This correspondence can include a direct correspondence or the following indirect correspondence: During static analysis, it is possible to optimize the source code structure of calling function B in module A into including several lines of program code in function B directly within module A through inlining optimization.

[0097] In some embodiments, the step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: performing a check step on the input variables and the logical body of the target routine according to the syntax whitelist.

[0098] Thus, it can be ensured that the logical body in the target routine conforms to the syntax whitelist and can complete the compilation process through static compilation.

[0099] As an example, the syntax whitelist provides a way to reuse code units based on Routine. The initial JavaScript source code can include a target Routine (a specific Routine instance). For this reusable code unit of the target Routine, the above-mentioned check steps can also be performed based on the syntax whitelist.

[0100] In some embodiments, the first JavaScript source code includes data structure description information; wherein, the data structure description information is used to describe one or more of the following for a data set: fields, types, nested relationships, semantic tags, and range transformation information.

[0101] The data structure description information (which can be referred to as Schema, for example) can provide information for describing the data structure.

[0102] In one or more embodiments of the present disclosure, a descriptive configuration mechanism for large-scale semi-structured data is provided, which is used to define the fields, types, nested relationships, semantic tags, and their potential change ranges of data through formal means for subsequent structural mapping and optimized layout during data collection, storage, transmission, and conversion.

[0103] Accordingly, in order to improve the transmission efficiency between JS and WASM for semi-structured data (such as in the form of a JS array), the present disclosure proposes a definition of a data structure format (a mechanism not present in the syntax of the JS programming language), which can improve the data processing speed during the execution of the first WASM.

[0104] In one or more embodiments of the present disclosure, the method further includes: performing a storage layout optimization step on the data set according to the data structure description information, and generating storage layout information. Here, the storage layout information is used to characterize the layout structure of the data set in the storage medium, and the storage layout optimization step includes one or more of the following: field rearrangement, memory alignment, cache optimization. Accordingly, the data can be converted into a layout structure that is conducive to underlying hardware acceleration processing.

[0105] In one or more embodiments of the present disclosure, the method further includes: converting the data set into a target format according to the data structure description information and the target format information. Accordingly, in different application or storage environments, structural mapping and semantic preservation between multiple formats can be achieved (such as the mutual conversion between JSON and Binary, and the mutual conversion between Row and Column).

[0106] In one or more embodiments of the present disclosure, the method further includes: during the execution of the first WASM bytecode, reading the data set according to the data structure description information. Accordingly, the data structure description information can be used to read the data set; realizing efficient data transfer and improving the running performance of web applications. In some embodiments, the step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: generating an abstract syntax tree according to the initial JavaScript source code, where the abstract syntax tree includes multiple nodes; performing a syntax check step on the multiple nodes according to the preset syntax whitelist, and performing a semantic check step on the nodes according to a preset check rule corresponding to the node type; in response to the syntax check step failing or the semantic check step failing, determining that the check step indicates failure; in response to both the syntax check step and the semantic check step passing, determining that the check step indicates passing.

[0107] During the process of traversing each node on the Abstract Syntax Tree (AST), each AST node is judged. If the type of the node is within the range of AST nodes that the program can handle properly, corresponding static analysis, code optimization, and target code (i.e., WASM bytecode) output are performed on it; if the node type is not within the above range of AST nodes that can be handled properly (i.e., the syntax whitelist), it is directly determined as an illegal input according to the idea of the closed set hypothesis, and the program immediately reports an error. The developer writing the program can modify the code based on the exception prompt and the development documentation, and then perform the compilation operation again. If an exception occurs, modify it again, and so on until the compilation passes correctly.

[0108] In some embodiments, it includes: if the type of the node is not in the syntax whitelist, it is determined that the syntax check fails.

[0109] In some embodiments, it includes: performing a variable identifier check step on the variable identifiers of the first JavaScript source code.

[0110] The variable identifier check step includes: performing variable name resolution on the target variable identifier, and determining whether the target variable identifier points to a definite value in the scope according to the resolution result; in response to the target variable identifier pointing to a definite value in the scope, it is determined that the semantic check passes.

[0111] Optionally, when a variable is declared, the declared variable is recorded in the symbol table, and the variables in the symbol table are recorded according to the scope. For the variables declared in the code, they can be searched in the symbol table. If they cannot be found, an error can be reported directly.

[0112] It should be noted that through the variable identifier check step, it is possible to avoid variables whose left values are unreachable based on variable name resolution (name resolution) during the static analysis and symbol table technology processing.

[0113] In some embodiments, the method further includes: performing an assignment expression check step on the assignment expressions in the first JavaScript source code.

[0114] Optionally, the assignment expression check step includes: performing the variable identifier check step on the right value in the assignment expression.

[0115] Optionally, the assignment expression checking step includes: executing the variable identifier checking step for the left value in the assignment expression; in response to the check result of the variable identifier checking step being a passed check, determining whether the left value is a constraint semantic feature element in a preset constraint semantic feature set, wherein the constraint semantic feature element points to a dynamic feature.

[0116] In some embodiments, the set of constraint semantic features includes one or more of the following: Prototype prototype object, valueOf native method, toString native method, Eval function call.

[0117] In the step of checking the assignment expression, the left value and the right value are distinguished. The right value maintains the reachable principle of identifier resolution. The left value uses a different checking logic from the right value, that is, it is allowed to assign values to variables declared in the current scope (let method), but not to assign values to identifiers outside this scope. In addition, the Prototype prototype object cannot be modified, and JS native methods such as valueOf, toString, and Eval function calls cannot be overwritten.

[0118] It should be noted that through the assignment expression checking step, the code can be checked from a semantic level to improve the comprehensiveness and accuracy of the check, ensure that the JS code to be compiled does not have dynamic characteristics, and achieve accurate compilation of JS code to WASM bytecode.

[0119] In some embodiments, the web application includes a second JavaScript source code, and the second JavaScript source code includes a calling function for calling the first WASM bytecode.

[0120] In the browser's WASM bytecode technology standard, WASM can be used as an adjunct and supplement to JavaScript code. In development practice, WASM program modules are usually used as a separate high-performance computing program module to call JavaScript code. Therefore, WASM cannot directly operate the browser DOM or other APIs related to GUI and client capabilities.

[0121] As an example, the second JS code first initiates a network request to the server to download the first WASM bytecode, and initializes the first WASM bytecode in the form of a segment of memory. After initialization, the target function is obtained from the initialization result object, and the logical entry of the target function defined in the target function WAT code is then output to the DOM to simulate the view content of the WASM calculation results at the UI level in a real business scenario.

[0122] Thus, efficient interaction between WASM and JavaScript code in the business can be achieved, thereby enabling the complete and efficient operation of Web applications.

[0123] In some embodiments, the method further includes: in response to a debugging instruction, running an initial JavaScript source code, generating and presenting a running result; receiving second editing information based on a second user input, and modifying the JavaScript source code according to the second editing information.

[0124] As an example, in the debugging mode, static checks can be performed on the initial JavaScript source code, and the running result of the code in the running environment can be simulated. Thus, during the process of writing the JavaScript source code, debugging can be performed on a relatively small amount of code, avoiding a large number of error reports caused by one-time compilation of a large amount of code.

[0125] Please refer to Figure 2 , which shows a schematic diagram of an embodiment of a development framework (JavaScript Framework) for Web applications according to the present disclosure. As Figure 2 shown in the development framework, it includes: a usage document 201 and a first compilation tool 203.

[0126] In this embodiment, the usage document includes a syntax whitelist. The syntax whitelist is a proper subset of the standard JS syntax. The syntax whitelist does not include syntax elements in the JS syntax that may cause dynamic features.

[0127] The first compilation tool is used to: based on the syntax whitelist, perform an inspection step on a third JavaScript source code, where the inspection step is used to determine whether the third JavaScript source code can complete the compilation process through static compilation; compile the third JavaScript source code that passes the inspection into a second WASM bytecode.

[0128] In some embodiments, the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declaration, function call; object property access; reference to a custom object; reference to a custom array; Script execution mode.

[0129] In some embodiments, the syntax whitelist includes one or more of the following: variable identifier whitelist assignment expression, binary expression, for loop statement, if conditional statement, block-level scope variable declaration in const mode, block-level scope variable declaration in let mode.

[0130] In some embodiments, the syntax whitelist includes routines that can be called as code units. Due to its historical burden, the JavaScript language has a great deal of dynamic features in its functions. To constrain the dynamic features of the code, in the present disclosure, the developer's custom function, a basic syntax element, is explicitly restricted in the syntax whitelist.

[0131] It should be noted that the elements not included in the syntax whitelist (which may be referred to as whitelist constraint elements) point to the code that may cause dynamic features. Determining these whitelist constraint elements themselves from the JS syntax requires integrating the coding purpose (i.e., compiling into WASM bytecode) and the JS syntax and semantic features, which requires creative labor.

[0132] In some embodiments, the present disclosure proposes a definition of the data structure format (which may be referred to as Schema for example). It should be noted that this definition of the data structure format is a mechanism not present in the syntax of the JS programming language. As an example, this framework provides a descriptive configuration mechanism for large-scale semi-structured data, which is used to define the fields, types, nested relationships, semantic tags, and their potential change ranges of the data in a formalized manner for subsequent structural mapping and optimized layout during data collection, storage, transmission, and conversion.

[0133] Thus, to improve the transmission efficiency of semi-structured data (such as in the form of a JS object array) between JS and WASM, the data processing speed during the execution of the first WASM can be increased. Optionally, the above development framework includes a development tool 202. The development tool 202 can provide an interface environment for writing JavaScript source code and can display the JavaScript source code according to different types.

[0134] Optionally, the present disclosure proposes a development framework that can be applied to describe the computational logic of large-scale data in a front-end intensive computing scenario. By providing usage documentation and compilation tools, the framework constrains and guides developers, restricts the dynamic features of the JavaScript language (which are obstacles to performance optimization), and guides them to develop a logical description closer to the computer hardware level.

[0135] The development framework proposed by the present disclosure can be applied to the debugging running mode. In this mode, the JS code can be debugged by the browser DevTool (which is beneficial to improving the development efficiency based on the framework). As an example, the debugging tool is provided by the browser.

[0136] The development framework proposed by the present disclosure can compile and output the JavaScript source program code that follows the framework constraints into WASM bytecode.

[0137] The development framework proposed by the present disclosure may include external connection code (i.e., the glue layer). The external framework connection code is used to connect the WASM bytecode and the external framework, and / or the external framework connection code is used to connect the WASM bytecode and other business logic code in the web application. For example, the second JavaScript source code in the present disclosure.

[0138] In the development frameworks or programs in the prior art, a large number of dynamic features are used, resulting in difficulties in static analysis and optimization.

[0139] During the development stage of the development framework proposed by the present disclosure, through the use of documentation to guide and constrain the process of developers writing business logic code, the source code is made into code suitable for performance optimization for computer hardware, avoiding the use of dynamic features in the JavaScript syntax; reducing the development difficulty of web application programs and shortening the development cycle. At the same time, WASM bytecode is output, and the browser execution of the WASM bytecode improves the browser running efficiency.

[0140] Please refer to Figure 3 , Figure 3 which shows a schematic diagram of the application scenario of the development framework.

[0141] This framework provides usage documentation to guide and constrain the process of developers writing business logic code.

[0142] During the development stage, developers can use development tools to write JavaScript source code.

[0143] During the static analysis stage, the development framework can perform a checking step on the initial JavaScript source code based on a preset syntax whitelist, where the checking step is used to determine whether the initial JavaScript source code can complete the compilation process through static compilation; the initial JavaScript source code that passes the check is used as the first JavaScript source code. If it does not pass the check, the initial JavaScript source code is adjusted until it passes the check.

[0144] In the debugging state, the statically analyzed JavaScript source code can be run to check whether the business logic of the JavaScript source code is correct.

[0145] In the compilation state, the statically analyzed JavaScript source code is compiled into WASM bytecode. The WASM bytecode can be called by the glue layer to achieve running in the browser running environment.

[0146] Please refer to Figure 4 , Figure 4Shows an exemplary system architecture to which the development method and development framework for Web applications according to an embodiment of the present disclosure can be applied.

[0147] As Figure 4 shown, the system architecture may include terminal devices 401, 402, 403, network 404, and server 405. Network 404 is used to provide a medium for communication links between terminal devices 401, 402, 403 and server 405. Network 404 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0148] Terminal devices 401, 402, 403 can interact with server 405 through network 404 to receive or send messages, etc. Various client applications can be installed on terminal devices 401, 402, 403, such as web browser applications, search applications, and news and information applications. The client applications on terminal devices 401, 402, 403 can receive user instructions and complete corresponding functions according to the user instructions, such as adding corresponding information to the information according to the user instructions.

[0149] Terminal devices 401, 402, 403 can be hardware or software. When terminal devices 401, 402, 403 are hardware, they can be various electronic devices with a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, and desktop computers, etc. When terminal devices 401, 402, 403 are software, they can be installed in the above-listed electronic devices. It can be implemented as multiple software or software modules (such as software or software modules for providing distributed services), or it can be implemented as a single software or software module. No specific limitation is made here.

[0150] Server 405 can be a server that provides various services, such as receiving information acquisition requests sent by terminal devices 401, 402, 403, obtaining display information corresponding to the information acquisition requests in various ways according to the information acquisition requests, and sending relevant data of the display information to terminal devices 401, 402, 403.

[0151] It should be noted that the development method for Web applications provided by the embodiments of the present disclosure can be executed by a terminal device, and the development framework can be deployed on the terminal device. Correspondingly, the development method and development framework for Web applications can be set in terminal devices 401, 402, and 403. In addition, the development method and development framework for Web applications provided by the embodiments of the present disclosure can also be executed by server 405. Correspondingly, the development method and development framework for Web applications can be set in server 405.

[0152] It should be understood that Figure 4 the numbers of terminal devices, networks, and servers in

[0153] Reference will be made below to Figure 5 , which shows a schematic structural diagram of an electronic device suitable for implementing the embodiments of the present disclosure (such as Figure 4 the terminal device or server in Figure 5 The electronic device shown is only an example and should not impose any limitation on the functions and usage scope of the embodiments of the present disclosure.

[0154] As Figure 5 shown, the electronic device may include a processing device (such as a central processing unit, a graphics processing unit, etc.) 501, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 502 or the program loaded from the storage device 508 into the random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 500 are also stored. The processing device 501, the ROM 502, and the RAM 503 are connected to each other through a bus 504. The input / output (I / O) interface 505 is also connected to the bus 504.

[0155] Generally, the following devices can be connected to the I / O interface 505: an input device 506 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 507 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 508 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 509. The communication device 509 can allow the electronic device to communicate with other devices wirelessly or wiredly to exchange data. Although Figure 5An electronic device having various devices is shown, but it should be understood that it is not required to implement or have all the shown devices. Instead, more or fewer devices may be implemented or had.

[0156] In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, an embodiment of the present disclosure includes a computer program product that includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes program codes for performing the methods shown in the flowcharts. In such an embodiment, the computer program can be downloaded and installed from the network via the communication device 509, or installed from the storage device 508, or installed from the ROM 502. When the computer program is executed by the processing device 501, the above-mentioned functions defined in the methods of the embodiments of the present disclosure are performed.

[0157] It should be noted that the above-mentioned computer-readable medium in the present disclosure can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. And in the present disclosure, the computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program codes. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, and the computer-readable signal medium can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program codes contained on the computer-readable medium can be transmitted by any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0158] In some embodiments, the client and the server can communicate using any currently known or future-developed network protocol such as HTTP (HyperText Transfer Protocol), and can be interconnected with digital data communication in any form or medium (e.g., a communication network). Examples of communication networks include local area networks ("LAN"), wide area networks ("WAN"), the Internet (e.g., the Internet), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any currently known or future-developed networks.

[0159] Figure 5 The illustrated electronic device may include one or more processors; a storage device for storing one or more programs; when the one or more programs are executed by the one or more processors, the one or more processors are caused to implement: obtaining a first JavaScript source code, wherein the first JavaScript source code is compiled through static compilation; compiling the first JavaScript source code into first WASM bytecode; and generating a web application based on the first WASM bytecode.

[0160] In some embodiments, the method further includes: performing a checking step on an initial JavaScript source code based on a preset syntax whitelist, wherein the checking step is used to determine whether the initial JavaScript source code can be compiled through static compilation; and using the initial JavaScript source code that passes the check as the first JavaScript source code.

[0161] In some embodiments, the method further includes: during the process of performing the checking step, if a point to be checked in the initial JavaScript source code fails the check, aborting the checking step and displaying an error message; the checking step being based on a fast-fail mechanism; modifying the JavaScript source code according to first editing information input by a first user, and continuing to perform the checking step based on the modified JavaScript source code.

[0162] In some embodiments, the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declarations, function calls; object property access; referencing custom objects; referencing custom arrays; Script execution mode.

[0163] In some embodiments, the syntax whitelist includes one or more of the following: a variable identifier whitelist, an assignment expression, a binary expression, a for loop statement, an if conditional statement, a block-level scoped variable declaration in const manner, and a block-level scoped variable declaration in let manner.

[0164] In some embodiments, the syntax whitelist includes routines, and a routine can be called as a code unit; the initial JavaScript source code includes a target routine, and the target routine includes a routine name, formal parameters, a logic body, and a return value; wherein, the formal parameters indicate the input variables of the routine; and the logic body is used to describe the calculation logic during the execution of the routine.

[0165] In some embodiments, the step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: performing a check step on the input variables and the logic body of the target routine according to the syntax whitelist.

[0166] In some embodiments, the first JavaScript source code includes data structure description information; wherein, the data structure description information is used to describe one or more of the following of a data set: fields, types, nested relationships, semantic tags, and range transformation information.

[0167] In some embodiments, the method further includes one or more of the following: performing a storage layout optimization step on the data set according to the data structure description information, and generating storage layout information, wherein the storage layout information is used to characterize the layout structure of the data set in a storage medium, and the storage layout optimization step includes one or more of the following: field rearrangement, memory alignment, cache optimization; converting the data set into a target format according to the data structure description information and target format information; and reading the data set according to the data structure description information during the execution of the first WASM bytecode.

[0168] In some embodiments, the step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: generating an abstract syntax tree according to the initial JavaScript source code, wherein the abstract syntax tree includes a plurality of nodes; performing a syntax check step on the plurality of nodes according to the preset syntax whitelist, and performing a semantic check step on the nodes according to a preset check rule corresponding to the node type; in response to the syntax check step failing or the semantic check step failing, determining that the check step indicates failure; and in response to both the syntax check step and the semantic check step passing, determining that the check step indicates passing.

[0169] In some embodiments, the syntax checking step includes: if the type of a node is not in the syntax whitelist, it is determined that the syntax check fails.

[0170] In some embodiments, the semantic checking step includes: performing a variable identifier checking step on the variable identifiers of the first JavaScript source code; wherein, the variable identifier checking step includes: performing variable name resolution on the target variable identifier, and determining whether the target variable identifier points to a determined value in the scope according to the resolution result; in response to the target variable identifier pointing to a determined value in the scope, it is determined that the semantic check passes.

[0171] In some embodiments, the semantic checking step includes: performing an assignment expression checking step on the assignment expressions in the first JavaScript source code; wherein, the assignment expression checking step includes: performing the variable identifier checking step on the right value in the assignment expression; performing the variable identifier checking step on the left value in the assignment expression; in response to the check result of the variable identifier checking step being that the check passes, determining whether the left value is a constraint semantic feature element in a preset set of constraint semantic features, and the constraint semantic feature element points to a dynamic feature.

[0172] In some embodiments, the set of constraint semantic features includes one or more of the following: Prototype prototype object, valueOf native method, toString native method, Eval function call.

[0173] In some embodiments, the web application includes a second JavaScript source code, and the second JavaScript source code includes a call function for calling the first WASM bytecode.

[0174] In some embodiments, the method further includes: in response to a debug instruction, running the initial JavaScript source code, generating and displaying a running result; receiving second editing information based on a second user input, and modifying the JavaScript source code according to the second editing information.

[0175] The above computer-readable medium may be included in the above electronic device; or it may exist separately without being assembled into the electronic device.

[0176] The above computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to: obtain a first JavaScript source code; compile the first JavaScript source code into first WASM bytecode; and generate a web application based on the first WASM bytecode.

[0177] The flowcharts and block diagrams in the figures illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagram may represent a module, a segment of a program, or a part of code that contains one or more executable instructions for implementing a specified logical function. It should also be noted that, in some alternative implementations, the functions noted in the blocks may occur in an order different from that noted in the figures. For example, two consecutive blocks shown may actually be executed substantially in parallel, or they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and combinations of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system that performs the specified functions or operations, or by a combination of dedicated hardware and computer instructions.

[0178] The tools described in the embodiments of the present disclosure can be implemented in software or in hardware. Among them, the name of the tool does not constitute a limitation on the unit itself in some cases.

[0179] The functions described above herein can be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that can be used include: field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems on a chip (SOCs), complex programmable logic devices (CPLDs), and so on.

[0180] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0181] The above description is only a preferred embodiment of the present disclosure and an illustration of the applied technical principles. Those skilled in the art should understand that the scope of the disclosure involved in the present disclosure is not limited to the technical solutions formed by the specific combination of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosure concept. For example, the technical solutions formed by mutually replacing the above features with the technical features (but not limited to) having similar functions disclosed in the present disclosure.

[0182] In addition, although the operations are depicted in a particular order, this should not be construed as requiring that the operations be performed in the particular order shown or in sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, although a number of specific implementation details are included in the above discussion, these should not be construed as limiting the scope of the present disclosure. Certain features described in the context of separate embodiments can also be implemented combinatorially in a single embodiment. Conversely, the various features described in the context of a single embodiment can also be implemented separately or in any suitable sub-combination in multiple embodiments.

[0183] Although the subject matter has been described in language specific to structural features and / or methodological acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are merely example forms for implementing the claims.

Claims

1. A development method for a Web application, characterized in that, Including: Obtain the first JavaScript source code, where the compilation process of the first JavaScript source code is completed through static compilation; Compile the first JavaScript source code into the first WASM bytecode; Generate a web application based on the first WASM bytecode.

2. The method according to claim 1, wherein The method further includes: Based on a preset syntax whitelist, perform a checking step on the initial JavaScript source code, where the checking step is used to determine whether the initial JavaScript source code can be compiled through static compilation; Use the initial JavaScript source code that passes the check as the first JavaScript source code.

3. The method according to claim 2, wherein The checking step is based on a fast failure mechanism; and The method further includes: During the checking process of the checking step, if the point to be checked in the initial JavaScript source code fails the check, abort the checking step and display an error message; Modify the initial JavaScript source code according to the first editing information input by the first user, and continue to perform the checking step based on the modified initial JavaScript source code.

4. The method according to claim 2, wherein The syntax whitelist does not include one or more of the following: Function-related information, where the function-related information includes one or more of the following: function declarations, function calls; Object property access; Referencing custom objects; Referencing custom arrays; Script execution mode.

5. The method according to claim 2, wherein The syntax whitelist includes one or more of the following: Variable identifier whitelist, assignment expressions, binary expressions, for loop statements, if conditional statements, block-level scope variable declarations in the const manner, block-level scope variable declarations in the let manner.

6. The method according to claim 2, characterized in that, The syntax whitelist includes routines, and routines can be called as code units; the initial JavaScript source code includes target routines, and the target routines include routine names, formal parameters, logical bodies, and return values; Among them, the formal parameters indicate the input variables of the routine; The logical body is used to describe the calculation logic during the execution of the routine.

7. The method according to claim 6, characterized in that, The step of performing a checking step on the initial JavaScript source code based on the preset syntax whitelist includes: According to the syntax whitelist, perform a checking step on the input variables and logical bodies of the target routines.

8. The method according to claim 1, characterized in that The first JavaScript source code includes data structure description information; Among them, the data structure description information is used to describe one or more of the following of the data set: fields, types, nested relationships, semantic tags, and range transformation information.

9. The method according to claim 8, characterized in that, The method further includes one or more of the following: According to the data structure description information, perform a storage layout optimization step on the data set and generate storage layout information, where the storage layout information is used to characterize the layout structure of the data set in the storage medium, and the storage layout optimization step includes one or more of the following: field rearrangement, memory alignment, cache optimization; Convert the data set to a target format according to the data structure description information and the target format information. During the execution of the first WASM bytecode, the data set is read according to the data structure description information.

10. The method according to claim 2, wherein The step of performing a check on the initial JavaScript source code based on a preset syntax whitelist includes: Generating an abstract syntax tree according to the initial JavaScript source code, where the abstract syntax tree includes a plurality of nodes; Performing a syntax check step on the plurality of nodes according to a preset syntax whitelist, and performing a semantic check step on the nodes according to a preset check rule corresponding to the node type; In response to the syntax check step failing or the semantic check step failing, determining that the check step indicates failure; In response to both the syntax check step and the semantic check step passing, determining that the check step indicates passing.

11. The method according to claim 10, wherein The syntax check step includes: If the type of the node is not in the syntax whitelist, determining that the syntax check fails.

12. The method according to claim 10, wherein The semantic check step includes: Performing a variable identifier check step on the variable identifiers of the first JavaScript source code; Wherein, the variable identifier check step includes: Performing variable name resolution on the target variable identifier, and determining whether the target variable identifier points to a definite value in the scope according to the resolution result; In response to the target variable identifier pointing to a definite value in the scope, determining that the semantic check passes.

13. The method according to claim 10, wherein The semantic check step includes: Performing an assignment expression check step on the assignment expressions in the first JavaScript source code; Wherein, the assignment expression check step includes: Performing the variable identifier check step on the right value in the assignment expression; Performing the variable identifier check step on the left value in the assignment expression; in response to the check result of the variable identifier check step being passed, determining whether the left value is a constraint semantic feature element in a preset set of constraint semantic features, and the constraint semantic feature element points to a dynamic feature.

14. The method according to claim 13, wherein The set of constraint semantic features includes one or more of the following: Prototype prototype object, valueOf native method, toString native method, Eval function call.

15. The method according to claim 1, characterized in that, The web application includes a second JavaScript source code, and the second JavaScript source code includes a call function for calling the first WASM bytecode.

16. The method according to claim 2, wherein The method further includes: In response to a debug instruction, running the initial JavaScript source code, generating and displaying a running result; Receiving second edit information input by a second user, and modifying the initial JavaScript source code according to the second edit information.

17. The method according to claim 1, wherein The method is executed in a pre-deployed development framework.

18. A development framework for web applications, characterized in that Includes: A usage document, where the usage document includes a syntax whitelist; A first compilation tool, configured to: perform an inspection step on a third JavaScript source code based on a syntax whitelist, where the inspection step is used to determine whether the third JavaScript source code can be compiled through static compilation; and compile the third JavaScript source code that passes the inspection into a second WASM bytecode.

19. The development framework according to claim 18, wherein the syntax whitelist does not include one or more of the following: function-related information, where the function-related information includes one or more of the following: function declarations, function calls; object property access; referencing custom objects; referencing custom arrays; Script execution; and / or the syntax whitelist includes one or more of the following: variable identifier whitelist, assignment expressions, binary expressions, for loop statements, if conditional statements, block-level scoped variable declarations in const manner, block-level scoped variable declarations in let manner; and / or the syntax whitelist includes routines, and the routines can be called as code units; the initial JavaScript source code includes target routines, and the target routines include routine names, formal parameters, logic bodies, and return values; where the formal parameters indicate the input variables of the routines; and the logic bodies are used to describe the calculation logic during the execution of the routines.

20. An electronic device, characterized in that, Comprising: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, enabling the one or more processors to implement the method according to any one of claims 1-17.

Images