CN116204175A

CN116204175A - Front-end code-free development framework, method, medium and equipment driven by UI model

Info

Publication number: CN116204175A
Application number: CN202310209501.XA
Authority: CN
Inventors: 奉继承; 陈晓龙
Original assignee: Shenzhen Konan Software Co ltd
Current assignee: Shenzhen Konan Software Co ltd
Priority date: 2023-02-27
Filing date: 2023-02-27
Publication date: 2023-06-02

Abstract

The invention discloses a front-end code-free development framework, a method, a medium and equipment driven by a UI model, wherein the development framework comprises the following components: the designer is used for establishing a corresponding UI model when the preset component is dragged onto a design canvas through Web program realization and generating a corresponding description file when the UI model is established through description language; a preset code library having preset components and program code to which the preset components are operatively responsive; the analysis engine is used for analyzing the description file generated in the UI model building process; the rendering frame is used for rendering the preset components corresponding to the UI model into the Web page; and the back-end service connection calling interface is used for calling the back-end service to be in butt joint with the front-end Web when an event or/and data are submitted. The invention can realize the code-free development in the demand scene of human-machine interaction Web application, and realizes the software function by the non-professional preset component design tool, the components of the final running form of the design software and the layout thereof.

Description

Front-end code-free development framework, method, medium and equipment driven by UI model

Technical Field

The invention relates to the technical field of computers, in particular to a front-end code-free development framework, a method, a medium and equipment driven by a UI model.

Background

Software development traditionally requires a programmer to write program code using a computer software programming language, and the computer program can perform its functions by parsing or compiling compiler (or parser) software of the language to translate the code into the running machine code of the target computer.

Therefore, computer programming is a highly skilled capability and has relatively low programming efficiency.

However, for some applications in the field, the application scenario of the software is relatively clear, the system architecture is relatively fixed, and through some new software programming techniques, automatic computer programming is always an effort in the industry without writing program codes.

Programming by natural language, rather than by specialized computer software programming language, automatic programming by artificial intelligence for understanding of language is one of the directions of academic development, but progress is not smooth.

Thus, a solution is needed that reduces the need for expertise and improves programming efficiency.

Disclosure of Invention

In view of the above technical problems, the invention provides a front-end code-free development framework, a method, a medium and equipment driven by a UI model.

Other features and advantages of the present disclosure will be apparent from the following detailed description, or may be learned in part by the practice of the disclosure.

According to an aspect of the present invention, there is provided a front-end code-less development framework driven by a UI model, the framework comprising: the designer is used for establishing a corresponding UI model when one or more preset components are dragged onto a design canvas through Web program realization and generating a corresponding description file when the UI model is established through description language; a preset code library having said preset components and program code to which said preset components are operatively responsive; the analysis engine is used for analyzing the description file generated in the UI model establishing process so as to be converted into a program code for calling the preset component; a rendering frame, configured to render the preset component corresponding to the UI model into a Web page, and link an access and call into a menu or button corresponding to the UI model; and the back-end service connection calling interface is used for calling the back-end service to be in butt joint with the front-end Web after the event or/and data are submitted and the corresponding event or/and data are packaged into a service calling format.

Further, the description file at least includes one of the following description parameters: different types of the preset components; rendering effects; verifying operation legality; event response of the operation; different layouts of the preset components.

Further, the description language is a JavaScript/HTML 5-based language.

Further, the preset component is provided with a set type, a set name, a set appearance and a corresponding program code.

Further, the rendering framework is further configured to: and adapting the size and resolution of the current screen according to the preset component when being rendered into the Web page.

According to a second aspect of the present disclosure, there is provided a UI model driven front end code-less development method including a development framework as described above, the method comprising: defining basic parameters and service call interfaces of the framework; dragging and laying out the UI model by using the designer according to the characteristics and the definition of the preset component; establishing an interface between the UI model and a back-end application while publishing and storing the UI model; and rendering the corresponding preset component into a Web page through the rendering frame.

Further, the basic parameters and service call interfaces defining the framework at least comprise one of the following:

defining a program name;

defining code abbreviations;

setting a call entry;

setting calling parameters;

and setting calling authority.

Further, the method further comprises: when the rendered Web page is operated to generate an operation event, calling and executing program codes of the operated response of the preset component according to preset rules; when the rendered Web page is operated to submit data or/and an interaction event occurs, the interaction event or/and the submitted data are packaged into a service call format, and a back-end application interface is called to complete the program operation of Web interaction operation.

