How Front-End Engineers Deal with Serverless

Introduction: Although most of the front-end work does not involve servers, the term serverless and the heated discussions it has sparked in the past six months have deeply touched the senior front-end technical expert of Alibaba. As an old developer who has been in contact with the front-end for more than ten years, Fa Xin believes that serverless may be one of the technologies that will cause revolutionary changes in the front-end field.

Today, Fa Xian will sort out the historical development process of serverless and its impact on the front-end for everyone, hoping to inspire front-end engineers.


The picture above shows the search trend of the word serverless in google in the past five years. It can be seen that it has reached its peak in the past six months.

An important technological revolution in the front-end field in history

Birth of Ajax

Let's first review the important historical nodes in the field of front-end technology. The first node was in 2005, when Google's Jesse James Garrett published an article - "Ajax: A New Approach to Web Applications". Vocabulary (accurately not a new technology, just a new vocabulary), when I was still in my sophomore year, although ajax is not a new technology, it is just a packaging of technologies such as XmlHttpRequest, but this technology has become a global web development after being promoted by google The benchmark, indirectly promoted the popularity of rich client applications (RIA) and single page applications (SPA), most of these applications have a silky experience (partial refresh), and has been accompanied by the development of web 2.0, ajax is deeply rooted in the hearts of the people , which makes the work of front-end js more complex and important, and the professional division of labor is becoming more and more detailed, which indirectly promotes the birth of the role of full-time front-end developers. Before this, web development did not distinguish between server-side and browser-side work, so ajax It is the first important event in the front-end field.


Nodejs's promotion of front-end standardization and engineering

