This paper introduces the concept and usage scenarios of resource package, and compares several usage schemes of resource package. Through this article, you can quickly learn how to use resource packs to solve the problem of multiple scenarios and styles in a single configuration.
I. Business background
With the in-depth development of the business of the official website project, simple configuration can no longer meet the needs of various complex scenarios, and adapting to the needs of various scenarios will only make the configuration background more and more complicated. And some special scenarios need to be triggered at a special time, and the operation personnel need to do fast configuration, no version, configuration is correct. Resource packs are created to address this scenario. It can be configured once, does not require release, supports preview, and is suitable for all special scenarios. This capability is already in good use on our website.
What is a resource pack?
Compressed files that contain static resources such as web pages, JS, CSS, images and videos and have certain directory rules can be quickly replaced online through background configuration without version release. The following figure shows a Demo resource pack directory.
Why use resource packs
At the beginning, when we developed a function, even though the design was generally considered, there was always a deviation in the style on some special holidays, and the function could not be satisfied. In case of emergency, we could only issue a version to solve the problem. Therefore, the solution of resource pack appears, which only needs the front end to develop a complete resource pack according to certain rules, and the back end to analyze the resource pack.
The front end can immediately see the whole page style, do configuration once, the purpose of fast online. This approach is suitable for most scenarios, but is not suitable for pages that require dynamic data acquisition and user diversion. Resource packs are mostly static pages. Therefore, it is necessary to evaluate the business scenario on the premise of using resource packs.
3.1 Application Scenarios of Resource Packages
- To solve the limitation of a set of configuration for only one style, to meet the needs of multiple page style updating at any time.
- To meet the needs of displaying special styles in the front end of special events, such as themes of various festivals, contents of special events, and 360-degree models of mobile phones.
- It can be used as the bottom data of each scenario, and can solve the compatibility problem of old and new data during reconstruction.
Graph one:
Figure 2:
Figure 1 and Figure 2 are two different resource packs. Figure 1 is the 360-degree model of X50 Pro+, and Figure 2 is the static publicity page of X50 Pro+. The two different resource packs achieve the purpose of showing different effects to users.
This is a very flexible way of presenting different needs.
How to use resource packs
4.1 Overall Process
Different resource bundles have different rules directory, parsing rules is different also, so background have unified analytical adapter bundle, corresponding to different analysis method, and then after a series of analytical operation (mainly JS, CSS, images, video, JSon file website rules adapter logic and relative path to replace) after the main page content library and into the cache. Finally, decompress the uploaded resource package and upload it
Static resource server. Uploading the resource compression package to the static server We tried three schemes as follows:
4.2 Solution 1: Local Decompression
Local decompression is to complete the decompression of the resource package on the local machine, decompress all the files in the resource package to the specified directory on the local machine, and then parse the compressed main web page to replace all the paths that reference static resources in the web page.
The following figure shows the local decompression scheme
Local decompression is mainly to upload the static resource ZIP package, specify the decompression path, decompress the zip package using the ZIP utility class, and upload the decompressed file to the local. Local resolution is mainly to parse the main file such as “index.html” in the decompressed file. The main job of parsing is to manipulate the HTML file through Jsoup according to certain rules, filter some of the styles and pages we need, and replace the path of static resources with that of uploading to your local path. The front end directly takes the data returned by the server and renders it into a page for your resource bundle.
Local decompression scheme evaluation
- Advantage:
- The speed of decompressing and resolving resource packages is relatively fast.
- Resource pack files can be perfectly decompressed full file data, the probability of loss will be much less.
- Disadvantage:
- Files are stored locally, which affects the local storage capacity and makes unified management difficult.
- Files are stored locally, which affects subsequent system containerization.
- File security, easy to cause illegal files to spread socially.
4.3 Solution 2: Local Decompression + Cloud Upload
Local decompression is like the first solution, and all files extracted will be uploaded to the OSS server. Do the same for the main file “index.html”. The next steps are similar to the first scenario.
Local decompression + cloud upload solution evaluation
- advantage
- The file has the unified management, can support the online deletion, the arrangement ability.
- File security: Files uploaded to OSS storage servers are time-sensitive and secure.
- disadvantage
- The upload speed of files eventually leads to the upload speed of static resource packages, which is strongly related to network I/O.
- The file integrity is poor. One file is not uploaded and cannot be rolled back. As a result, the entire resource package is unavailable.
4.4 Solution 3: Decompressing the cloud
How do I ensure the integrity of resource bundles? Upload a completed resource pack to the cloud server and unpack it online.
The static resource package is directly uploaded to the file service system. The upload action is an event, which triggers the function bound to the event to decompress the file online and then pull the decompressed file from the file system for parsing.
- advantage
- To ensure the security and integrity of files, you can set the access permission of files to ensure that files are not lost during upload.
- Ensure upload speed and concurrency through Serverless technology.
- disadvantage
- Cloud functions have poor support and are not very general.
- The size of resource packages affects upload and decompression efficiency.
Extension: Serverless computing products – cloud functions
- Cloud functions provide a stateless, transient, event-triggered code capability that runs directly on the cloud.
- The operation of cloud functions is event-driven. When an event arrives, the cloud functions will start and run on demand without consuming many resources. An HTTP request, a file upload, a database change, an action can be an event.
Each request will trigger an event driver of the decompression cloud function. The decompression function will start an instance to execute the script to complete the decompression of the request. The specific decompression script code is not described in this article.
When the user uploads the ZIP package to the specified bucket directory, the cloud function is triggered. The cloud function starts an instance to execute the script to decompress the zip package for the user.
5. Benefits brought by resource packs
The resource package scheme has been used in our team is very mature, to solve the adaptation of a variety of different style configuration, including the official website home page, official website product details page and other different pages. Now the system runs stably, and our solution is mature.
Operation students can complete page configuration of various styles and rules as long as they upload different types of resource packages in one entrance, and truly achieve the realization of single configuration and multiple styles of functions.
This mechanism not only improves the operation efficiency of our operation students by 50%, but also solves the special configuration scenarios of big promotion and holidays.
Disadvantages of resource packs
- The production of resource packs is not controllable, and the adaptation cost, docking cost and testing cost of resource packs produced by different producers are very large.
- Resource package is relatively heavyweight, some dynamic effects, pictures, adaptation resources are relatively large, the background resource occupation is more, the functional requirements are relatively high.
7. Future prospects
Of course, the above solution is not optimal. It is a common solution in this scenario. Of course, there are better solutions. In the future we will consider making common configuration items into meta-components, and then using any combination of meta-components to form our final configuration page.
Operation only need to drag and drop the components, how you want to combine how to combine, the combination of festivals into a page, promote the combination can also become a page, very free. This kind of random combination you could call lowcode mode, and that’s what we want to do in the future.
Write at the end
This paper discusses the general idea of using resource packs and some key technical points of the solution, a comparison of different solutions. At present, the third scheme is being applied in the official website, but it requires the ability of Serverless. During the exploration, we sought the help of the operation and maintenance students, and it is far from simple to write the script of the online decompression function. Since this limitation does not provide a detailed introduction to Serverless’s technology, interested students can learn more about it.
Author: Development team of Vivo official website mall