According to a third aspect of the present disclosure, there is provided a computer-readable storage medium storing a computer program which, when executed by a processor, implements a front-end code-less development method of UI model driving as described above.

According to a fourth aspect of the present disclosure, there is provided a UI model driven front-end code-less development device including: a controller; the controller comprises the computer readable storage medium storing the computer program, and the computer program realizes the front-end code-free development method driven by the UI model when being executed by the processor; or/and the controller comprises the front-end code-free development framework driven by the UI model.

The technical scheme of the present disclosure has the following beneficial effects:

the invention can realize the code-free development in the demand scene of human-machine interaction Web application, and realizes the software function by the non-professional preset component design tool, the components of the final running form of the design software and the layout thereof. Therefore, the code writing can be performed without complex computer programming language, the efficiency of software design is greatly improved, the final experience of software operation can be obtained, people who do not know the programming language and do not have special software programming capability can quickly perform the software design, and the capability requirement of software development is reduced.

The invention has the core advantages that the mapping technology from the expression of the final running effect of the software to the running preset code is realized by utilizing the UI model, and the front-end and the rear-end of the programming-free running frames are respectively realized by combining the engine with the models with the front-end and the rear-end separated. The front-end and back-end separation technology can realize service decoupling, and the front end can be packaged into the operating systems of different terminals and the self-adaption of screen formats without modification of the back end.

According to the invention, software modeling and running are carried out through the program running time (run time), the complex process of compiling, constructing and packaging the software into relevant running codes after the traditional software programming is not needed, and then deploying and running are carried out on a server, so that instant deployment and instant running can be developed in instant, and the system management efficiency is greatly improved.

Drawings

FIG. 1 is a schematic diagram of a UI model driven front-end codeless development framework in an embodiment of the present disclosure;

FIG. 2 is a flow chart of a method of UI model-driven front-end codeless development in an embodiment of the present disclosure;

fig. 3 is a terminal device installed with a front-end code-free development framework for implementing UI model driving in the embodiment of the present specification;

fig. 4 is a computer readable storage medium storing a front-end code-less development framework for UI model drivers in an embodiment of the present disclosure.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. However, the exemplary embodiments may be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the present disclosure. One skilled in the relevant art will recognize, however, that the aspects of the disclosure may be practiced without one or more of the specific details, or with other methods, components, devices, steps, etc. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.

Furthermore, the drawings are only schematic illustrations of the present disclosure. The same reference numerals in the drawings denote the same or similar parts, and thus a repetitive description thereof will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in software or in one or more hardware modules or integrated circuits or in different networks and/or processor devices and/or microcontroller devices.

As shown in fig. 1, the present embodiment of the present specification provides a UI model driven front end code-less development framework, which includes:

a designer 101 for creating a corresponding UI model when one or more preset components are dragged onto a design canvas through a Web program implementation, and generating a corresponding description file through a description language when the UI model is created.

The designer 101 may be a Web program, and is configured to enable a user to drag and pull one or more preset components onto a design canvas to build a corresponding UI model through a visual interface. When the UI model is built, the designer uses a description language to generate a description file that contains relevant information and parameters about the UI model so that other programs can read and use. The description file can be used for rendering, layout, behavior control and other aspects of the UI model, and can also serve as an interface for connecting the UI model with a back-end application program.

Illustratively, the designer 101 needs to preset various components, including input boxes, buttons, drop-down boxes, lists, text display boxes, etc., for the user to select and drag onto the canvas. A canvas is provided in the designer as a design area for presenting preset components selected by the user. When a user drags the selected preset component to the canvas through a mouse, the designer needs to capture the drag action of the user, record the position, the size and other information of the preset component, and display the information on the canvas. Each preset component may have attributes such as font, color, size, alignment, etc., and the designer may display an attribute panel for the user to set these attributes. Each preset component may respond to events such as mouse clicks, keyboard inputs, etc., which may in turn be set in the designer, for example, to specify the processing function of a click event. Along with the operation of a user on a preset component, the designer needs to generate a corresponding description language for describing information such as component structure, attribute, event and the like of the UI model and generate a description file in a JSON format. The description language may be specifically a JavaScript/HTML5 based language.

A preset code library 102 having the preset components and program code to which the preset components are operatively responsive.

The preset code library 102 may have a plurality of sets of pre-written code, including program code for the preset components, and program code responsive to those components. These codes are designed to be generic so as to be able to be invoked by multiple UI models. In this way, the reuse rate of codes can be improved, and the workload of repeatedly writing codes can be reduced.

