The shadow of the author | heng-fei wang (bearing)

This article is shared by Wang Hengfei (Cheng Yin), a front-end technology expert of Fliggy Travel, on aliyun Serverless Developer Meetup in Shanghai. Click to view live playback: developer.aliyun.com/live/246653.

In the past two years, Feizu front-end has been actively engaged in Serverless construction and practice. From 2019 to 2020, we, together with the Group Node architecture group and r&d platform, completed the construction of basic capacity and business pilot, becoming the first BU of the group to implement Serverless practice. From 2020 to 2021, we began to promote the use of Serverless in Feizhu on a large scale. Serverless can be seen from the whole link of shopping guide to the core, middle and background. In this year, we completed the transformation of Serverless from a business pilot to a productivity tool. This article will mainly share the practical achievements of Flying Pig based on Serverless and what it wants to do in the future.

Serverless usage scale

The size and importance of Flying Pig Serverless will change greatly from 2020 to 2021, mainly in three aspects:

  • First, the size of the function group more than doubled, and the peak Qps increased by 650%.
  • Second, the number of FaaS developers increased by 560%, with more than 80% of the front-end staff involved in FaaS development.
  • The third is the performance of influence. At present, not only the front-end of Feizhu is familiar with Serverless, but also many people on the client are involved in the development of FaaS. More importantly, the backend and product students also know that Serverless is capable of service development.

The specific data are as follows:

Why Serverless

Why are Flying Pigs so eager to bring in Serverless? This is mainly due to the consideration of the upgrade of the front and back end R&D mode and the expansion of the front end functions. Here is a review of the development of the front end architecture and the evolution of the R&D mode of Flying Pig.

1. Development of front-end architecture of Flying Pig

Flying Pig front-end architecture is summed up from the original pure front-end development, to solve the multi-end consistency of cross-end development, and then to take over the view server logic of the front-end development, Serverless is the core of the front-end upgrade transformation.

2. Evolution of R&D mode

Why do front end people have to be involved in service side development? From the perspective of the evolution of the front and back end R&D mode, it has mainly experienced the following three stages:

The first stage is resource decoupling. In this stage, the front end separates static resources and deplores them to THE CDN to solve the coupling with the backend service co-deployment.

The second stage is template decoupling. Most of the front-end and back-end decoupling we mentioned before refers to template decoupling. An incomplete solution is rendering decoupling, where the server puts an empty part of the template content entirely depends on CSR.

Third stage is to try to decoupling, on the one hand, is due to the client system and the limitation of the front-end system of offline, end side view of dynamic requirements for extremely high, not the front end of the service side ability can only be the view of dynamics on the service side do, on the other hand, due to the end side architecture for the special requirements of data interface protocol, need the server to transfer agreement, This causes the coupling of the front and back end views. In order to remove this coupling, the front end uses Node.js to Do BFF layer to take over the logic of the view layer. Serverless is the best choice for the front end to Do BFF development.

3. Why Serverless

In fact, before Serverless appeared, front-end tried to use Node application to do BFF layer development. In 2017, Feizhu also used Midway + React SSR architecture to node Feizhu PC master link homepage, search, product details, order details. However, application-level development has several problems on the front end:

  • High development cost: Node application-level development still has a certain front-end development cost for beginners. According to rough estimates, the cost of getting started is at least 3 people/day, not including a series of capabilities such as performance optimization and memory leak detection.

  • High operation and maintenance costs: Docker, image, machine log view, domain name application, machine replacement and a series of operation and maintenance capabilities are very complicated for the front-end, which is also an important reason that is doomed to fail to be promoted.

  • High machine cost: the front-end is excessively inclined to the problem of discrete application and low machine utilization caused by the front-end architecture design when using application development. The fundamental reason is that the front-end is using the thinking of page development to do application development, resulting in a pile of new applications occupying a large number of idle machines.

The period from 2017 to 2019 was also two years of stagnation of the Group’s Node development. At this stage, due to the idle problems mentioned above, Node development could not be rolled out on the mobile end. Front-end Node was mainly developed in the middle and background. Until the dawn of Serverless wave, here’s what Serverless can bring to the front end:

Node FaaS integrates the middleware into the context of Runtime, and the development is called through Api to achieve extremely low start and development cost. As long as you can write JS, you can start FaaS development within 0.5 people/day. At the same time, the bottom layer of Serverless container shields the operation and maintenance of the container to developers through unified machine management, unified image, flexible scheduling, on-demand payment and other methods. The combination of the two perfectly helps us solve the three major problems encountered in the previous Node application development. Thus, the last piece of the jigsaw puzzle of the upgrade of the front and back end r&d mode is completed. The front end starts the cloud + end transformation.

Flying Pig cloud + terminal core landing scene

1. Overview of landing scenarios

