3/8 share of front-end technology Goddess Festival Sweepstakes

First, the background activity

As a strong team culture of the company, the annual festival 3/8 goddess that is essential.

In general, such an event would like to receive a sufficient effect, and that the high density of people gather is essential (for example, last year organized a large-scale activities to send roses plus lucky draw). It is regrettable that during the epidemic this year, it is unable to carry out this form. then what should we do?

So human thought online lottery (there are two other events, because there is no participation, so I will not list here too), I am honored, human let me in charge of the front, and the rear end of another department an excellent colleague with the completion of the entire online sweepstakes, of course, there is a serious and responsible, very good UI colleagues.

The raffle is scheduled for noon Friday 3/6, issued in the form of registered h5 application development time by about two days into the Group APP.

Second, the preparation

Before the formal start development, human has prepared for us a complete goddess table (top-secret information, shall not rumor!). As the Group can not guarantee the accuracy of user data, all profile data used in the system (except the employee code) will come from the table.

In view of my colleagues and the back end is the first time to the group APP embedded applications, the first step is a natural development of third-party document you want to read the group.

We learned by reading a document, to be embedded within the APP general process h5 page is:

1. Build a website accessible to the public network
2. An application to register within the APP, fill out the application parameters, and fill out the above website home page link address
3. Through a series of back-office services to interact with the APP Group, to get the current user data

The first step is basically no different from conventional building site.

The second step is to log Group APP, create a new application. Due to the general lack of user permissions issued to others, so this step is mainly done by the relevant personnel manpower.

The third step is to obtain user data. Since it is a draw, then bound to know who the lucky draw. As embedded in the APP Group h5 applications, we need to get data from back-end server group. This process is roughly as follows: When the user clicks on the application registered APP, APP will send a request to our servers get home at the same time, when a request is sent home, will add a temporary code parameters behind url, effective one minute. Server intercepts the request may configure the interceptor, the parameter extraction code. Staff then encoded by an APP requests a specific format of the backend server several interactions, to obtain the parameters for the user and stores the acquired session back end.

Next is very simple, the Group's APP will show our home in built-in browser (webView), after which the user is responsible for the operation and process control by our own code.

Third, technology selection

Here refers to the front end of the selection technique.

As the company in terms of front-end we have basically been adopted vue technology stack, so here I would not hesitate to choose the vue for front-end development. On the basis of vue on, I chose Promise-based library of http: axios; vue official support routing component: vue-router; additionally introduced mockjs, simulation back-end request during the development phase, in order to improve the parallel development capabilities. These are basically a standard easiest vue project.

In addition to basic technical framework, and one had to face the problem that the font problem. As a UI, in the design of the active page is necessarily a beauty as the top priority, so basically is unlikely to opt for a basic web font format. In general, UI will provide the font files they use front-end: xxx.ttfand this is basically the font file will 10MB or more.

Part of the text within the browser page, and part of it will have to wait until the download is complete font file rendering text on the first page displayed in the browser's built-in font format font file before the download is complete. In either case, allowing users to download as a more than 10 megabytes of font files rather than seventy-eight seconds to wait to see the final page is not a front-end developer in an acceptable range.

Even change the font, or will face the same problem. If you want to use all of the paragraphs of text instead of images is not realistic, after all, text template also interspersed with small amounts of dynamic data.

then what should we do?

Here I would like to introduce you a grand nodejs based font file compression tool: font-spider. Its compression principle, by font-spider xxx.htmlcommand, automatic identification of third-party fonts used in the document, and then check the file in which the text uses the font (We temporarily called the target text), and finally excluded from the full target font file All language other than text.

A complete font library has more than 50,000 Chinese characters about, but this project which only uses about more than two hundred. Use font-spiderAfter elimination of the character more than 50,000 unused, font size from 13M compressed file directly to 200KB, and generate the four major browsers compatible file format from a ttf file format, is simply fantastic results !

Fourth, the main technical implementation

Completed preliminary technical groundwork, I received from the UI design - a more than 160 trillion, Mito psd format (in order to protect the intellectual property of the UI, there is not a high-definition big picture)!

Here cut plan to work on further ado. Figure been cut after the completion of a total of more than a dozen pictures, stored in the project assets/imgfolder backup.

Then the font file compression. First, run the following command to install font-spider:

npm install font-spider -g

For simplicity, I have given a complete copy of manpower into a single compressed HTML file format is as follows:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      @font-face { 
        font-family: '华康方圆';
        src: url('./HuaKangGuJiMuLan-Regular-2.eot');
        src: url('./HuaKangGuJiMuLan-Regular-2.eot?#font-spider') format('embedded-opentype'),
          url('./HuaKangGuJiMuLan-Regular-2.woff') format('woff'),
          url('./HuaKangGuJiMuLan-Regular-2.ttf') format('truetype'),
          url('./HuaKangGuJiMuLan-Regular-2.svg') format('svg');
        font-weight: normal;
        font-style: normal; 
      }
      body{
        font-family: '华康方圆';
      }
    </style>
  </head>
  <body>
    <p>
		xxx(文案数据)
    </p>
  </body>
</html>

Since the set of all text within the body using body Huakang radius, so here it appears text will be saved to eventually generate the font file. The full font files in the same directory of the HTML

open cmd command line, enter the path to the current folder, enter:

font-spider spider.html

Compression results are as follows:

the original file is automatically backed up to the .font-spiderfolder. The resulting four font file into the project assets/fontfolder backup (although there are four font files, but in the end it supports the browser will only download the first font file, a plurality of formats compatible with all major browsers ).

Here is the real front-end code written.

