An engine system for developing TV quick apps

Abstract

This invention discloses an engine system for developing quick TV applications, comprising a business layer, a front-end framework layer, a JS engine layer, and a terminal framework layer. The business layer supports the existing Vue UI framework. The front-end framework layer corresponds to the business layer, extending the Vue framework and providing commonly used APIs to achieve compatibility and adaptation with Android TV features and functions, and compiling and parsing Vue code into JS code. The JS engine layer converts JS into a virtual DOM tree, and then maps the UI component tags of the virtual DOM tree to the native components of the terminal framework layer. The terminal framework layer converts the virtual DOM tree into corresponding Android controls in the native control library and displays them in Android. This allows applications developed by front-end developers to be used directly on Android TV, making quick application development more efficient and faster.

Description

TECHNICAL FIELD

[0001] The application relates to the field of Android TV, tablet and set-top box technologies, and particularly relates to an engine system for developing a TV fast application. BACKGROUND

[0002] With the popular use of Android TV (including TV, tablet, set-top box and the like), various functional application scenarios are increasing, and in order to realize these businesses, various apps need to be developed, and the original Android development can achieve smooth experience, but needs to be downloaded and installed from an application store, and it is difficult to directly reach the user in one step; and using web development, although no installation is required, but the experience is not good, and there is an urgent need for an application that does not need to be downloaded and installed and can also experience the content smoothly.

[0003] Although the existing fast application technology has the advantages of installation-free, front-end technology stack development and native rendering, there are still the following deficiencies when directly used on Android TV: when running the current fast application, there are various performance problems such as slow homepage loading and switching lag; the current fast application technology is based on Android mobile phone use, and there is no fast application technology suitable for Android TV, and the characteristics of TV devices are not supported, and the application developed by the front-end developer cannot be directly used on the device. SUMMARY

[0004] The purpose of the application is to provide an engine system for developing a TV fast application, which optimizes the hardware configuration problem, solves the performance problems such as slow page loading and switching lag, solves the problem of supporting various key characteristics in Android TV, the front-end developer does not need to change the development habit, and the developed application can be directly used in Android TV, so that the development of fast application is more efficient and fast.

[0005] To solve the above technical problems, the application adopts the following technical solution: an engine system for developing a TV fast application, comprising a business layer, a front-end framework layer, a JS engine layer and a terminal framework layer;

[0006] The business layer supports the existing Vue interface framework, and the front-end developer directly develops specific businesses using the Vue framework;

[0007] The front-end framework layer corresponds to the business layer, and is extended on the basis of the Vue framework to provide common apis, so as to realize the compatibility and adaptation of the characteristics and functions of Android TV, and compile and analyze the VUE code into JS code;

[0008] The JS engine layer converts JS into a virtual DOM tree, and then maps the UI component tags of the virtual DOM tree to the Native components of the terminal framework layer;

[0009] The terminal framework layer is a core layer of the TV fast application engine, and each module in the terminal framework layer converts a virtual DOM tree into a corresponding Android control in a Native control library and displays the virtual DOM tree in the Android.

[0010] The aforementioned engine system for developing a TV fast application, wherein the front-end framework layer includes a DOM conversion module, a label extension module, a style extension module, and a Native function interface module; the front-end framework layer extends H5 labels and CSS styles on the basis of an existing vue framework, provides common Native function APIs, and thus realizes compatibility and adaptation of features and functions of the Android TV.

[0011] The aforementioned engine system for developing a TV fast application, wherein the DOM conversion module specifically refers to that a vuejs converts a template into a rendering function through compilation, and a virtual node tree can be obtained by executing the rendering function; when the virtual node tree operates on a model, a corresponding object is triggered, and the object calls a function to modify a view; the label extension module specifically refers to that a rich extension component label is defined based on H5 labels, and a Native control is completely covered; a front-end developer uses the extension label to use a corresponding Native control.

[0012] The aforementioned engine system for developing a TV fast application, wherein the style extension module defines an extended CSS syntax based on a standard CSS style; a front-end developer sets a Native control attribute by using the syntax.

