This paper mainly introduces the business background and design implementation of the poster system. The author is Liu Zhenli, the head of the front-end infrastructure of New Oriental Online, who is mainly responsible for poster system, courseware platform and other basic services.

preface

As is known to all, poster, as one of the most common forms of poster, is widely used in advertising and other scenes. With the rapid development of the Internet, network marketing has gradually become an important means to attract and attract customers, and various forms of posters also play an indispensable role in online marketing fission activities. Compared with traditional posters, online posters are more flexible and changeable. They usually produce different posters for different users to meet the personalized demands of business. Therefore, how to produce high quality posters steadily and efficiently becomes particularly important. The next installment in a series of articles will show how the front end can build an efficient poster system.

In order to facilitate understanding, first of all, it should be clear that the poster mentioned in this article refers to the poster picture, usually with two-dimensional code or CHRYSANTHEMUM code, guide users to visit activities, add wechat, follow the public account, etc. For example, the poster below was created in the poster system.

Business background

In the business scenario of user growth, various fission activities represented by groupings and introductions will use posters as the carrier to attract users’ attention through channels such as community or circle of friends, and finally attract users to participate in these activities. In order to improve and evaluate the effect of the campaign, the poster will contain some personalized copywriting and information of the user. Usually, these posters are dynamically generated during the activity, and the posters designed by the designer cannot be directly displayed on the user side. Obviously, designers can’t make a poster for every user, so there needs to be some kind of tool or system to produce it efficiently. Based on such business background, we have developed a set of poster system by ourselves, which has opened up all links in the production and use of posters, improved the production efficiency of posters and reduced the development cost of posters.

The poster system is connected to the company’s design material library, providing a huge amount of materials, which facilitates the production of posters by designers, product, operation and other related personnel. The poster system supports online editing, and can parse the design manuscript into a poster with one key, which reduces the access cost of the poster system. In addition, the poster system is generated in the server side of the poster, poster clarity and stability has a reliable guarantee. Any system is not overnight, there will be an evolution and iterative process, the poster system is no exception. Next will focus on the poster system design implementation process.

Technical solution

In essence, a poster is a picture. In various activities, the poster will be forwarded or shared and spread. When other users see the poster, they will pay attention to the activity. So how to produce the poster picture and show it to the user? The plan of the poster system is to template the production and production of posters, and engine the drawing and rendering of posters. Through the analysis of the poster, the content elements of the poster can be abstracted into two categories:

  • Basic elements: The most basic elements of the poster, includingline,The geometry,The picture,The text 等
  • Business element: An element with business attributes, such asQr code,Small program code,Head portrait 等

Stencil is to use the above elements as the smallest unit to describe the poster with configurable data structure. These configuration data are called poster templates. Poster templates can be generated through the poster system template editor.

Enginization is to provide unified poster rendering ability, analyze poster template and receive personalized parameters, and finally draw poster pictures to show to users. Poster templates can be drawn into poster pictures through the rendering engine of the poster system.

Poster template

The stencil based idea is to define a DSL describing the poster template, and the rendering engine can parse and render the DSL. In the implementation, JSON is used as a DSL to describe the poster template. The core function of the poster system is to store the poster template generated by dragging and dropping as JSON data, and then re-render the JSON data as posters for users in operational activities. The following is an example of the generated JSON data:

{
  "width": 1920."height": 720."textArr": [{"id": 3."drawType": "text"."text": "The Front end achieves an efficient poster System"."x": 100."y": 102.6."zIndex": 3.// ...
    }
    // ...]}Copy the code

Posters apply colours to a drawing

In the initial implementation of the poster system, rendering the poster images was implemented on the client side. However, with the continuous iteration of the system, it is found that client-side rendering has some disadvantages, and these problems cannot be solved. Finally, the poster was transformed into server rendering, and the following two rendering methods were introduced respectively.

The client renders the poster

Client rendering posters, as the name implies, render posters on the user’s device (e.g. page, client, etc.). We have researched the mainstream poster rendering solutions in the industry, which can be summarized into the following two categories:

  1. Use HTML elements to make and render posters byhtml2cavnasConvert to picture
  2. Use Canvas to develop and draw posters, and generate pictures from Canvas

The common point of these two solutions is to generate posters on the client side. We compared the two solutions in terms of development efficiency, hands-on cost, generation performance and poster clarity:

plan html2cavnas Canvas
Development efficiency high low
It costs low high
Generates performance low high
Poster definition low high

We have carried out a quick verification of HTML2CavNAS scheme, which has the following fatal problems in practical application:

  • Poor quality In some cases, the resulting poster is so blurred that the QR code on the poster cannot be recognized by the phone
  • Poor performance On low-end Android phones, poster generation will fail due to compatibility issues

Initially, the process of rendering and drawing a poster image in the poster system was implemented on the client side. The rendering engine draws the poster on the Canvas and then turns it into an image for users to download or share. The performance bottleneck of poster rendering engine is influenced by various factors such as client machine and network environment. Despite several rounds of optimization of the rendering engine, it still takes a long time to generate posters on weak network environment and low performance Android machines, and the existing problems are difficult to solve. Based on the comprehensive consideration of the user network environment, device performance, client network concurrency limit and other aspects, the final decision is to make the poster generation solution service-oriented, and the poster configuration and rendering are all migrated to the server to complete. Instead of rendering the poster on the client side, render the poster on the server side.

Server-side render posters

Through research, it is found that there are two main ways to realize rendering posters on the server:

  1. withPuppeteer 或 PhantomjsScreenshot generated picture
  2. withnode-cavnasDraw and export the image

Puppeteer or Phantomjs are implemented in a way similar to html2Canvas in that they need to render the poster on the web page. However, there are differences in the way to generate the image. The former is to take a screenshot of the web page, while the latter is to convert the web page into Canvas and export the image. Finally, we adopted Node-Canvas for the design and development of the server-side rendering engine in combination with the ideas and solutions of client-side rendering engine development. In the poster editor, posters are rendered in Canvas, and the server can use Nod-Canvas to unify a set of rendering engine SDK. This enables rendering of posters on both Web pages and Node services.

Although the poster image generated for the C-side user is rendered on the server side, the real-time rendering of the poster in the template editor is still rendered on the Web side. As a result, client-side rendering is not completely obsolete.

System implementation

The whole poster system is divided into two parts: poster management background and poster rendering service:

  • Poster management background design, operation or product can make posters or templates in the poster management background. In the visual editor, users can edit posters by dragging and dropping, or make posters by importing design draft.

  • Poster rendering service This service will render the poster template into a poster and upload the rendered poster to CDN; The service system obtains the CDN address of the poster picture through THE API interface and displays the poster picture to the user.

Poster Management background

The main function modules of the poster management background include template management, material management, poster editing, etc., as shown in the picture below:

Among these functional modules, the most complex module is poster editing. Poster editor support static poster editor and dynamic poster template editor. The editing area of the poster management background is as shown in the figure below:

Poster Rendering Service

The service verification poster system adopts the service registration mechanism. When accessing the poster system, the access party needs to register in the system to obtain the corresponding service ID and key. When using the system to generate posters, the service ID and key need to be used to complete service verification before poster rendering.

Before rendering the poster, first check whether there are posters with the same rendering data in the cache. If so, the CDN link of the poster is directly returned. If not, template parsing is required. The elements in the template are parsed and rendered to the Canvas Canvas, and the final image in PNG format is generated and uploaded to THE CDN, and the CDN link is stored.

Storage control In order to improve performance, the poster rendering service will cache the rendered posters. The same user will get the poster link from the Redis cache when he visits the poster of a certain activity several times in a time end, without the need to re-render the poster. In addition, the link address of the poster image is also stored in the MYSQL database. Poster rendering consumes a lot of server resources. By storing and processing the poster link, the throughput of poster rendering service can be improved.

Effect of online

Poster system has been widely used in growth, double division, sales and other businesses, can quickly produce posters for business systems. The poster system lowers the threshold of making posters, enabling non-designers such as product and operation personnel to have the ability to make posters. In the poster system, non-r&d personnel can use the template library and material library to edit and generate static posters and directly export them. At the same time, they can also generate posters in batches based on the poster template. Developers can develop and configure custom poster templates, which can be dynamically generated using service interfaces.

With the application of poster system more and more widely, the performance of poster rendering has been put forward higher requirements. Server-side rendering ensures the speed and quality of poster rendering. Usually, it only takes 90ms to render a simple poster, while the rendering time of a complex poster is around 300ms.

conclusion

In the new Oriental Online business scenarios, the poster system has played an irreplaceable role. This paper mainly introduces the business background, technical scheme and system implementation of the poster system. A lot of the technical details (such as rendering performance optimization, DSL template parsing, editor implementation, etc.) are not covered for space reasons and will be covered in a future article. Pay attention to the TWO-DIMENSIONAL code of the poster in this article, you can pay attention to the follow-up update in time.

Search for “ikoofe” on wechat, follow the public account “KooFE Front-end Team”, and publish front-end technical articles irregularly.