Vivo official website resource package adapts to multi-scenario applications

This article introduces the concept and usage scenarios of resource packs, and compares several usage scenarios of resource packs. Through this article, you can quickly grasp the use of resource packs, and solve the problem of a single configuration that meets multiple scenarios and multiple styles.

1. 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. Relying on the needs of adapting to various scenarios will only make the configuration background more and more complicated. And some special scenes need to be triggered at special times, and need to be configured quickly by operators, without the need to release the version, and the configuration is correct. The emergence of resource packs is to solve the above scenarios. It can be configured once, does not need to be released, supports preview, and is suitable for all special scene styles. This ability has been used very well on our official website.

2. What is a resource pack?

Files containing static resources such as webpages, JS, CSS, pictures and videos, and compressed packages with certain directory rules, can be quickly online and replaced through background configuration, without version release. The figure below shows a demo resource package directory.

3. Why use resource packs

At the beginning, we developed a function. Even though the design was considered to be more general, there were always deviations in the style during some special festivals. The function could not be satisfied, and the emergency could only be resolved by issuing a version. So there is a resource package solution. This solution only requires the front end to develop a complete resource package according to certain rules, and the resource package analysis is performed on the back end.

The front-end can immediately see the entire page style, and achieve the purpose of configuring it once and quickly going online. This method is more suitable for most scenarios, but it is not suitable for pages that require dynamic data acquisition and user diversion. Most resource packages are static pages. Therefore, under the premise of using the resource pack, you need to evaluate the business scenario yourself.

3.1 Resource pack usage scenarios

1. Solve the limitation that a set of configuration can only adapt to one style, and meet the needs of updating multiple pages and multiple styles at any time.
2. Meet the needs of special event front-end display special styles, such as various festival themes, special event content, mobile phone 360-degree model.
3. It can be used as the bottom line data of each scene, and can solve the compatibility problem of new and old data during reconstruction.

Picture 1:

Figure II:

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 promotion page of X50 Pro+. The two different resource packs achieve the purpose of showing different effects to users. In fact, There is a configuration entry in the background.

It can be seen that this method is very flexible to show different needs.

Fourth, how to use the resource pack

4.1 Overall process

Different resource packages have different rule directories and different parsing rules. Therefore, there is a unified resource package parsing adapter in the background, which corresponds to different parsing methods, and then undergoes a series of parsing operations (mainly JS, CSS, pictures, videos) , JSon file official website rule adaptation logic and relative path replacement) After that, the main page content is stored in the library and cached. Finally, unzip the uploaded resource package and upload it to

On the static resource server. Upload the resource compressed package to the static server. We tried three solutions here, as follows:

4.2 Solution 1: Local decompression

Local decompression is to complete the decompression work of the resource package on this machine, decompress all the files of the resource package to the specified directory of the machine, then parse the compressed main webpage, and replace all the paths in the webpage that refer to static resources.

The following figure shows the local decompression solution

Local decompression is mainly to upload the prepared static resource zip package, specify the decompression path, decompress the zip package through the Zip tool class, upload the decompressed file to the local, and the local analysis is mainly to the main content of the decompressed file. Files such as "index.html" are parsed. The main work of parsing is to manipulate HTML files through jsoup according to certain rules, filter some styles and pages we need and replace the path of static resources, and upload them to your local path instead. The front end directly obtains the data returned by the server and renders it into the page of your resource package.

Evaluation of local decompression solution

• Advantage:

1. The speed of decompressing and parsing resource packs is relatively fast.
2. The resource package file can perfectly decompress the entire file data, and the probability of loss will be much smaller.

• Disadvantages:

1. Files are stored locally, which affects the local storage capacity and is difficult to manage in a unified manner.
2. Files are stored locally, which affects the containerization of subsequent systems.
3. File security can easily lead to social dissemination of illegal files.

4.3 Solution 2: Local decompression + cloud upload

Local decompression is the same as the first solution, after which all decompressed files will be uploaded to the OSS server. The same goes to parse the main file "index.html". The subsequent steps are similar to the first option.

Local decompression + cloud upload solution evaluation

• Advantage

1. Documents are managed in a unified manner, and can support online deletion and arrangement capabilities.
2.  File security. Files uploaded to the OSS storage server are time-sensitive and secure.

• Disadvantage

1. The speed of file upload will eventually lead to the speed of static resource package upload, which is strongly related to network IO.
2.  The integrity of the files is poor. One of the files is not uploaded and does not support rollback, resulting in the unavailability of the entire resource package.

4.4 Solution Three: Cloud Decompression

How to ensure the integrity of the resource package? Idea: Upload a completed resource package to the cloud server, and then decompress it online?

The static resource package will be directly uploaded to the file service system. The uploaded action is an event that triggers the function bound to the event to decompress online, and then pull the decompressed file from the file system to analyze the above solution.

• Advantage

1. To ensure the security and integrity of files, you can set file access permissions to ensure that files are not lost when they are uploaded.
2. The serverless technology guarantees the upload speed and concurrency.

• Disadvantage

1. The support of cloud functions is relatively poor and not very versatile.
2. The size of the resource package will affect the upload and decompression efficiency.

Extension: Serverless computing product-cloud function

1. Cloud functions provide a stateless, short-lived, event-triggered code capability that runs directly on the cloud.
2. The operation of the cloud function is driven by events. When an event arrives, the cloud function will start to run, and it is started on demand, which does not take up many resources. One HTTP request, one file upload, one database modification, and one action can be regarded as an event.

Each request will trigger an event-driven decompression cloud function. The decompression function will start an instance to execute the script and complete the decompression work of this request. The specific decompression script code will not be explained in this article.

When the user uploads the zip package to the specified bucket directory, the cloud function will be triggered, and the cloud function will start an instance to execute the script to help the user complete the decompression of the compressed package.

Five, the benefits of the resource pack

The resource pack solution has been very mature in our team, and it can adapt to a variety of different style configurations, including different pages such as the official website homepage and the official website product details page. Now the system is running relatively stable, and our solution is relatively mature.

As long as the operation students upload different types of resource packages at one entrance, they can complete page configuration of various styles and rules, and truly achieve the realization of a single configuration and multiple styles of functions.

This set of mechanism not only improves the operating efficiency of our operating students by 50%, but also solves the configuration scenarios of big promotions and special styles on holidays.

6. Disadvantages of resource packs

1.  The production of resource packs is uncontrollable, and the cost of adaptation, docking, and testing caused by resource packs produced by different producers are very large.
2. The resource pack is still relatively heavyweight. Some animations, pictures, and adaptation resources are relatively large, occupy more background resources, and have relatively high functional requirements.

7. Future prospects

The above solution is of course not the optimal solution, it is a commonly used solution in this scenario, and of course there is a better solution. In the future, we will consider making common configuration items into a meta-component form, and then use any combination of meta-components to form our final configuration page.

Operation only needs to drag and drop the meta-components, and combine them as you want. The holiday combination becomes a page, and the big promotion combination can also become a page, which is very free. This kind of random combination can be called lowcode mode, which is what we want to do in the future.

8. Write at the end

This article discusses the general idea of ​​using resource packs and solutions to some key technical points, as well as the comparison of various solutions. The third solution is currently being applied on the official website, but it requires the ability of Serverless. During the exploration, we sought the help of operation and maintenance students. Writing the script of the online decompression function is far less simple than the above. Since this article does not give a detailed introduction to Serverless technology, interested students can learn more about this knowledge.

Author: vivo official website mall development team