[0013] The aforementioned engine system for developing a TV fast application, wherein the Native function interface module adds a function extension function library; a front-end developer calls a function to realize underlying function control.

[0014] The aforementioned engine system for developing a TV fast application, wherein the JS engine layer includes a Google V8 JS engine module and a JNI interface module; the Google V8 JS engine module converts JS into a virtual DOM tree; and the JNI interface module maps a UI component label of the DOM tree to a Native component of the terminal framework layer.

[0015] The aforementioned engine system for developing a TV fast application, wherein the terminal framework layer includes a UI management module, a life cycle management module, a Native control module, and a Native function module; the terminal framework layer is a core layer of the TV fast application engine; and the terminal framework layer converts front-end page logic into a Native function implementation through the UI management module, the life cycle management module, the Native control module, and the Native function module.

[0016] The aforementioned engine system for developing a fast application of a television, wherein the UI management module comprises UI structure management and UI rendering management, the UI structure management is responsible for converting the parsed DOM tree parsed by the JS engine layer into corresponding Android controls in a Native control library, and organizing and constructing these controls into an Android View tree, and then notifying the UI rendering management module to draw; the UI rendering management is responsible for drawing the Android View tree constructed by the UI structure management module to an Android display system, and controlling subsequent display refresh work; the life cycle management module is used for engine instance management, including creation, update and consumption, and this module adopts a multi-level pre-cached engine instance strategy.

[0017] The aforementioned engine system for developing a fast application of a television, wherein the Native control module comprises Android system standard controls and custom business controls, and can be directly used in an Android system, and the standard H5 tags, extended tags, standard CSS styles and extended CSS styles involved in the front-end framework layer have a corresponding relationship with the Android system standard controls and the custom business controls, that is, the UI finally converted by using VUE will be converted into corresponding controls and attributes of the library.

[0018] The aforementioned engine system for developing a fast application of a television, wherein the Native function module is used for Native function management in a non-UI layer, and provides unified video playing, payment, authentication, data storage, picture display, network loading and exposure and billing interfaces for the upper layer, and the Native function API call involved in the front-end framework layer will finally call the function module.

[0019] Compared with the prior art, the life cycle management module adopts a multi-level pre-cached engine instance strategy, solves the problems of slow page loading and switching lag, and solves the problems of supporting various key features in an Android TV, the virtual DOM tree is converted into corresponding Android controls in a Native control library by the terminal framework layer, the application developed by a front-end developer is directly used in an Android TV, and the development of a fast application is more efficient and convenient. BRIEF DESCRIPTION OF DRAWINGS

[0020] Figure 1 is an architectural schematic diagram of the application;

[0021] Figure 2 is a flow schematic diagram of the application;

[0022] Figure 3 is a DOM conversion flow schematic diagram in the application;

[0023] Figure 4 is the extension label summary table of the label extension module in the application;

[0024] Figure 5 is Figure 4 the use diagram of the extended video label in

[0025] Figure 6 is the extension style summary table of the style extension module in the application;

[0026] Figure 7 is the extension attribute summary table of the style extension module in the application;

[0027] Figure 8 is Figure 6 and Figure 7 the use diagram of the extended style in

[0028] Figure 9 is the page loading flow diagram in the application;

[0029] The application will be further described below in combination with the drawings and specific embodiments. DETAILED DESCRIPTION

[0030] Embodiment 1 of the application: an engine system for developing a TV fast application, comprising a business layer, a front-end framework layer, a JS engine layer and a terminal framework layer;

[0031] The business layer supports an existing Vue interface framework, and a front-end developer directly develops specific businesses using the Vue framework;

[0032] The front-end framework layer corresponds to the business layer, and is extended on the basis of the Vue framework to provide common apis, so as to realize the characteristics, function compatibility and adaptation of Android TV, and compile and parse VUE code into JS code;

[0033] The JS engine layer converts JS into a virtual DOM tree, and then maps the UI component label of the virtual DOM tree to a Native component of the terminal framework layer;

