website development mesa az


(website development mesa az)Recently Serverless Discussion more and more。It seems that there is not much relationship with the front end Serverless,In fact, it has already had a quite deepest in front of the front.,And will set off a new front-end technology change。This share is based on personal understanding and summary,From the front development modelserverlessEvolution、Serverless Solutions provided by common service providers and based onServerless Front-end development model, etc.,Discuss with everyone Serverless Front-end development mode。

one、Evolution of front-end development model

website development mesa az


First review the evolution of the front-end development model,I think there are main four stages.。。

1、Dynamic page based on template rendering
2、based on AJAX Front and rear end separation
3、based on Node.js Front end engineering
4、based on Node.js All stack development

Dynamic page based on template rendering

In the early Internet era,Our webpage is simple,Some static or dynamic pages,The main purpose is to make information display and communication。This time I develop a web page is also veryeasy,Mainly through JSP、PHP Write some dynamic templates,Then pass Web Server(nginx,apache) Parlect template into one by one HTML document,The browser is only responsible for rendering these HTML document。This stage has no division of labor in the back and rear end.,Usually the backend engineer has written the front page。

JSP: Java Server Page: JavaService page,existhtmlWriting on the pageJavaCode page
WebServer:Website server orwebserver

based on AJAX Front and rear end separation

2005 year AJAX Technology official proposal,Open Web New chapter developed。based on AJAX,We can put Web Divided into front end and backend,Front end responsible for interface and interaction,The rear end is responsible for the processing of business logic。The front and rear ends perform data interaction through the interface。We no longer need to write difficult to maintain in each backend language. HTML。The complexity of the web page is also backed by the backend Web Server Turning to the browser JavaScript。It is also,Started with the front-end position。

based on Node.js Front end engineering

2009year Node.js Appearance,For the front end,Also a historic moment。along with Node.js Also there is CommonJS Specification and npm Package management mechanism。Then there was there Grunt、Gulp、Webpack Waiting for a series of Node.js Front-end development building tool。

exist 2013 Year-old,Three major frames of front end React.js/Angular/Vue.js Release the first version。We can develop from the past, based on one page,Changes to development based on one component。After the development is completed webpack Waiting for the tools for packaging,And through Node.js The implementation of the command line tool will be released online。The front end development began to standardize、standardization、Engineering。

based on Node.js All stack development

Node.js There is also the important meaning of the front end.,I can only run in the browser in the past. js You can also run on the server,The front end can write the code of the server with the language you are most familiar.。So the front end starts using Node.js Do a full stack development,Start transforming by the front end to the full stack。This is the front-end active breakthrough yourself。
on the other hand,Front end,The backend is also developing。Also almost Node.js The era of birth,The backend generally begins to transform from the boulder application mode to the micro service architecture。This also caused differences in the past rear end of the past.。With the rise of micro service architecture,Atomic interfaces gradually become atomic interface,The micro-service interface is no longer directly oriented,The call of the front end is complex.。then BFF(Backend For Frontend)Architecture appears,In the middle of the micro service and front end,Add one BFF Floor,Depend on BFF Aggregate interface、After cutting,Output to the front end。and BFF This layer is not a bachelor work,And the relationship with the front end is the largest,So the front end naturally chose Node.js to realise。This is also current Node.js Causes of a wide range of applications。

Boulder application:mostwebThe project is to put all the function modules(service side)Pack together and put it in onewebRun in the container,Many companiesJavaApplication package iswarBag

Micro service architecture:Micro service architecture is an architecture concept,Refers to decomposes the functionality into discrete services.,Thereby reducing system coupling,And provide more flexible service support。Split a large single application and service to several or dozens of mini service,It expands a single component instead of the entire application stack,To meet the service level agreement。

Next generation front-end development model

After finishing these stages,can be seen,Changes in each front-end development model,Because of a certain transformation technology。First AJAX,Follows Node.js。So what is the next transformative technology??it goes without saying,Personally feel Serverless。

what isserverless

website development mesa az(website development mesa az)image.png

CNCF,Full nameCloud Native Computing Foundation(Yunyuan Calculation Foundation),was founded in 2015 year7moon21day(Portland in the United StatesOSCON 2015Announcement),The initial slogan is to persist and integrate open source technology to make the container as part of the micro service structure.,It is an important force as a promotion and popularization of cloud primary applications.,Whether you are a developer of Yunjing、Managers or researchers need to know。

Current industry may be more in the container Docker+Kubernetes, use
IaaS、PaaSandSaaS To quickly build deployment applications

