A Brief History of Information says that “evolution itself is the embodiment of the continuous exchange of information between organisms and their environment.” The same is true of the evolution of front-end technologies. In the vast front end of the universe, what dazzling stars have appeared? Where is the “north Star” that guides the future? Senior engineer of Tencent Cloud talks with you about the history of revolution and the hope of the new era.

After graduation, he became a traditional Web front end developer and worked on a rich article editor. Then I spent almost a year working on efficiency engineering, which is what people call front-end engineering. Before joining Tencent, I worked on maps, and the technical core was WebGL.

It can be said that my more than 5 years of experience covers most of the technical direction of the front-end field except audio and video. Whether it is the web for the masses or SVG for the minority, whether it is macro to the engineering of the web as a whole or micro to the graphics of pixels. On the surface, it may seem that each new job has little to do with the previous one. For example, the math and graphics knowledge I accumulated while working with WebGL, such as matrices, vectors, and triangulations, is basically not reflected in my current work. But in fact, from graduation to joining Tencent, I was always in a state of confusion, trying to find the direction that can truly reflect the core value of front-end engineers in different types of work, as well as the key technologies to assist this direction.

I think I’ve now found the full-stack evolution of the front end, and Serverless to help it land.

If you want to discuss whether a technology or an idea is revolutionary, you need some reference, and history is the best reference. So before we talk about how Serverless revolutionized the front end, it’s worth taking a quick look back at the front end.

History of front-end change

Front-end 0.0: WWW

In fact, many foreign companies still follow the POSITION of UI Developer, and the current public perception of the front-end engineer is different, THE ability stack of UI Developer in addition to HTML/JS/CSS, but also have a certain UI and interaction design ability.

Front-end 1.0: AJAX

AJAX, which originated in Microsoft Outlook, was the key technology that led to the first front-end revolution. It was an important turning point in which websites became dynamic and front-end engineers’ capability model gradually shifted from UI to logic and data.

Front-end 2.0: Node.js

Then there’s node.js, widely known as Front-end 2.0. Node.js breaks down the barriers of front-end programming languages, allowing front-end developers to cross the boundary of servers at a relatively small cost. However, programming languages are only the most superficial and easy to break through for server development, and the more difficult part behind cannot be solved by simply using Node.js. Details will be shown later. Aside from the server, node.js’ biggest contribution to the front end is the engineering soil it provides.

Here’s a question for you to consider: What are the basic, low-level capabilities of a build tool? The answer is file IO.

Before Node.js, there were only two ways to build HTML/JS/CSS. The first is to use tools from other programming languages, such as YUI Compressor. The second is to use Internet Explorer. This isn’t a joke. Internet Explorer’s early dominance wasn’t just because Windows endorsed it. It was also very functional. As is known to all, the early IE browser is a component of the Windows system, and it can be used as an entry to call some system-level low-level functions. File IO is in this column. The way to achieve this is the FileSystemObject object of the ActiveX control. I won’t go into the details, but those of you who are interested can refer to the relevant materials.

Front-end 2.5: React

Some say React deserves the word “revolutionary” because it changes the programming model of the front end, which was around the DOM before React and data after React. True, but compared to AJAX and Node.js, React is still a minor change. The impact of React on the front-end componentization ecology is also an enhancement on the original basis and cannot be called revolutionary. So calling React front-end 3.0 isn’t quite convincing enough, but front-end 2.5 is fine. At the end of the day, React is just changing the front end itself, while AJAX and Node.js are technologies that have significant impact on both front and back ends.

Serverless- From front end to full stack

Before discussing which technology or idea will make front-end 3.0, it is important to identify where the front-end will go next.

At present, there are two voices: one is the “big front end”, that is, the full stack, the key technology is Node.js; Second, the react-Native and Flutter are the breakthrough points of the “pan-front”, that is, the full end.

At the current time point, react-Native and Flutter are not mature yet, and there is still a long way to go. Relatively speaking, the front end is more likely to evolve to full stack next. Based on this premise, Serverless is a revolutionary technology concept to accomplish this.

