The front end early chat conference, the new starting point of the front end growth, held jointly with the Nuggets. Add wechat CodingDreamer into the exclusive inner push group, win in the new starting line.


The 14th | front-end growth promotion, 8-29 will be broadcast live, 9 lecturer (ant gold suit/tax friends, etc.), point I get on the bus 👉 (registration address) :


The text is as follows

This article is the front end of the early talk of the 43rd lecturer, is also the sixth – Serverless special session, from Tencent cloud development CloudBase team zhao Bing share – brief presentation version (see the full version of the video and PPT) :




Hello, everyone! I am Zhao Bing from the CloudBase team of Tencent Cloud development. Currently, I am responsible for the construction of the basic capabilities and technical ecology of CloudBase platform. I was a front-end developer before I joined the cloud development team, and now I am aFront-end developers for front-end developers. Throughout the front-end experience, I’ve been pursuingFront-end engineering capability and efficiency improvementsBefore, I mainly promoted componentization and engineering within the team, the construction of BFF of Node.js, front-end isomorphic SSR and container transformation of Node.js service. To join the cloud development platform as a builder of CloudBase platform, I also hope to help more front-end developers improve their research and development efficiency.



Today my share is “How to deliver small programs + Web in 60 minutes”. I will demonstrate how to develop the CloudBase platform based on the cloudApplet + Web site + Flutter mobile + Interface layer + management backgroundFull stack project, let everyone have an intuitive understanding and understanding of cloud development CloudBase platform capabilities. Next, we will take you to understand the CloudBase platform and cloud development in depthHow to enable developers to develop and deploy applications quickly, without caring about operation and maintenance, and get high performance, stable quality and secure online services. Finally, front-end engineers are discussedHow to use Serverless technology to build their own team’s application platform, to achieve their own business value and technical value.

Case Study

First, let’s take a look at what cloud development can do, with some enterprise projects to get a quick look at how enterprises and developers can use cloud development.

Shenzhen Airport Project

The first demonstration is the project of Shenzhen Airport. If you have taken a plane in Shenzhen Airport, you should have used this application (you can use wechat to scan the following small program code to experience). The application layer of the whole Shenzhen Airport project is built on the cloud development, including small program and Web. The small program side communicates with the airport application layer deployed on the cloud development through encrypted communication. The application layer mainly includes cloud functions, wechat cloud invocation, etc., bearing desensitization, assembly, monitoring, log, operation logic and business logic for docking with wechat. With the help of the Serverless framework of cloud development, the traditional server purchase and operation and maintenance can be directly entered into the development, saving operation and maintenance manpower. By using the cloud to develop the built-in log system, access to user login status, mobile phone number and other native wechat cloud invocation capabilities, help the business to greatly improve the development efficiency, take the login status, access to mobile phone number function, for example, can shorten from 1 day to 5 minutes. The log system does not need to be built and used, saving at least 5 days. On the Web side, the JS SDK developed in the cloud connects to the application layer and manages various services.



The central bank’s “purse strings” project

The second demonstration of the project is the central bank’s money to defend the small game (you can also scan the small program code to experience). The development team uses cloud functions developed by the cloud to easily achieve the game “turret attack monster”, “treasure book” and other game logic construction, in the client side, using the cloud developmentReal-time database, real-time storage and synchronization of user game stages. At the same time, with the help of perfectMonitoring analysis and statistical analysisSo that the development team can adjust the business according to the small game data at any time.Real-time database is the real-time synchronization capability of out-of-the-box database provided by cloud development. Clients can listen to changes in data sets to achieve many time-sensitive businesses, such as games, chat, notification, and so on.





More Case

As of October 2019, cloud development service has more than 500,000 developers, including a large number of head customers such as Pinduoduo, wechat Reading, Tencent News, Weimeng and wechat Pay. WeChat read small program, for example, “a team for life infinite card”, “good books turn out gifts”, “reading group”, “the answer exactly” etc. Most of the functions are based on the cloud and game development to build, use the function of cloud and cloud storage, cloud database capacity, dispense the backend development link, front students into the whole development of stack, can focus on business code, They achieved a total of 349 releases in 10 months, greatly improving efficiency. In addition, not only the small program, there are many developers based on the cloud development of their own Web, Flutter and other multi-terminal mobile applications **, the specific case will not be introduced, if you are interested in the following cloud development small code to learn more about the use of gestures.



Show Me The Code

We will be developing a full stack Demo of HackerNews. We will use cloud development to develop the back end of the application and Taro + Flutter to develop the front end.







Source code download



The source code for the Hacker News sample application is also available on Github



Project Address:Github.com/binggg/tcb-…



You can download the project to the local, and then install a VSCodeCodeTourPlugins, as shown in the interactive figure below, take you through a step-by-step code tour of how to develop a multiterminal full-stack application increments.