Infrastructure is service(Infrastructure as a Service,IaaS)、Platform(Platform as a Service,PaaS)And software is service(Software as a Service,SaaS)。

DockerIs a platform,It mainly provides some services,AnythingdockerYou can build machines、release、Run your app,usedockerVery labor-saving。

brief introductionKubernetes。It is a ripe commercial service arranging solution。KubernetesLocated atPaasFloor,Focus on the problem of service arranging when the micro service is large-scale deployment。

actually Serverless It has already been connected with the front end.,Just we may have no perception。

1、CDN: I believe everyone has used CDN,After we developed,Deploy static file directly to CDN superior,pass through CDN Content distribution、Network acceleration,During this process,Don't care about the front end CDN How many nodes have、How to do load balancing,don't need to know CDN of QPS how many。So from this perspective,CDN is a serverless realization。

2、Another example is object storage,and CDN Same,We just need to upload the file to object storage,can be used directly,Don't care how it accesses files、How to control permissions,So object storage is for the front end Serverless。
3、even some third-party API Serve,Too Serverless,because when we use,No need to care about the server。

website development mesa az


Of course,Feeling is not enough,We still need a more precise definition。From a technical point of view,Serverless that is FaaS and BaaS combination。

simply speaking,FaaS(Function as a Service) It's a platform that runs functions,For example, Alibaba Cloud's function computing、AWS of Lambda Wait。

BaaS(Backend as a Service)some backend cloud services,such as cloud database、object storage、message queue etc.。use BaaS,It can greatly simplify the difficulty of our application development。

Serverless can be understood as running in FaaS middle,used BaaS The function。

Serverless The main features are:

(website development mesa az)1、event driven----function in FaaS platform,Need to drive function execution through a series of events。
2、no status----because every time the function executes,may be using different containers,No memory or data sharing possible。If you want to share data,only through third-party services,for example ```Redis`` Wait。

Redis(full name:Remote Dictionary Server Remote Dictionary Service)is an open source useANSI Clanguage writing、Support network、Log type that can be in-memory or persistent、Key-Value[database],and available in multiple languagesAPI。from2010year3moon15date,Redisdevelopment work byVMwarehost。from2013year5month starts,Redisdeveloped byPivotalsponsor。

3、No operation and maintenance----useserverlessWe don't need to care about the server,Don't need to care about operation and maintenance,This is alsoserverlescore of thought;
4、low cost----use Serverless low cost,Because we only pay for each function run。function does not run,no money,Will not waste server resources excessively

????Which company platforms offer these features???existing service provider cloud platform Yama

two Serverless Solutions from common service providers

website development mesa az


1、The picture above is some of the current main Serverless Serve,and corresponding service solutions。
2、bottom to top,infrastructure、Development tools and application scenarios。
3、The infrastructure is mainly provided by some cloud computing vendors,including cloud computing platforms and various BaaS Serve,and the running function FaaS platform。
The front end is mainly Serverless users of,So for the front end,The most important development tools this layer,We need to rely on development tools for Serverless develop、Debug and deploy。
There is no unified Serverless standard,provided by different cloud computing platforms Serverless Service is likely to be different,This leads to our code,Unable to migrate smoothly。Serverless One of the main functions of the framework is to simplify Serverless develop、Deployment process,Another main function is to shield different Serverless Differences in service,Allows our function to change with little or no changes,In other Serverless can also run in service。Common Serverless frame has Serverless Framework、ZEIT Now、Apex Wait。But these are basically done by foreign companies.,There is no such platform in China。
5、Web IDE
and Serverless closely related Web IDE Mainly for various cloud computing platforms Web IDE。use Web IDE,We can easily develop in the cloud、debug function,and can be directly deployed to the corresponding FaaS platform。The advantage of this is to avoid installing various development tools locally、Configure various environments。Common Web IDE have AWS of Cloud9、Alibaba Cloud's function computing Web IDE、Tencent Cloud Cloud Studio。
6、Of course,At present, the most important development method is to develop locally.。so develop locally Serverless The command line tools are also essential。
There are two main types of command line tools,One is provided by the cloud computing platform,Such as AWS of aws、 Azure of az、Alibaba Cloud's fun;Another category is Serverless provided by the framework,Such as serverless、now。
Most tools such as serverless、fun Wait,all use Node.js implemented by language。
7、Application scenarios
One layer above the development tools,is Serverless Some vertical application scenarios of。In addition to using traditional server-side development,Currently using Serverless Technical and small program development,The Internet of Things may also be involved in the future(IoT)。

different Serverless comparison of services

website development mesa az

Above image from supported languages、trigger、Price and other aspects are different Serverless Services are compared,differences can be found,also have commonalities。

1、such as almost all Serverless Services are supported Node.js/Python/Java Equal language。

2、From the supported triggers,Almost all services are also supported HTTP、object storage、timed task、Triggers such as message queues。Of course,These triggers are also related to the platform's own backend services,For example, Alibaba Cloud's object storage triggers,is based on Alibaba Cloud OSS Triggered by events such as product access;and AWS Object Storage Triggers for,It is based on AWS of S3 Event triggered,Two platforms are not universal。This is also current Serverless A problem facing,That is, standard is not uniform。

S3:Amazon Simple Storage Service (Amazon S3) Is an object storage service,Provide industry-leading scalability、Data availability、Safety and performance

From the perspective of billing,The cost of each platform is basically。Also mentioned earlier,Serverless The billing is charged by the number of adjustments,Execution time。

three based on Serverless Front-end development mode

serverless Development Process

(website development mesa az)

website development mesa az(website development mesa az)

1、Before starting specific cases,Let's take a look at the traditional development process。
In the traditional development process,We need front end writing page,Back end engineer write interface。After the back end is written after the interface,Deploy the interface,Performance of front and rear end。After the joint adjustment is completed, then tested、online。After the line,It also requires operation and maintenance engineers to maintain the system.。The whole process involves multiple different roles,Longer,Communication and coordination is also a problem。

2、Based on Serverless,The rear end is very simple.,The previous rear end applications are split into a function,Just write the function and deploy it to Serverless Service,Subsequent also don't have to care for the operation and maintenance of any server。The threshold for the rear end development is reduced.。therefore,I only need a front end to complete all the development work.。
Of course,Front end is based on Serverless Go to the back,It is best also need to have a certain backend knowledge.。Revenue complicated backend system or Serverless Not applicable scene,Still need rear end development。


1.Reduce operation complexity

(website development mesa az)ServerlessArchitecture makes software applications and servers understand coupling,The server is no longer the focus of user development and operation applications.。Before the application is online,Users do not need to plan the number and specification of the server in advance。In the operation and maintenance process,Users do not need to continue to monitor and maintain the status of specific servers,Just care about the overall status of applications。The overall complexity of the application,Users' attention can be more placed in software applications and other places that can bring higher business value.。
2.Reduce operating costs
Server is no longer a managed resource for users,Operation complexity,The time and manpower to be put into application operations will be greatly reduced。In the best case,You can do a few of several application administrators to manage an application that handles massive requests.。

3、Shorten the product's listing time
existServerlessUnder architecture,The function of the application is solved constituated a number of fine particles of stateless function,The boundaries between function and function becomes clearer,The coupling degree between the function modules is greatly reduced.。This makes the development efficiency of software applications,Application development iterative cycle is shorter。


based on Serverless of BFF (Backend For Frontend)

website development mesa az

Tradition BFF (Backend For Frontend) Architecture

1、on the one hand,Different devices need to be used API,on the other hand,Due to the complexity of the front-end interface caused by micro services,So start using the front end BFF The way,Aggregate cutting,To obtain an interface for front end。
2、The bottom of the bottom is a variety of backend micro services.,The uppermost layer is a variety of front-end applications。Before the micro service and application,It is usually developed by the front end. BFF。
-Mobile terminal-webend-Embedded-
Such an architecture solves the problem of interface coordination,But also brought some new problems。

Tradition BFF (Backend For Frontend) Pain point

(website development mesa az)For example, for each device BFF application,It will also face some duplicate issues。And the previous front end only needs to develop pages,Focus on the rendering of the browser,Now you need to maintain a variety of BFF application。I don't need to pay attention to the front end of the past.,Now concurrent pressure is concentrated. BFF superior。In general, the operation and maintenance cost is very high.,Usually the front end is not good at operation and maintenance。

Serverless Can help us solve these problems well。useServerless,We can use a function to achieve the aggregation cut of each interface.。Front side BFF Initiated request,Be equivalent to FaaS one of HTTP trigger,Trigger a function of a function,This function is used to implement business logic for this request.,For example, call multiple micro service to get data,Then return the processing result to the front end。This pressure is stressed,In the past BFF Server Turn around FaaS Serve,The front end is no longer concerned with the server.。

based on Serverless of BFF Architecture

The above picture is based on Serverless of BFF Architecture。In order to better manage various API,We can also add a network level layer,Manage all through gateways API(For example, Alibaba Cloud's gateway),Such as API Grouped、Sub-environment。based on API Gateway,The front end is not directly passed HTTP Trigger to perform functions,But send the request to the gateway,Then trigger the specific function by the gateway to execute。
API Gateway
In the absence ofAPIThe gateway is used as a unified export.,Need callors to combine various services,And it is easy to let the calling party incense the presence of various services,Everything needs everything that makes many same work。
join inAPI GatewayAfter the role
Generally, the route will also be,Safety,Limiting,Cache,Log,monitor,Retry,Melting, etc. API Gateway,Then the service layer is completely detached from these things.,Purely do business,It is also possible to guarantee the clean business code.,Don't worry safety,Pressure, etc.。

based on Serverless Server rendering

Traditional server rendering

(website development mesa az)Based on the most popular three front-end frames(React.js/Anguler/Vue.js),Most of the current rendering methods are client rendering。When the page is initialized,Only load a simple HTML Correspondence JS document,Then by JS To render a page。The most important problem in this way is the white screen time and SEO Search Engine Optimization

(website development mesa az)To solve this problem,The front end starts to try the server rendering。Essential thinking is the same as the earliest template rendering。Both the front end initiated a request,rear end Server Resolution HTML Documentation,Then return to the browser。Just JSP、PHP Waitage language template,Now is based on React、Vue Simplex application,This is also the advantage of today's server rendering program。

But the server rendering has brought some additional problems for the front end.:Operation and maintenance cost,Front end needs to maintain servers for rendering。

based onserverlessserver-side rendering

Serverless The biggest advantage is that it can help us reduce operation and maintenance,That Serverless Can it be used for server-side rendering??Of course it is possible。

(website development mesa az)Traditional server-side rendering,per request path Corresponding to each route on the server side,corresponding to this route path of HTML document rendering。Server program for rendering,These are the applications that integrate these routes。
use Serverless for server-side rendering,is to convert each route in the past,are split into functions,again FaaS Deploy the corresponding function on。requested by the user path,corresponds to each individual function。in this way,The operation and maintenance operations are transferred to FaaS platform,Front-end server-side rendering,You don't need to care about the operation and maintenance of the server program anymore.。

based on Serverless small program development

1、Currently used domestically Serverless More scenes may be developed by Xiaocheng。The specific implementation is the small program cloud development,Both Alipay applet and WeChat applet provide cloud development functions。
2、In traditional small program development,We need front-end development of small programs;Back-end for server-side development。Back-end development of small programs and other back-end application development,The essence is the same,Need to care about the load balancing of the application、Backup redundancy、A series of deployment operation and maintenance operations such as monitoring and alarming。If the development team is small,May also need front-end to implement server-side。
But based on cloud development,Just let the developers focus on the realization of the business,The front-end and back-end development of the entire application can be completed by one front-end。Because cloud development encapsulates the backend as BaaS Serve,and provides the corresponding SDK for developers,Developers can use various backend services like calling functions。Application operation and maintenance have also been transferred to service providers that provide cloud development。
The following are some examples of using Alipay Cloud to develop,function is defined in FaaS function in service。

(website development mesa az)load balancing(Load Balance)It means that it is allocated to multiple operation units for execution.,E.gWebserver、FTPserver、Enterprise critical application servers and other mission critical servers, etc.,to complete tasks together
Backup redundancy:It is to prevent data loss caused by damage to storage devices caused by natural or social destruction.,while taking a backup.

Universal Serverless Architecture

(website development mesa az)Based on the above Serverless development example,It can be concluded that a general Serverless Architecture。

website development mesa az(website development mesa az)

The bottom layer is the back-end microservices that implement complex business(Backend)。Then FaaS The layer implements business logic through a series of functions,and provide services directly to the front end。For front-end developers,The front-end can implement server-side logic by writing functions。

(website development mesa az)At the same time whether it is in the backend、FaaS or front end,We can all call the cloud computing platform BaaS Serve,Greatly reduce the difficulty of development、Reduce development costs。Mini Program Cloud Development,is to call directly on the front end BaaS example of service。

one sentence summaryserverless - less is more

use Serverless,We don't need to pay too much attention to the operation and maintenance of the server.,No need to care about areas we are not familiar with,We only need to focus on the development of the business、Focus on product realization。Fewer things we need to care about,But we can do more。


source:short book
Copyright belongs to the author。Please indicate the source。