The term “full stack” has always been ambiguous. In the narrow sense, the full stack comes from the front-end technology circle, which means that one person is responsible for the front-end and the Web server; It is almost impossible to master the architectural and technical details surrounding the full stack in a broad sense, which includes the database in addition to the back end and the back end. If anyone can achieve this feat, it is likely to be close to the computer god of Alan Turing. Between narrow and generalized, Serverless is for the generalized full stack. The concept of Serverless is to give the “heavy work” such as server management and database optimization to the cloud platform, so that front-end developers can control the interaction logic, business logic and data in their own hands, which is the true full stack.

For a clearer understanding of Serverless, an architectural pattern for comparison is BFF (Backends for Frontend).

BFF- From platform independence to platform differentiation

BFF simply means to develop a unique layer of thin services for different business platforms on the basis of the original integrated server, as shown in the following figure.

BFF unresolved issues

The current industry practice for BFF is to distribute BFF to teams responsible for technology development on various platforms, such as App team for Mobile BFF, front-end team for PC Web and H5 BFF, etc. So for front-end engineers, does this model mean that the BFF layer is on the front end? That’s the ideal scenario, but not the real thing.

That said, BFF does not address the critical issues of the front end being the full stack, which is where Serverless is targeted.

Tencent Yunyun development of Serverless practice

Serverless is generally recognized as a combination of Function as a service (FaaS) and Backend as a service (BaaS). Based on this premise, the relevant team of Tencent Cloud implemented Serverless as the model shown in the following figure.

Based on the functions and services provided by the cloud development system, front-end developers can not only focus on UI and interactive logic, but also intervene in the business logic layer hosted by cloud functions and the data storage layer supported by cloud database and cloud storage at a small cost. In short, the front end focuses on: interactive logic + business logic (cloud functions) + data (cloud database/cloud storage).

What is the difference between cloud storage and CDN?

The cloud storage system provides the file hosting service, which is essentially the same as the CDN. Its advantages are reflected in that developers do not need to apply for a domain name, no management server, files are automatically hosted, and the privacy and security of files can be guaranteed through the authentication mechanism. In fact, the topic of CDN can be extended to Serverless. Most front-end developers do not need to relate to the state of the CDN server in their work, only need to deploy files (even this step can be completed by the CI system), then CDN can be regarded as Serverless for front-end developers.

The complete Serverless system not only includes CDN, but also can implement Serverless database and server. In the engineering model supported by this system, a complete iteration cycle requires only two functional roles: front-end and testing. The front end is responsible for all work related to business, including interaction layer, business layer and data layer; Test responsible for quality assurance; And the deployment, release, server management, online monitoring and other tedious work to be completed by the cloud development platform.

The development of ecological

end
cloud
The console.

  • The form of terminal is the SDK corresponding to each platform, which is the most closely related to front-end developers.
  • The cloud refers to the background system supporting the Serverless system. This part is invisible to developers, and the work of docking with it is undertaken by the end SDK. Sub-roles can be divided into access layer and basic services. The access layer is responsible for proxy forwarding and user authentication. Basic services Provide basic capabilities, including cloud functions, cloud databases, and cloud storage.
  • The functions of the console are divided into two categories: one is administrative functions, such as cloud function deployment, data and file management, and so on; The second is operations. The console provides on-line monitoring of products and statistics and visualization of data to assist operations.

Diverse scene support

Any new technology or architecture implemented in a specific business scenario will inevitably encounter difficulties in migration due to the particularity of the business. Therefore, in addition to the basic development ecology, cloud development establishes necessary strategies and corresponding tools to support diversified business scenarios.

conclusion

Serverless is supported by cloud-related technologies, combined with container technology and microservices architecture to decouple the management of the infrastructure from the day-to-day work of developers. Although neither the theoretical interpretation nor the practical model has yet been completely unified, it is foreseeable that front-end developers will be one of the biggest beneficiaries of Serverless, and there is every reason to believe that it will lead to the third revolution of the front-end.

To learn more about cloud development CloudBase related technical stories/technical practical experience, please scan the code to pay attention to [Tencent Cloud development] public account ~

About Cloud Development

CloudBase is a cloud-integrated product solution. It adopts the Serverless architecture, avoids operation and maintenance affairs such as environment construction, supports one cloud and multiple terminals, and facilitates the rapid construction of small programs, Web applications, and mobile applications.

  • Technical documentation: www.cloudbase.net/
  • Wechat search: Tencent Cloud development, get the latest progress of the project