Build applets





In this step, we have completed the style and basic interaction of the front end interface of wechat small program. Next, we need to add the logic of data pulling for the page.

Develop the backend using cloud development

  1. New database collection HackerNews
  2. Develop the HackerNews API cloud function, as shown in the following figure
  3. One-click deployment goes online
    • @ cloudbase/cli tool docs.cloudbase.net/cli/intro.h…
    • VS code plug-in docs.cloudbase.net/vscode/intr…
    • Wechat developer tools




A few lines of code implement the subscription message


We just demonstrated a relatively simple backend pull scenario, and there are a lot of powerful things you can do within the cloud function with just a few lines of code. For example, in the following example, we only need a few lines of code to achieve the function of sending wechat subscription messages, while the traditional cloud service to achieve the whole function is very troublesome, not only need to care about the server construction and operation and maintenance, but also need to deal with authentication, caching and other logic.







Cloud development in the applets scenario can seamlessly use the open capabilities of applets in this simple authentication-free way,The ability to use the open interface of wechat based on cloud function authentication exemption is called cloud invocation

  1. Server-side invocation
  2. Open data, such as the number of exercise steps, mobile phone number, such as open data from the client
  3. Being pushed


Server-side invocation is currently the most widely used capabilities in cloud invocation by developers, such as subscription messaging, data analysis, OCR identification, etc. There are more than 60 apis in 14 categories for developers to use from a business perspective.



Cloud calls have recently been heavily supportedWechat pay ability, developers do not need to pay attention to the certificate, signature logic, just a few lines of code can be implemented wechat pay server logic.







Cloud development can be seamlessly integrated not only with wechat, but also with other products on Tencent cloud. For example, we can use a lot of functions on Tencent Cloud right out of the box by installing extensions in cloud development, including image processing, graphic watermarking, blind watermarking, sending SMS and so on.



When using these Tencent cloud capabilities, we can also directly invoke a few lines of code in the cloud function without authentication, as shown in the following figure.



Web access

Next we will put the previous small program one click to support Web access. There is no need for additional development on the front end, since Taro is a cross-end framework, and parts of its interface can be compiled into h5 patterns.



The only change we need to make is to adapt the method of calling cloud development. The specific adaptation code is shown in the screenshot below



Here we introduce the JSSDK for cloud developmentGithub.com/TencentClou…. On the Web side we need to log in to call cloud functions. For the sake of demonstration, we use anonymous login. Cloud development supports many login methods. We can open the console of Tencent Cloud and see wechat public account, wechat open platform, anonymous login and more open custom login methods in the login authorization.





Flutter mobile Application

What if you wanted to develop a Flutter application based on the current backend capabilities? We just need to call Flutter Create to create the project and then introduce the Cloud developed FLUTTER SDK to the project. You can refer to the following example code and Demo code.





Install a CMS extension with one click

The next step is to demonstrate an ability that doesn’t require developing code, based on our extended ability to install a CMS system with the click of a button to manage the application we just built.









We can deploy such a CMS content management system through the extension management interface in the background of cloud development. For the specific installation tutorial, please refer to the official documents:Cloud.tencent.com/document/pr….



Here’s how the CMS extension works,The essence of extension is the application logic plus cloud functions, cloud databases, cloud storage and other cloud resources, which can be understood as a micro full stack of application orchestration.





After the CMS is deployed with one click, we can manage the data of our entire application based on this system, no additional development work is required, and administrator/operator authentication is provided.

Demo code project summary

To sum up, in just half an hour, we demonstrated how to develop a full stack project with a mini program + Web site + Flutter mobile + interface layer + management background. We learn to use the cloud in the process of the development of the function of cloud, cloud storage, cloud database, extend ability, ability to login and cloud call, only need a little amount of code that is realized with many more powerful features the whole stack of applications, such as the crafty, support WeChat cloud calls, support management platform, and so on.





Dive In Deep

The previous demonstration gave you an intuitive understanding and understanding of the capabilities of the CloudBase platform for cloud development. The following will lead you to in-depth understanding of the CloudBase platform and cloud developmentHow to enable half a million developers to develop and deploy applications quickly, without caring about operation and maintenance, and get high performance, stable quality and secure online services?



What is cloud development

Cloud development is a core practice of the Serverless conceptThe CloudBase platform uses the Serverless architecture to provide basic resource services such as cloud functions, cloud databases, and cloud storage. No environment to build, no operation and maintenance, static hosting, command-line tool (CLI), VS Code plug-in, Flutter SDK and other capabilities, greatly reduce the barriers to application development, help quickly build small programs, Web applications and apps.



Cloud development overall product architecture

The overall product architecture of cloud development is shown in the figure. On top of the underlying basic capabilities, cloud development also provides a variety of back-end service capabilities and extension capabilities of cloud development, as well as multi-end SDK products and development tools to facilitate multi-end application access to cloud development.