The main activities include four pages: Page lottery winners in Beijing goddess page, non-event in Beijing goddess page, ad pages male staff. Because it is a single-page application, in fact, here's four pages refers to the four components, the APP.vuecomponents of the current user to determine which component should jump to the display through the route.

To determine which display component, of course, you must know the current parameters of the user, such as sex, whether in Beijing, whether lottery, lottery results, etc. These parameters interfaces through the background getUserprovided. Therefore, before displaying the page, the front will initiate a request to the backend, to get the current user data object. Routing logic is as follows:

1. Sex for men, male staff loaded directly advertising pages
2. Sex for women, not the lottery, lottery Jump to page
3. Sex for women, has been the lottery, the winning jump to the page, showing the award-winning results

Jump to page after the lottery, if the user clicks on the lottery, then initiate a request to the backend. If the non-Beijing, no data is returned, just record the lottery, according to the front end of user parameters, displays an activity page. If you are in Beijing, the back-end based on the remaining number of current various prizes, in accordance with the calculated probability of the prize (according to human feedback, we are in the final prizes are in line with their own mind, do not know the back-end big data analytics , as the front end, we do not care about this ha ha), get to the front after winning type, copy and display the corresponding picture prize.

If you are involved in the actual lottery goddess, you should see at the click of the envelope when the lottery winners page has a short fade-in effect, and letterheads have a little animation twitch upwards. About realize fade-in effect is relatively simple, just put the routing component on a transitioncomponent, the configuration of css animation to fade. But twitching upward effect on the cost of stationery slightly larger.

Here I am talking about is the price, not difficult. Twitch because of the difficulty to achieve the effect is not large, the following code can be achieved:

<script>
  export default{
    methods: {
      flowPaper(){
        setTimeout(function(){
          let paper = document.getElementById("paper");
          let content = document.getElementById("content");
          let award = document.getElementById("award");
          paper.style.top = "20%";
          content.style.top = "27%";
          award.style.bottom = "10%";
        }, 100)
      }
    },
    mounted(){
      this.flowPaper();
    }
  }
</script>

<style>
.paper, .content, .award{
    transition: top .6s;
    -moz-transition: top .6s; /* Firefox 4 */
    -webkit-transition: top .6s; /* Safari and Chrome */
    -o-transition: top .6s; /* Opera */
	...
  }
</style>

Just a few lines of js, css plus a transition animation is defined on it. However, the extraction of the animation, change of the front end is patterned.

If not drawn animation, the front end can put background, stationery and decorations on a map stationery cut, leaving only print text, and display the award-winning picture position. But to achieve drawn animation, these three layers must be segregated, because only in the middle layer background stationery and decorative objects, it is possible to achieve twitching effect. So I cut the picture above four pictures: decorations on the background, stationery, prizes and stationery. Background, stationery and decorations can be used between five prize winners page, and prizes will need to be set dynamically based on the winning result. Together with a copy of the three paragraphs, to complete the composition of the award-winning page. Next, only need to set a 100 millisecond delay, modify stationery position, and prizes the picture with paragraph js, css transitions with defined, can produce the effect of a soft extraction stationery.

In addition, since the percentage of highly stationery uses, so its length on each resolution cell phone is not fixed, but the line height of the text is difficult to ensure that exactly match all of the height of the screen, the result of that it is either prizes small screen on the phone is blocked, either on a large-screen phone text huddled affect aesthetics.

To solve this problem, I conducted a simple analysis of page composition (due to time constraints, line height adaptive problem to do a little bit rough). I found on almost all mobile phones, the height of the text plus pictures of the prize are about half the height of the screen, and the picture they can prize a fixed size, so the height of the entire paragraph is about half the height of the screen height minus prizes. Dividing the result by the number of rows of substantially, you can get a rough value of the row height. This dynamic setting row height value js, it can greatly improve the page (Having said that, but the real fight, tune about an hour to get adjusted to basically satisfied) ability to adapt to different resolutions of mobile phones.

Another problem is that the page is returned. Within APP Group provides a return key, in the original version, I found that when smoked after the award to click on the back button, will appear white pages, but what reason did not clear for a long period of time. After repeated tests, I found that actually click on the back button behavior with one click your browser's Back button is the same, so I transferred to the browser to analyze how to solve. Here is a page of routing parameters:

http://xxx/indexhtml#/WomanPage

I found after clicking the return key, the route becomes the following way:

http://xxx/indexhtml#/

Now the white pages. So the question is quite clear, because I'm not with routing tables /corresponding components, so nothing can render. I was thinking the solution is in the routing table with a /corresponding components, and then look for a temporary job as a return UI page, to write greetings or something (yes, I confidently asked for a picture with a nice UI ).

UI's picture to me, put up, found the results were good. But as a front end, it always felt this question is not simple. He then went to check the vue-routerrelevant information, suddenly thought, if this.$router.replacein place this.$router.push, would not that solve the problem?

Sure enough, now one o'clock return, you can successfully exit the page. But human little sister happens to fancy just good return page, we can we supposed to do, then add back the pictures (a bug in turn demand touching story)!

Fifth, completed on-line

This is nothing to say it, the technician responsible for importing data, start the service; human side to configure the application address APP and icon, select the visible range of the company owners. 11:38, goddess have to pick up the phone, click on the lottery, gifts afternoon to the station, a successful event, clapping to celebrate!

In all of the features, my favorite is the stationery upward drawn animation effects. Although not difficult to implement, but I want to feel every goddess, you are the prizes are not prepared in advance, it is indeed you just ripped out of the envelope. I put the 0.6 seconds of animation known as "0.6 seconds of surprise," as my gift to the company more than 300 goddess!