Design and implementation of template + data separation rendering method

a background1 status

• Templates are stored on the back end
• PHP Output page HTML structure for page rendering
• Ajax requests that require a redo of the structure when the PHP output HTML structure
• Builder makes static page structure
• Jser Complete page Interactive logic development

2 Insufficient

• Template data cannot be stored locally, resulting in a huge amount of data requests per open page
• Data is read from the Access Layer Web server every time, and there is no reasonable use of CDN to accelerate static template content
• High cost of joint adjustment, not conducive to front-end control page display and interactive development

3 Solutions

• Back-end direct output of JSON data
• Trying to store the template of the rendered page on the front

4 Technical Route5 theoretical significance

• Save the HTML template with a CDN, it seems that the first request will use a bit more resources, actually the consumption is not very large, and multiple requests can reduce the download volume
• Leverage caching to improve performance
• The cost of the joint adjustment is greatly reduced, the backend only needs to output JSON data according to the rule, the front end can control the page display more, reduce the amount of bug

two scheme design based on template and data separation rendering method1 Ejs Template Introduction Official API Address: http://www.embeddedjs.com/The official API introduction is very clear, but also most of the common methods of template. Here are a few special uses:

• Customizable functions

Supports shortcuts to commonly used HTML tags, just like Ruby on the rails framework, making the code more concise.

• Support for template error prompts

• In addition, EJS supports Nodejs

2 Introduction to Pageletview rendering components

• Pageletview Output module According to the module of the page id,css,js,html

3 Ejs and Pageletview Fusion scheme design PageView when rendering the page, it is the sub-module to render. This way is to realize the important rendering of bigpipe, then we need to do not change the original pageview based on the transformation. That is, in the original technology, more than two attributes passed to the STK.pageletM.view method parameter, a property named data, used to store JSON data for the front-end use, and another property named template, used to store the module template file.

However, because of the number of modules on the page, there will be how many template files, after the implementation of this rendering, found that if a page of the module is more, it will give the page rendering a certain burden, so decided to a page template merged into a template file, This will only need to request a template file. The design is as follows:

the realization of three-mode based on template and data separation rendering1 Template delivery Method Ejs after getting the template and data, perform the rendering. Data can be in the pagelet to get the data, pass through the parameters, and each module of rendering, the need for dynamic Transfer module template, it is impossible to write directly $import Ejs file, it is impossible to $import write to Pageletview file. There are two ways to solve this problem.

• Set the template as a global variable
• Using Listener broadcast event snooping

> Obviously, the first way to set the template into a global variable is that there is a lot of risk, which can cause confusion and disorder, which is not conducive to maintenance. So we chose the second approach, listener the event broadcast. Because the second approach, where the need to use the template, we set up a pipeline, one-to-one listening template broadcast, from the Ejs template to receive, so as to avoid the problem caused by the global.

 2 implementation of no-wait template rendering         However, there is a problem when using the listener event.         because the students familiar with the listener event know that the incident fire and event register are sequential, register is in front, fire is behind, that is, when Ejs need to use the template, We will use the Listener register method to bind the event before we can get the template fire out, then it is easy to think of the merged template file A.js placed in the Pageletview rendering module, but placed in the back we can not hear the corresponding module Pageletview has been completed, at this time if the use of settimeout, although the way to solve the problem but there is a great disadvantage, Because first, settimeout needs to consume performance, rendering the page experience is very poor, second, we did a test, if the settimeout time parameter is less than 1000ms, successfully rendering all modules can only be a matter of chance.         How to solve this problem, we finally think of a way to use two broadcast to solve.         First, we put the template merge A.js file in Pageletm (Pageletm call Pageletview method) before rendering, register a broadcast, broadcast the name of Id+ ' _ Temp ', in this broadcast we go to the template fire out, fire parameters are ID.              Second, we register an event in the Ejs file, which is the module ID (ie pid), then fire an event, fire parameter is id+ ' _ Temp '               The entire delivery step is:        First Ejs file listener template file, Then the template file fire out of the template, the whole purpose is achieved.         This process description         Description: First page loading template file, template file monitoring Pageletview file redAy listener event, callback function fire out "template", then page run Pageletview file, pageletview file registered template file ready event, and then PageView file issued template Pagelet already Ready signal. In this way, when the Pageletview executes, the template tells the Pageletview template is ready, listen to templates ready callback function can receive templates to complete the module and data splicing. This allows for a no-wait data-add-template rendering.     backwards compatibility in   3 Pageletview           due to the way Weibo is used today, the template is placed on the back end, and the front end is taken to the back-end HTML, Then render, and if you use Template+data for page rendering, we can do backwards compatibility. For example, if the data! = undefined is rendered by template+data, it is rendered in the original way.      4 to achieve trans-request template rendering         You know, if the front end needs to change the innerhtml of a node when the front-end Ajax request succeeds, The backend will return a piece of HTML code, and when we click on the Feed page, we may waste a lot of template traffic, if the template exists at the front end, the backend only need to provide the data required for each feed, which can save a lot of resources.         It's easy to do this, just follow the Pageletview, but there's a problem with that. The front end to get the template and data splicing good HTML structure, need to know how to deal with this HTML, so we put inserthtml integrated in Ejs, by passing the form of parameters, to let Ejs execute innerHTML or inserthtml (such as).       5 for simple use of Ejs files         Every time we need to register an event and throw another event within this event, it's very inconvenient to use. After analyzing and designing, we decided to encapsulate the registration event and fire event in the template, and we can achieve the effect by passing only a few parameters during the call. such as:        Template file reference sedejstemplate.js, business file reference $.kit.dom.ejs file (Pageletview reference to $.kit.ejs is a special case).                  6 template+data use steps (very simple)         The first step: write the template file.                              Step two: Use $.KIT.D Om.ejs ();                  parameter description:

Design and implementation of

Template + data separation rendering method