And the parsing engine 103 is used for parsing the description file generated in the UI model building process so as to convert the description file into program codes for calling the preset components.

The parsing engine 103 may be a program for converting a description file in the UI model into executable code, in particular. This process includes parsing and mapping component information in the description file to corresponding program generations in the preset code library, and is responsible for performing interaction and response events between components, as well as ensuring that user input is legal and valid.

And the rendering frame 104 is used for rendering the preset components corresponding to the UI models into Web pages and linking access and call into menus or buttons corresponding to the UI models.

Additionally, the rendering framework 104 lays out preset components in the Web page, processes layout relationships among preset components, manages styles and positions of preset components, processes interaction events of preset components, supports data binding and formatting of preset components, adjusts the size and display effect of preset components, provides mechanisms for interface refreshing and data updating, supports multi-language and theme switching, and the like, so that preset components in the UI model can be displayed in a browser. Meanwhile, the rendering framework can be adapted to browser compatibility, so that compatibility and performance of rendered UI models under different browsers can be guaranteed.

In particular, the implementation of rendering framework 104 may be based on a front-end framework implementation, such as React, vue, angular, and the like.

The back-end service connection call interface 105 is configured to call the back-end service to interface with the front-end Web after an event or/and data is submitted and the corresponding event or/and data is encapsulated into a service call format.

The back-end service call interface 105 may be RESTful, and through the back-end service call interface 105, data and events of each component of the front-end We interface are encapsulated into a service call format, and an interface corresponding to the back-end service is called, so that the running of the program of the Web interactive operation is completed.

Specifically, various preset components (e.g., text boxes, drop down lists, single boxes, multiple boxes, etc.) on the front end interface generate corresponding data and events. These data and events need to be encapsulated in order to invoke the backend services for processing as the user operates on the interface. The encapsulation process may use various data formats, such as JSON, XML, etc. A common encapsulation format may be RESTful, with data interactions via the HTTP protocol. Using RESTful, front-end data and events may be encapsulated in GET, POST, PUT, DELETE, etc., into a format that can invoke back-end services.

And after receiving the encapsulated data transmitted by the front end, the back end service performs corresponding processing according to the interface definition. The backend services may be services written based on various programming languages, such as Java, python, node. Js, etc. The service program can be connected with various data sources, such as a relational database, a NoSQL database, a file system and the like, for storing and processing data. The service program can analyze and process the data according to the format of the front-end package data, and then return corresponding results.

Through data interaction and service call between the front end and the back end, interaction operations of various Web application programs, such as inquiring, adding, modifying, deleting data and the like, can be realized. These applications may be of various types, such as e-commerce, social networking, online collaboration, online gaming, and so forth.

In one embodiment, the description file includes at least one of the following description parameters: different types of the preset components; rendering effects; verifying operation legality; event response of the operation; different layouts of the preset components.

Wherein the types of different preset components may be types describing the preset components used, such as text boxes, drop-down boxes, etc. The rendering effect may be a presentation effect, such as a position, a size, a style, etc., describing each preset component in the UI. The operation validity check may be a validity check rule describing an operation, including a data type, a value range, an input limit, and the like. The event response of the operation may be a description of how the program will respond when the user operates the preset component, including interface changes, data processing, etc. The different layouts of the preset components may be a description of the layout of the preset components in the UI, including horizontal or vertical arrangements, relative or absolute positioning, etc.

These descriptive parameters may help the designer translate the selected preset components into a UI model and ultimately render. In the process of establishing the UI model, different preset components, different rendering effects, different operation event responses and the like can influence the final presentation effect and the use experience of the UI model.

In an embodiment, the rendering framework is further configured to: and adapting the size and resolution of the current screen according to the preset component when being rendered into the Web page.

Based on the development framework, the code-free development can be realized in the demand scene of human-machine interactive Web application, and the software function is realized by designing the components and the layout of the final running form of the software through a non-professional preset component design tool. Therefore, the code writing can be performed without complex computer programming language, the efficiency of software design is greatly improved, the final experience of software operation can be obtained, people who do not know the programming language and do not have special software programming capability can quickly perform the software design, and the capability requirement of software development is reduced.

The invention can carry out software modeling and running through program running time (run time), does not need to carry out software compiling, constructing and packaging into related running codes after the traditional software programming, and then carries out complex processes of deployment and running on a server, can develop instant deployment and instant running, and greatly improves the system management efficiency