Cloud development infrastructure capabilities

Cloud development at the FaaS level provides cloud functions as a code environment that runs in the cloud, making it very easy for developers to write back-end logic and back-end interfaces, while being flexible and scalable. BaaS provides Serverless database and storage. You can easily read and write cloud database, upload and manage files on the front end, and accelerate access to resources on the front end. The underlying capabilities of cloud development nicely address the fundamental problems of application development.



Cloud development engineering capabilities

How does the cloud development platform enable 500, 000 developers to develop and deploy applications quickly, without having to worry about operations and expansion, to obtain high performance, stable quality and secure online services? It is not enough to solve the basic ability of application development, but the engineering capacity building of cloud development platform is the main benefit. The construction of cloud development engineering capacity mainly includes the following aspects:

  • The efficiency of
  • The quality of
  • security
  • Multiterminal construction




Efficiency of engineering capability

In terms of efficiency, compared with traditional server development, cloud development does not need to care about servers, and at the same time provides a variety of capabilities out of the box. In many scenarios, front-end engineers can close the loop, bringing greatly reduced r&d manpower and communication costs.









For example, in terms of identity system, built-in support for wechat login and other identity systems, do not need to do additional development can obtain unified identity information, saving a lot of repetitive and inefficient development work.



Quality of engineering capability

In addition to providing these efficient development methods, it is important to consider how our application goes from Demo to production. There are performance and quality issues to consider. How can we ensure the quality of our application’s performance without the developer having to care about the server? Resource and performance guarantee Firstly, resource and performance guarantee ** Cloud development can provide a large resource pool, which can be automatically expanded in seconds during the peak of service traffic, ensuring high service availability. For example, in the aspect of cloud function, cloud development currently provides developers with the ability to support a single cloud function with 1000 concurrent functions. Assuming that the execution time of cloud function is 50ms, a single cloud function can reach 20,000 QPS, which can meet the needs of most user scenarios. The total QPS of 50 cloud functions will reach 1 million QPS. The developer doesn’t have to worry about the machine, the resource automatically scales according to the number of requests, and the developer doesn’t have to pay for idle resources.

To date, cloud development is called more than 700 million times a day.







Technical architecture and optimization of the cloud development data plane


We’re going to take a look at thatTechnical architecture and optimization of the cloud development data planeAs can be seen from the figure, a service invocation by a user needs to go through multiple middle-tier services and finally reach the customer resource layer. The high availability and high performance of cloud development services can be divided into two aspects: “data link” and “underlying resources” on a large level. At present, the availability of “data links” and “underlying resources” of the cloud development system is more than 99.99%.



The data link provides the connectivity between the user side and the cloud resource side. The data link not only carries out data forwarding and transmission, but also includes a series of processing logic. Such as wechat login authentication, ticket generation and verification, data codec, cloud account identity authentication, cluster routing, cloud resource information binding, security rules, data signature and verification, context information injection, access count, concurrency control and other ability support modules.





Availability and performance tuning of cloud functions



Cloud functions are also heavily optimized in terms of performance. Developers familiar with cloud development should be aware that a function can be started in a single call, which can be divided into cold start and hot start. Hot start is very fast, while cold start is relatively slow.



The process of cold start is shown in the figure. By comparison, it can be seen that cold start requires the creation of function instances, and the creation process includes many sub-tasks, such as downloading function code and deploying functions, which usually takes several hundred milliseconds.



Currently, many optimizations have been made on the function side:

  • Optimize the code download time, establish multi-level cache in the VIRTUAL machine and availability zone, and improve the download speed of cloud function code package;
  • Optimize function network deployment policies to reduce deployment time.
  • Optimize container startup and reduce startup time;
  • Based on the changing trend of user request volume and the changing rule of periodic request volume, the quasi-real-time prediction of cloud function concurrent volume was carried out, and the capacity was expanded and contracted in advance.
  • Support version alias, users Update code, with Rolling Update method to replace the old and new versions, to ensure hot start rate;
  • Optimize the reserve time of function instances to ensure the overall low cold start rate.
  • The cloud function also uses the lightweight virtualization technology developed by Tencent Cloud, which shortens the startup time of MicroVm to 90 ms and the cold startup time of function to 200 ms, and supports the simultaneous expansion of tens of thousands of compute nodes.


At present, through the optimization of function base architecture and performance, the time of deploying cloud function instances has been reduced, and the cold start time of cloud function has been reduced. Provide customers with higher availability and performance support.





High availability optimization for cloud databases