[0034] The terminal framework layer is the core layer of the TV fast application engine, and through the modules thereof, the virtual DOM tree is converted into a corresponding Android control in the Native control library, and is displayed in Android. The terminal framework layer is optimized for different hardware configurations to solve the problems of slow page loading, switching lag and the like. The architecture is shown in detail in Figure 1 Embodiment 2 of the application: an engine system for developing a TV fast application, comprising a business layer, a front-end framework layer, a JS engine layer and a terminal framework layer;

[0035] The business layer supports an existing Vue interface framework, and a front-end developer directly develops specific businesses by using the Vue framework;

[0036] The front-end framework layer includes a DOM conversion module, a label extension module, a style extension module, and a Native function interface module. The front-end framework layer extends H5 labels and CSS styles on the basis of the existing Vue framework, provides common Native function APIs, and thus implements compatibility and adaptation of characteristics and functions of the Android TV;

[0037] The DOM conversion module is specifically: The vuejs converts a template into a rendering function through compilation, and a virtual node tree can be obtained by executing the rendering function. When the virtual node tree operates on a model, a corresponding object is triggered, and the object calls a function to modify a view;

[0038] The label extension module is specifically: A rich set of extended component labels are defined based on H5 labels, and Native controls are completely covered. A front-end developer can use the corresponding Native controls by using the extended labels. A rich set of extended component labels are defined based on H5 labels, and details are shown in Figure 4 . The extended component labels relate to business scenarios of the Android TV, implement specific application scenarios of the Android TV, such as dynamic waterfall display and video carousel, completely cover the Native controls, and a front-end developer can use the corresponding Native controls by using the extended labels. Details are shown in Figure 5 , which is convenient and fast.

[0039] The style extension module defines a set of extended CSS syntax based on standard CSS styles. Details are shown in Figure 6 . The extended CSS syntax is applicable to special properties of the Android TV, such as an upper focus background, a picture shadow, and focus control. The extended CSS syntax solves problems such as focus style and focus control of the Android TV. A front-end developer can set Native control properties by using the syntax. Details are shown in Figure 7 . Details of use of the extended style are shown in Figure 8 ;

[0040] The Native function interface module adds a function extension library, and calls Native functions in the Android TV. A front-end developer can implement underlying function control by calling functions;

[0041] The JS engine layer includes a Google V8 JS engine module and a JNI interface module. The Google V8 JS engine module converts JS into a virtual DOM tree, and the JNI interface module maps UI component labels of the DOM tree to Native components of the terminal framework layer.

[0042] The terminal framework layer includes a UI management module, a lifecycle management module, a native control module, and a native function module. The terminal framework layer is the core layer of the TV quick app engine. Through the UI management module, lifecycle management module, native control module, and native function module, the front-end page logic is converted into native function implementations.

[0043] The UI management module includes UI structure management and UI rendering management. UI structure management is responsible for parsing the DOM tree parsed from the JS engine layer into the corresponding Android controls in the Native control library, organizing these controls into an Android View tree, and then notifying the UI rendering management module to draw it. UI rendering management is responsible for drawing the Android View tree built by the UI structure management module onto the Android display system and controlling the subsequent display refresh.

[0044] The Native control module includes standard Android system controls and custom business controls, which can be used directly in the Android system. The standard H5 tags, extended tags, standard CSS styles and extended CSS styles involved in the front-end framework layer have a corresponding relationship with the standard Android system controls and custom business controls. That is, the UI implemented using Vue will eventually be converted into the corresponding controls and attributes of this library.

[0045] The Native functional module is used for non-UI layer Native function management and provides unified interfaces for video playback, payment, authentication, data storage, image display, network loading, and exposure payment to the upper layer. The Native function API calls involved in the front-end framework layer will ultimately call this functional module.

[0046] The lifecycle management module manages engine instances, including creation, updates, and consumption. This module also employs a multi-level pre-caching strategy for engine instances to address performance issues such as slow page loading and lag when switching between pages on low-configuration devices; see details for the process. Figure 9 .