From the home page to search, channel, and then to the big promotion conference, Serverless FaaS realizes the full link coverage in the Flying Pig shopping guide, becoming one of the common productivity tools in the front end of flying Pig. In addition, FaaS has been fully used in the development of the middle and background, and enabled the students on the client side. The package volume platform on the right side of the figure below is developed by the students on the Flying Pig client using Node FaaS.

2. Cloud + terminal scenario – Data protocol processing

Data protocol processing is the most common scene in BFF layer, including interface merging and conversion from Do to Vo, etc. More than 80% of FaaS scenes at THE C-terminal of Feizhu are used for data protocol processing. Protocol conversion through FaaS can liberate the server and enhance the front end’s control of the visual layer, which can be described as killing two birds with one stone.

The most recent example (shown in the figure below), it is a flying pigs details page, the content of the page for China, evaluation contents China, interactive, algorithms, such as more than five interfaces, the interfaces are ready-made dispersed in each system, for the front-end raised five interface is certainly don’t want to in the end, no matter from the consideration on the performance and structure design, is not reasonable, This is where a server-side interface merge is required, and FaaS is well suited for this, greatly reducing the lead time of requirements by assembling atomic capabilities without server-side intervention.

3. Cloud + end scene – SSR isomorphic rendering

Isomorphic RENDERING for SSR is not a new concept. When React first supported SSR, the front end had the ability to run a set of code on the Server and Client. Feizi launched Midway + React SSR on PC in 2017.

Because the traffic of mobile terminal is much larger than that of PC, and Js execution on the Server side is an extremely resource-consuming operation, the cost of SSR machine and operation and maintenance through Node application increases exponentially with page traffic, ROI is not high, but the automatic hosting of Serverless FaaS, It can help the front end to solve the problem of machine utilization rate and operation and maintenance cost.

With the help of the client’s document preloading, we can achieve 100% of the client’s preloading rate (under 500ms), 90+% of the 2s out of the end rendering, and more than 80% of the performance improvement.

4. Cloud + terminal scenario – Integrated application

Integrated research and development is a development mode more in line with the habits of front-end personnel, which is commonly divided into mid-background integration and Rax+FaaS integration. The development, debugging and deployment of FaaS code and Assets code in a warehouse can greatly improve the development efficiency. At present, the mid-background integration development is the most commonly used by flying pigs.

Serverless R&D supporting construction

In terms of infrastructure construction, it is defined as two parts: the improvement of r&d efficiency and the guarantee of operational stability.

1. R&d efficiency

The main operations involved in the development phase are new projects, debugging and release. Feizhu integrates FaaS scaffolding templates through the existing Clam engineering system, and connects with DEF API to improve the ability of project creation, iteration and release, so that front-end students can have the same experience as the development page of FaaS, and reduce the starting and development costs. At the same time, Mtop call and DISASTER recovery SDK are encapsulated, and the common FaaS Utils collection is encapsulated to improve the reuse of the code.

2. Runtime stability

Functions monitor Alinode, gateway monitor Sunfire, and all link logs to quickly find and locate problems.

Tair Dr And CDN Dr Ensure that pages can be displayed normally in most scenarios when functions or gateways fail.

In the future

From 2020 to 2021, we have completed the transformation of Serverless into a productivity tool. In general, the period from 2021 to 2022 is the goal of completely completing the transformation of the flying Pig RESEARCH and development mode, and making FaaS become a routine part of both front and back ends. The planning is not specific yet, and there are the following key things to be done:

  • In the background and a long tail function of 0 and 1 pop-up trying: this considering some functions and a long tail in the background a day might be only dozens of Uv reach level of Qps, currently set aside 1 is still some waste in the form of the nuclear machine, consider in case shall not affect the request for the first time try to 0 to 1 pop-up, utilization rate of the machine’s perfection.

  • Replacement of Flypig physical gateway: Although the current flypig Java gateway has low investment due to maintenance status, once the flow changes, the stability of the gateway will become a bottleneck. It is hoped that a Fc team can take over the flow gateway. Flypig has also completed an online pilot before, and will continue to push forward from 2021 to 2022.

  • Observable enhancements to development-state and run-time problems: From FC the underlying container to function code inside the function dependence, traffic gateway, whether deployment problems or online, are difficult to locate, often need to pull the FC, research and development platform, a Runtime classmates, subsequent hopes to promote the increase of the observability for business development can be quickly found the problem.

Write in the last

Serverless based cloud + end combination has been basically formed, which will be one of the biggest changes in front-end development in recent years. FaaS will be an indispensable part of front-end development in the future, we need to use it to upgrade the r&d mode, and also to help front-end expand its functions. Through the ability of FaaS, front-end development can go deep into the service layer. Get closer to the business, understand the business and help the business.

Author’s brief introduction

Wang Hengfei (Chengyin), flying Pig travel front-end technology expert, flying Pig Serverless introduction and practitioner, explore and promote cloud + terminal research and development mode.