Based on the same idea, the embodiment of the present description further provides a method for developing a front end code-free UI model driver, where the method includes steps S21 to S25:

in step S21, basic parameters and service invocation interfaces of the framework are defined.

Specifically, the basic parameters and the service call interface may include a defined program name; defining code abbreviations; setting a call entry; setting calling parameters; and setting calling authority.

The program name can refer to the name or title of the software, and can be displayed on an interface to help a user to recognize the currently running software more quickly. Code abbreviations may refer to short or abbreviations for software, variable names or function names typically used in codes, etc., which may be conveniently referenced in the codes. The call portal may be the entry point or API interface that calls the framework, and may be, for example, a URL address or a function name, for specifying the launch portal of the program. The call parameter may refer to a parameter that needs to be transferred when the framework is called, for example, may be JSON data, which is used to transfer some information such as program initialization parameters or user settings. The invocation permission can refer to a number of permission requirements which need to be met when the framework is invoked, for example, user identity authentication or access control and the like are used for guaranteeing the security of the system.

The service calling interface refers to an API interface which can be called by a menu displayed on the interface, and the interfaces can accept parameters and return results for realizing different functions. For example, a window may be opened, a list displayed, or an operation performed through the service invocation interface. After the service call interface is defined in advance, the service call interface can be dynamically loaded in the running process of the program or can be directly built in the program.

In step S22, the UI model is drag-laid out using the designer according to the characteristics and definition of the preset components.

In step S23, the UI model is released and saved, and an interface between the UI model and the backend application is established.

And when the UI model is stored, a corresponding back-end application interface is established so as to realize interaction between the front end and the back end. Specifically, interface parameters and formats need to be defined, and before the back-end application interface is established, the parameters and formats of the interface need to be defined first to ensure that data interaction between the front end and the back end is accurate, specifically, according to preset settings, the data transmission format, parameter types, parameter lengths and related rules of data verification are adopted. The interface connection is established, namely, the connection to the back-end application interface is established in the front-end program, so that data requests and receiving responses can be sent to the back-end application, and the factors such as network protocol, security, performance and the like in the back-end application can be preset to ensure the stability and the high efficiency of the interface connection. After the interface connection is established, the front-end program may send a data request to the back-end application and receive response data of the back-end application.

In step S24, the corresponding preset component is rendered into a Web page by the rendering frame.

When the rendered Web page is operated to generate an operation event, calling and executing program codes of the operated response of the preset component according to preset rules; when the rendered Web page is operated to submit data or/and an interaction event occurs, the interaction event or/and the submitted data are packaged into a service call format, and a back-end application interface is called to complete the program operation of Web interaction operation.

Details of the above method have been described in the embodiments of the framework, and details not disclosed may refer to the embodiments of the method parts, so that they will not be described in detail.

Based on the same thought, the embodiment of the present specification also provides a front-end code-free development device driven by a UI model, as shown in fig. 3.

The front-end code-free development device driven by the UI model may be a terminal device or a server provided in the above-described embodiments.

The front-end code-free development device driven by the UI model may have relatively large differences due to different configurations or performances, and may include one or more processors 301 and a memory 302, where the memory 302 may store one or more storage applications or data. The memory 302 may include readable media in the form of volatile memory units, such as Random Access Memory (RAM) units and/or cache memory units, and may further include read-only memory units. The application programs stored in memory 302 may include one or more program modules (not shown), including but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment. Still further, the processor 301 may be configured to communicate with the memory 302 to execute a series of computer executable instructions in the memory 302 on a front-end code-free development device driven by the UI model. The UI model driven front end code-less development device may also include one or more power supplies 303, one or more wired or wireless network interfaces 304, one or more I/O interfaces (input output interfaces) 305, one or more external devices 306 (e.g., keyboard, hand-drawn pad, bluetooth device, etc.), one or more devices that enable a user to interact with the device, and/or any devices (e.g., routers, modems, etc.) that enable the device to communicate with one or more other computing devices. Such communication may occur through the I/O interface 305. Also, the device may communicate with one or more networks, such as a Local Area Network (LAN), via a wired or wireless interface 304.

In particular, in this embodiment, the UI model driven front-end code-less development device includes a memory, and one or more programs, and a development framework as described above stored therein, wherein the one or more programs are stored in the memory, and the one or more programs may include one or more modules, and each module may include a series of computer executable instructions in the UI model driven front-end code-less development device, and configured to be executed by the one or more processors, the one or more programs including computer executable instructions for:

Based on the same idea, exemplary embodiments of the present disclosure further provide a computer readable storage medium having stored thereon a program product capable of implementing the method described in the present specification. In some possible implementations, various aspects of the disclosure may also be implemented in the form of a program product comprising program code for causing a terminal device to carry out the steps according to the various exemplary embodiments of the disclosure as described in the "exemplary methods" section of this specification, when the program product is run on the terminal device.

Referring to fig. 4, a program product 700 for implementing the above-described method according to an exemplary embodiment of the present disclosure is described, which may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The computer readable signal medium may include a data signal propagated in baseband or as part of a carrier wave with readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Program code for carrying out operations of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++, CSS, HTML and the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., connected via the Internet using an Internet service provider).

From the above description of embodiments, those skilled in the art will readily appreciate that the example embodiments described herein may be implemented in software, or may be implemented in software in combination with the necessary hardware. Thus, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.) or on a network, including several instructions to cause a computing device (may be a personal computer, a server, a terminal device, or a network device, etc.) to perform the method according to the exemplary embodiments of the present disclosure.

Furthermore, the above-described figures are only schematic illustrations of processes included in the method according to the exemplary embodiments of the present disclosure, and are not intended to be limiting. It will be readily appreciated that the processes shown in the above figures do not indicate or limit the temporal order of these processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, for example, among a plurality of modules.

It should be noted that although in the above detailed description several modules or units of a device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit in accordance with exemplary embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into a plurality of modules or units to be embodied.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any adaptations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It is to be understood that the present disclosure is not limited to the precise arrangements and instrumentalities shown in the drawings, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A UI model driven front-end code-less development framework, the framework comprising:

the designer is used for establishing a corresponding UI model when one or more preset components are dragged onto a design canvas through Web program realization and generating a corresponding description file when the UI model is established through description language;

a preset code library having said preset components and program code to which said preset components are operatively responsive;

the analysis engine is used for analyzing the description file generated in the UI model establishing process so as to be converted into a program code for calling the preset component;

a rendering frame, configured to render the preset component corresponding to the UI model into a Web page, and link an access and call into a menu or button corresponding to the UI model;

and the back-end service connection calling interface is used for calling the back-end service to be in butt joint with the front-end Web after the event or/and data are submitted and the corresponding event or/and data are packaged into a service calling format.

2. The UI model driven front end codeless development framework of claim 1, wherein the description file includes at least one of the following description parameters:

different types of the preset components;

rendering effects;

verifying operation legality;

event response of the operation;

different layouts of the preset components.

3. The UI model driven front end code-less development framework of claim 1, wherein the description language is JavaScript/HTML5 based language.

4. The UI model driven front end codeless development framework of claim 1, wherein the preset components have set type, name, appearance, corresponding program code.

5. The UI model driven front end codeless development framework of claim 1, wherein the rendering framework is further to: and adapting the size and resolution of the current screen according to the preset component when being rendered into the Web page.

6. A method of UI model driven front end code-less development comprising the framework of any of claims 1-5, the method comprising:

defining basic parameters and service call interfaces of the framework;

dragging and laying out the UI model by using the designer according to the characteristics and the definition of the preset component;

establishing an interface between the UI model and a back-end application while publishing and storing the UI model;

and rendering the corresponding preset component into a Web page through the rendering frame.

7. The UI model driven front end codeless development method of claim 6, wherein said defining basic parameters and service invocation interfaces of said framework comprises at least one of:

defining a program name;

defining code abbreviations;

setting a call entry;

setting calling parameters;

and setting calling authority.

8. The UI model driven front end code less development method of claim 6, further comprising:

when the rendered Web page is operated to generate an operation event, calling and executing program codes of the operated response of the preset component according to preset rules;

when the rendered Web page is operated to submit data or/and an interaction event occurs, the interaction event or/and the submitted data are packaged into a service call format, and a back-end application interface is called to complete the program operation of Web interaction operation.

9. A computer readable storage medium storing a computer program, wherein the computer program when executed by a processor implements the UI model driven front-end code-less development method of any one of claims 6-8.

10. A UI model driven front-end code-less development device, comprising: a controller;

the controller comprising the computer readable storage medium of claim 9 storing a computer program which when executed by a processor implements the UI model driven front end codeless development method of any one of claims 6-8; or/and, the controller comprises the UI model driven front-end code-less development framework of any one of claims 1 to 5.