The next major milestone in front-end changes is the emergence and popularity of nodejs (including common js and npm) born in 2009. Its significance to the front-end field is not just that the front-end can quickly write servers in js. Personally, I think its biggest contribution is the front-end engineering promoted by commonjs, npm and its convenient development experience. It makes the front-end start to develop from a slash-and-burn deployment method that is incompatible with traditional software engineering to a research and development model that is close to traditional enterprise applications. Here Previously, front-end development lacked effective tools and standards for resource reference, dependency management, and module specification, but after nodejs became popular, commonjs-based modules and npm-based package deployment and dependency management became mainstream (similar to java's maven system), and was born A variety of cli tools based on nodejs developed to assist front-end development (such as grunt, gulp), npm is currently the world's largest package management warehouse, and has become the de facto standard for package dependency management of front-end projects. The emergence of webpack makes the deployment of front-end code easier, so that the front-end can publish applications (bundles) in the form of java jar packages, regardless of the type of resources in the project.


React's componentization and vdom concept

The third revolutionary event is react, which began to appear in 2013. Although the web components standard has been released before that, the library that really makes the concept of componentization deeply rooted and the most widely used is react, which has at least two features enough to make It has become the most forward-looking front-end library in history. The first feature is the emergence of vdom. Before that, all ui libraries were directly associated with dom, but react added a new one between UI creation and rendering engine. The middle layer - vdom (a protocol that uses lightweight json to describe UI structure), in addition to improving its own dom diff performance, it also has a great significance that UI writing and rendering begin to be separated, one writing, multi-terminal rendering The UI can be realized. This multi-end includes server, mobile, PC and other devices that need to display UI. After that, react native and weex are the beneficiaries of this layered idea.

In addition to vdom, react has an important concept that is very advanced, that is, UI is a function (class), the function inputs a state, and must return a certain view. Before that, most frameworks and libraries will separate UI into An html fragment (usually supports template writing to render data), a js that binds events to the html fragment, although this is easier to understand, but the abstraction of the UI by react reflects the actual nature of the UI, and this functional The concept, as you can see later, will have a wonderful collision with faas and serverless technology.


After the birth of react, even the previous frameworks and libraries have had a profound impact, including but not limited to angular and vue have adopted many of its technical ideas, and become one of the few stable front-end development fields. One of the technical options.

To sum up, ajax gradually separates the front-end role, nodejs promotes the front-end development model to be closer to traditional programming languages ​​(engineering), and the emergence of react has basically ended the back-end often complaining about the front-end's "fast technological changes", So far, the front-end technology system has gradually matured and standardized.


The relationship between the serverless concept and the front end

So why do you say that the next concept that will have a greater impact on the front-end technology field is serverless? In fact, although the term serverless was proposed by Amazon less than a few years ago, this concept is not an explosive new concept. In the early days, When CDN is not yet popular, web engineers will pass js resources and view files (may be static or dynamic) to the server. At that time, the front end needs to care about the server, but the popularity of CDN and back-to-source strategy, engineering and The large-scale use of the building system enables the front-end to quickly throw a js or static file to the cdn node. Through the back-to-source mechanism (cdn back-to-source to a dynamic service), semi-dynamic view layer rendering is also possible. During this whole process , Front-end development does not need to care about any server knowledge, and does not know how many nodes there are in cdn, how to do load balancing, and how to do gslb, and do not need to know how many qps, a cdn can put various business and various development resources, it can be said that cdn It is the pioneer of the serverless concept.

Back to application deployment, when nodejs was just popular in the past few years, some developers realized that the deployment and operation and maintenance costs of applications and machines would be a problem for the business side, and some ideas of containerization appeared, such as cbu in 15 years. In the naga container, the business logic is a plug-in. The container is responsible for the routing and distribution of requests, load and stability management. The business side only needs to write and upload the most direct business code. For the business side It realizes the concept of serverless, because the maintainers of naga help you solve the problems of deployment and operation and maintenance.

Let’s talk about the page construction system and bff layer that are closely related to the front end, whether it is various construction systems (such as zebra, building block box, TMS), or a platform based on graphQl, or a product that quickly writes api gateway through web ide-such as cbu’s mbox , so that business development only cares about business logic and does not need to care about deployment and operation and maintenance knowledge. They reflect the concept of serverless to a certain extent.

The impact of serverless on the front end

To sum up, the front-end has already been connected with serverless, but many people have not yet felt it. Next, the outbreak of serverless will have a far-reaching impact on the front-end, which is mainly reflected in three aspects.

The front end will return to the role of web application engineer

As mentioned at the beginning, the front-end is a refinement of the social division of labor. It originated around 2007. Before that, there was no special front-end development role, usually called a web engineer or website engineer. Most of the early web pages were server rendering. Using server page technologies such as asp, php, jsp, js is only one of the small skills that web engineers need to master, but with the development of web 2.0 and the Internet, mobile Internet, and e-commerce The UI with good compatibility and experience has gradually produced front-end engineers focusing on browsers and mobile terminals.

However, the field of front-end technology has gradually become stable. With the development of more than ten years, various out-of-the-box libraries, vertical solutions and engineering methods are readily available. There are even some auxiliary tools that can generate UI code from designers' visual drafts. , the front end can be at ease and write UI and business logic at a very low cost, without spending a lot of energy on model selection, wheel building, restoration of vision, processing compatibility, performance optimization, debugging and deployment. In this case, the front-end and back-end types of work The cost of collaboration caused by separation is magnified, because in the case of separation of front-end and back-end roles, the back-end often also acts as the BFF layer, such as encapsulating various api gateways for the front-end presentation layer, often waiting for each other and jointly debugging the protocol. situation, and the bff layer is usually only some data processing, other roles can be quickly started after short-term training, so the front end has been trying to access the bff layer on the server side.

In 2015, the front-end began to promote the use of nodejs to deploy applications. There are also many nodejs frameworks inside and outside Alibaba, such as express in the industry. In the production environment, including systems for buyers, merchants and internal personnel, many have used them. nodejs, but this year, 2019, look back and see that the number didn't exceed expectations.

The reason for this phenomenon, I personally think that in the final analysis is the lack of knowledge of the front-end server due to the too fine division of labor. Nodejs itself is positioned as a server technology. In essence, the problems faced by the server are no different from those of java. There are few talents recruited by front-end jd who can work on the server with ease. Unless specially recruited nodejs talents, the long-term operation of the server service will expose many problems, such as slow interface, process core, cpu soaring, memory leak, etc. In addition Knowledge of load balancing, scaling, high and low latency, etc., most front-ends have no experience in this.

The essence of cloud computing is to focus business development on business logic. The hardware and software facilities under the business are purchased on demand and used out of the box. The serverless concept and related technologies will make developers no longer need to care about applications and software. For machine problems, you don’t even need to worry about whether the traffic can be supported or not. It can automatically expand and shrink the capacity. Therefore, the operation and maintenance cost of web developers will be greatly reduced in the future. The front-end can also be involved in the development of the bff layer, while the back-end can Focus on data processing, business logic and algorithms.

This change is in line with the background of R&D efficiency improvement. In the future, cloud facilities will be very thick, professional and stable, and front-end developers can quickly and cost-effectively build business logic on cloud facilities, front-end and server front-end. (For the entire request chain, the front-end is relative, as long as the role closer to the client's request can be called the front-end), the division of labor will not be so clear, and the previous browser-side front-end will gradually undertake part of the server-terminated connection. The work of the entry layer and the bff layer, returning to the basics, returning to the role of web development engineer in history, this is the biggest change to the front end.

Of course, serverless technology allows the front-end to return to the traditional web layer, which does not mean that the front-end does not need to master server knowledge. Mastering the operating system kernel and network programming knowledge will still help you write high-performance, high-availability business applications.


Real-time SSR will become the main development mode of display UI

In the earliest web development, in fact, the processing of UI was mainly based on server rendering, such as perl, php and other dynamic web page technologies, but it gradually became a job in the front end and began to be responsible for most of the UI development, and the technical field gradually narrowed to the client side. After that, web page static and client-side rendering gradually became mainstream.

However, this mode is definitely problematic for user experience, resulting in more white screen time, and due to the abstraction of new front-end libraries such as react and vue at the vdom layer, the technical cost of server rendering is lower, so SSR is in the In recent years, it has gradually become popular again.

However, the difficulty of SSR is precisely the lack of server-side talents as mentioned above. Although the popularity of nodejs and vdom has improved the implementation efficiency of SSR, due to the lack of server knowledge, usually only a small number of front-ends with comprehensive knowledge will practice this in depth. a field.

The popularity of serverless technology will eliminate this problem. With the help of serverless technology, the front-end can quickly build an SSR scene, fetch data from the server, render on the server, and send HTML directly to the client, regardless of whether the rendering service is available or not. If you can handle the traffic, will it hang up or not, these things will be solved by the cloud facility provider.

As mentioned earlier, a core concept of react is to regard UI as a function. If a page is composed of multiple components, then one component is a function. We can regard a page as a combination of multiple functions, and different functions A combination of , combined into different shopping guide scenarios, if a function is regarded as a microservice, a scenario is the aggregation of microservices, which is precisely the concept of faas.

Through serverless low-cost real-time ssr, the customer experience can be better. With the help of algorithms and big data, the UI can be quickly realized by thousands of people, and a real shopping guide brain can be built.


Scenario-based cloud development (web ide) will become the mainstream development mode

When mentioning serverless technology, there is a related field that has to be mentioned, that is web ide. Many large Internet companies regard a web ide as a cloud infrastructure and invest heavily. Why is this? I personally think there are two reasons.

The first is that serverless is currently mainly used in vertical scenarios in the industry. They have one thing in common, that is, the code is sufficiently standard and standardized, the scenario is relatively vertical, the code complexity is not very large, and with the help of web ide, it can quickly communicate with cloud platforms. Combined, one-click publishing is achieved. Therefore, this scenario is more suitable for the whole link from lightweight online coding to deployment.

Another reason is that all current cloud facilities solve business operation problems, but software development has a very big pain point that most people may ignore, that is, environmental problems. Question, I believe that many people have the problem of cloning other people's projects, but they can't start it without the power of nine cows and two tigers, because they have to install various environments? In addition, when you are in joint debugging with others, is it because of the lack of various environment deployments that the joint debugging efficiency is very low?

With the help of container technologies such as docker, the software running and debugging environment can be quickly transplanted to others for reuse. At present, the js-based code editor is very powerful. The vscode editor is written based on js and precipitated a library Monaco Editor, so It can be said that most of the ideas that web IDEs may not be as good as local IDEs in terms of syntax hints and intellisense are outdated.


At the same time, web ide can be quickly integrated with the platform, in-depth customization, open up the business platform, and one-click deployment, which greatly improves the efficiency of research and development.

Web IDE can also solve the problem of cross-site office, because it solves the long-standing problem of environment preparation, you can quickly write and deliver code at home, in the company, or even on the train.

Therefore, the future paas platform will be associated with a deeply customized web ide. When you need to write business logic, a connection can be jumped to the web ide to code, and you don't need to care about the local environment at all, so you can be truly envless. For example, if you want to develop a TMS module, then click "New", jump to the web ide, the code will be initialized for you, click Run, and the server will be started in the cloud to run the component. After writing, you can publish it to TMS with one click.

For various faas, api gateway systems and other cloud services, it will be the same, web ide will become the infrastructure of enterprise cloudification. Although Alibaba Cloud has not yet released a web ide comparable to cloud9 and coding.net, we are delighted to see that some excellent products have emerged within the group, such as aone's ide and data platform's app studio, whose experience is close to that of the industry Top level.

Epilogue

In the field of cloud computing, serverless will set off a revolution. Even the front-end that seems to be less related to this field will undergo another major change after ajax, nodejs and react. Are you ready to deal with it?

Author of this article: cut salary