[0047] The working principle of one embodiment of the present invention is as follows: Front-end developers use Vue to develop business code; the front-end framework layer compiles and parses the Vue code into JS code; the JS engine layer parses the JS code into a DOM tree and passes it to the terminal framework layer; the terminal framework layer parses and maps the DOM tree into Android controls and displays them in Android; for details, see [link to detailed process]. Figure 2 .

Claims

1. An engine system for developing a TV fast application, characterized in that, comprising a business layer, a front-end framework layer, a JS engine layer and a terminal framework layer; the business layer supports an existing Vue interface framework, and a front-end developer directly develops specific businesses using the Vue framework; the front-end framework layer corresponds to the business layer, is extended on the basis of the Vue framework, provides common APIs, thereby realizing compatibility and adaptation of features of an Android TV, and compiles and parses VUE code into JS code; the JS engine layer converts JS into a virtual DOM tree, and then maps UI component tags of the virtual DOM tree to Native components of the terminal framework layer; the terminal framework layer comprises a UI management module, a life cycle management module, a Native control module and a Native function module, is a core layer of the TV fast application engine, and converts front-end page logic into a Native function implementation through the UI management module, the life cycle management module, the Native control module and the Native function module; the UI management module comprises UI structure management and UI rendering management, the UI structure management is responsible for converting a DOM tree parsed by the JS engine layer into corresponding Android controls in a Native control library, and organizing and constructing the controls into an Android View tree, and then notifying the UI rendering management module to draw; the UI rendering management is responsible for drawing the Android View tree constructed by the UI structure management module to an Android display system, and controlling subsequent display refresh work, so as to display the Android controls in the Android; the life cycle management module is used for engine instance management, including creation, update and consumption, and adopts a multi-level pre-cached engine instance strategy.

2. The engine system for developing a TV fast application according to claim 1, characterized in that, the front-end framework layer comprises a DOM conversion module, a tag extension module, a style extension module and a Native function interface module; the front-end framework layer is extended on the basis of an existing vue framework, H5 tags and CSS styles are extended, common Native function APIs are provided, thereby realizing compatibility and adaptation of features of an Android TV.

3. The engine system for developing a TV fast application according to claim 2, characterized in that, the DOM conversion module is specifically that: vuejs converts a template into a rendering function through compilation, a virtual node tree can be obtained by executing the rendering function, when the virtual node tree operates on a model, a corresponding object is triggered, the object calls a function to modify a view; the tag extension module is specifically that: based on H5 tag definitions, rich extension component tags are defined, Native controls are completely covered, and a front-end developer uses the extension tags to use corresponding Native controls.

4. The engine system for developing a TV fast application according to claim 2, characterized in that, The style extension module defines a set of extended CSS syntax based on the standard CSS style, and front-end developers can set the Native control attributes by using these syntax.

5. The engine system for developing a TV fast application of claim 2, wherein, The Native function interface module adds a function extension function library, and the calling of the Native function in the Android TV is realized by calling the function by the front-end developer.

6. The engine system for developing a TV fast application of claim 1, wherein, The JS engine layer includes a Google V8 JS engine module and a JNI interface module; the Google V8 JS engine module converts JS into a virtual DOM tree, and the JNI interface module maps the UI component label of the DOM tree to the Native component of the terminal framework layer.

7. The engine system for developing a TV fast application of claim 1, wherein, The Native control module includes Android system standard controls and custom business controls, and can be directly used in the Android system; the standard H5 tags, the extended tags, the standard CSS style and the extended CSS style involved in the front-end framework layer have a corresponding relationship with the Android system standard controls and the custom business controls, that is, the UI finally converted by using VUE will be converted into the corresponding controls and attributes of the library.

8. The engine system for developing a TV fast application of claim 1, wherein, The Native function module is used for the management of the Native function in the non-UI layer, and provides the upper layer with unified video playing, payment, authentication, data storage, picture display, network loading, exposure and interface of a single bill; the calling of the Native function API involved in the front-end framework layer will finally call the function module.

Images