As can be seen from the architecture diagram, the cloud database access layer is designed in layers and supports horizontal expansion. All user requests are allocated to different hosts, and each host independently maintains user database connections. This ensures that the database access layer can be expanded in a large scale. In addition, multiple clusters are deployed so that faulty hosts can be automatically detected and removed from the cluster. Different users are assigned to different access clusters. User requests can be flexibly scheduled in multiple clusters to cope with possible service faults, providing higher availability and shorter recovery time.

  • The publishing strategy can also be more reliable. The gray scale is carried out according to the cluster, and the impact range is small.
  • The database engine instances are also deployed across hosts with multiple database instances, which can be automatically transferred when a single database instance fails.
  • Data is fully backed up for each data instance every day and saved to the object storage to ensure user data security. When the user data becomes faulty, the data can be reversed, which indirectly improves service availability for users.
  • The data layer also supports online live migration. When the host load is too high, user instances are automatically live migrated online to the host with low load. Users are almost unaware of this process. Live migration also supports global load balancing between database hosts.
  • Database currently has capability of providing automatic indexing, automatic analysis of user query requests and targeted for automatic index optimization, to users without awareness to optimize query performance, so developers can less concerned with database performance optimization can have excellent performance experience, reduce the burden of the customer, focus more on its own business logic.


Safety of engineering capability







The cloud development side has done a lot of work on secure access to resources

  • Wechat private protocol transmission, through the bill authentication to ensure the security of the link
  • Functions, databases, and storage all support security rules that fine-grained access to resources
  • In Web scenarios, the Web security domain name mechanism prevents cross-domain requests and works with security rules and identity authentication to ensure resource security
  • In mobile application scenarios, secure calls are ensured by mobile security sources such as the SDK that gets the package name of the application
  • Invocation authentication for access is also supported in scenarios where function services are accessed over HTTP (for example, callbacks, page rendering)






Engineering capacity

Finally, cloud development has built-in support for various client SDKS such as wechat applet, QQ applet, Web, Flutter, C#, etc., as well as server SDKS such as node.js, PHP/ Java, etc. The community also provides a large number of SDKS, the full list can be seenwww.cloudbase.net/sdk.htmlPage. End-to-end applications and cloud services are seamlessly connected, and the invocation of cloud services becomes as natural and simple as local ones, greatly reducing the cost of developers to develop multi-end and cross-end applications.





Serverless ❤ ️ Frontend


Finally, I want to talk about the changes that Serverleess has brought to the Frontend. I think Serverless and Frontend fit very well. Serverless makes the scope of responsibilities of the Frontend engineer more possible.





Front-end history

In terms of the development history of the front end, let’s go back to the prehistory of the front end, or the cutting diagram era, where the front end students were responsible for the logic of the view layer, and the rest of the rendering, HTTP API, and business logic were all handled by the back end students.







Then enter the front-end engineering era, this era began to pay great attention to the performance optimization of the front-end, the rendering of the page gradually handed over to the front-end students, the front and back end gradually began to separate.







Then, with the emergence of Node, some front-end students began to take charge of the development of BFF access layer, gradually began to take charge of the full stack development of some innovative projects, and provided HTTP API for external applications.





Opportunities and challenges brought by functional change

With the change of functions, there are both opportunities and challenges. How to ensure the high availability, high performance and quality stability of services? For the front-end students, this is a brand new field, from the browser to the server side, a lot of new domain knowledge need to understand and learn, so is it necessary to have a lot of server side knowledge to start the development of server side business?



Serverless application center solution

Serverless provides a new solution for front-end development students. With Serverless, the underlying platform layer assumes the work of the infrastructure. Many underlying technologies and capabilities are gradually sinking, and developers no longer need to pay attention to the operation and expansion of the infrastructure.With a strong underlying architecture, front-end students can quickly realize business development and help businesses realize business value quickly.



In addition to the realization of business value, front-end students can also reap new technical value in this round of changeFor example, by sinking some common business capabilities, orchestrating and delivering them through the Serverless architecture, enterprises and teams can reuse these full-stack capabilities, gradually improving enterprise and team application development capabilities, graduallyPrecipitation out of the enterprise and team’s own application platform.





conclusion

This share shows how to quickly develop an containApplet + Web site + Flutter mobile + Interface layer + management backgroundFull stack project, let everyone have an intuitive understanding and understanding of the capabilities of the cloud development platform.



Then I took you to understand what cloud development is and why cloud development is the core practice of Serverless. Cloud developmentHow to enable developers to develop and deploy applications quickly, without caring about operation and maintenance, and get high performance, stable quality and secure online services.



Finally, front-end engineers are discussedHow to use Serverless technology to build their own team’s application platform, to achieve their own business value and technical value.







Finally, I hope that students who are interested in cloud development CloudBase can follow the social platform account and official website of cloud development for further communication.

  • My personal zhihu: www.zhihu.com/people/bing…
  • Cloud development website: cloudbase.net/
  • Cloud development Github: github.com/TencentClou…
  • Cloud development official account: see the qr code below


This article was typeset using MDNICE