Serverless- Introduction to the principle of JAMStack

Introduction: This article shares the introduction of the JAMStack principle in the R&D practice of serverless architecture in software engineering .

Live address: 0 Basic Advanced Serverless Master Class—The Value of Serverless Architecture in Software R&D Engineering Practice


This article will introduce the R&D practice of serverless architecture in software engineering and the principle of JAMStack through five parts .
•JAMStack , a modern web site construction method
•Ÿ Alibaba Cloud JAMStack solution
•JAMStack service implementation introduction
•Ÿ Introduction to deployment tools
•ŸOther serverless engineering practices


【Serverless- Introduction to the principle of JAMStack 】Introduction to JAMStack , a modern web site construction method


Before introducing the principle of JAMStack , first introduce what is JAMStack .


JAMStack is a new site development concept that is currently respected by the front-end. It pre-renders the content, and then delivers the static part to CDN for acceleration to achieve a better access experience; and then uses the serverless technology behind the dynamic API . To achieve the dynamic capabilities of the entire site, the developed site will have a great improvement in user experience.


JAMStack consists of three main concepts , namely Javascript , API and Markup.
•Javascript is the mainstream web development language, which can interact with data and enhance the dynamic capabilities of the site;
•API provides the dynamic capability of site data, which is provided by traditional server, or can be provided by serverless to provide API capability to reduce costs and cope with large-scale traffic and disaster recovery requirements;
•Markup is a markup language, HTML, Markdown are also a kind of markup language. This is the basis for JAMStack to implement static pre-rendering.


JAMStack has five major advantages , they are:
•Better performance, that is, handing over pre-rendered static content to CDN, greatly improving the efficiency of users accessing your site;
•More security, when the site is static, the attack surface is less, and the serverless service operation of the dynamic API itself also has a high security guarantee;
•Ÿ Cheaper, the hosting cost of the static resource itself is relatively low, and the cost of elastic invocation of the serverless-based API service is relatively low;
•It is easier to expand, the dynamic API part is decoupled from static resources, and the dynamic API is more convenient to expand;
•Better development experience, loose coupling allows developers to focus on a certain part, such as front-end pages or back-end interfaces, and Git-based workflow can also greatly reduce integration deployment time.


basic implementation principle of JAMStack
As can be seen from the figure below, the traditional web generally accesses the database or content system behind it through the client. There will be several links here. Access the web server through the client, and then the web server initiates the request to call the application service behind it. The application service can also be split into various microservices, which are also called in this indirect way. Application services also operate the database and content management system directly behind the scenes. JAMStack actually simplifies this architecture.



The whole strategy is to hand over the static part to the CDN, because the static part is rendered in advance, and then the CDN helps to accelerate it, which means that the user can see the effect of the site at the first time. The dynamic part is then processed and extended to the site by other means. All in all, JAMStack actually reduces dynamic access paths, which can improve site access performance and achieve better security.


2. 【Serverless- Introduction to the principle of JAMStack】Alibaba Cloud JAMStack Solution


Before the implementation of JAMStack as a service, here is an introduction to the JAMStack solution based on the services provided by Alibaba Cloud. The advantage of introducing these solutions is that teachers can introduce them to students, so that students can increase their hands-on ability after understanding.


At present, some products of Alibaba Cloud are used to make the JAMStack framework. You can learn about it through the following figure. There are several products on the way, such as CDN, OSS and FC function computing products. Among these products, CDN is the protagonist. On the one hand, it handles caching of static resources and global network acceleration. On the other hand, it has the ability to write scripts and provide some edge scripts, which can be used for some gateway processing.





For example, when a user initiates a domain name access through a browser, the domain name will first go through the CDN, and then the CDN itself has a set of default configurations. This configuration provides edge configuration, which can be understood as a hook process. UF before and after relationship. After these configurations, dynamic requests will be automatically analyzed, such as the build part, first go to the cache to see if there is any, if not, go to the OSS to check, the OSS will also give a back to the source, indicating that this is an update, you can Cache it first and then return the content . That is, the static part is directly presented to the user. The dynamic part needs to go through the edge script, through which it is judged that this is a dynamic API, and then forwarded to the API service behind it according to the passed route. Then forward it to the function calculation, and then return it to the page for rendering. After such processing, you can see the dynamic and static separation ability of the entire JAMStack . The benefits are also obvious. Users no longer need to build various CDN, OSS or function computing services. Based on some existing services, high-performance site services can already be built.
【Demonstration of solution effect, please click the video to watch】

3. Introduction to the implementation of JAMStack as a service
There is still a big gap between the implementation of JAMStack as a service and the existing capabilities of Alibaba Cloud. Because it needs to consider how to do multi-tenancy and how to deal with the entire large-scale resource request when many users come up to use it.


First, let's introduce the capabilities included in the already provided JAMStack , as follows:


Domain name hosting + custom domain name, can provide resume.net.cn first-level domain name, users can fill in the second-level domain name according to their own needs, such as Zhangsan.resume.net.cn can be used. Also supports custom domain names.
•Ÿ Redirection processing, this function mainly solves the problem of static file redirection; for example, an old site needs to rename one of its configuration files for some reason, but the old site is already being accessed, this time You can use the redirection processing capability to sign the old one directly to the new name for seamless upgrades.
•Ÿ KvStore , by storing static resources and updating resources, decoupling from site deployment to achieve dynamic capabilities.
•Ÿ Dynamic and static distribution, which is the core capability of JAMStack . Through the custom gateway, the requests for static resources and dynamic resources are distributed, statically to the CDN, and dynamically to the API.
•Ÿ Multi-site management, which means that a user can currently create up to 32 sites.


Overall architecture diagram of JAMStack service
following overall architecture diagram of JAMStack service can be introduced in two parts.



First, when the JAMStack project is deployed, a series of operations need to be done. For example, first execute S deploy through the tool chain, and make a subcontract for some required static data and dynamic API. For example, the dynamic API can directly upload Function Compute, while the static part will be synchronized to the OSS through the file synchronization service. This file synchronization service will also store the original data of the site, such as domain name information and routing information, for secondary storage. This is a persistent capability that can be stored in the OTS service, and then initiates a message notification to the Gateway to the final resolution site. After the Gateway receives the notification, it will check the original data information of the stored website in turn, and then send a message to the gateway . Cached, so that users do not need to query related original data information when accessing the gateway.


So as you can see above, a lot of things have been prepared before the application is deployed. It includes separating and deploying static files, creating dynamic APIs, and synchronizing the site's original data information to the gateway of the final resolution site.



JAMStack project users
The user accesses the newly created domain name through the browser as usual. At this time, the domain name will be resolved to the Gateway. Then, because the Gateway has already obtained the original information, including routing requests, etc., it will start to use these requests as an internal proxy at this time. That is to say, it provides an internal gateway of the service, which will access the dynamic and static parts and the completed KvStore part according to the original data information, and finally collect all the things to present a complete result to the user.


4. Introduction to Deployment Tools
Deployment ToolsServerless Devs
The main body of the demonstration in the above video is Desktop. Desktop is developed with cross-platform technology and built with front-end technology HTML, CSS and js . technology. The biggest difference between it and the other end-side command line is that when users want to manage enterprise sites built on the JAMStack capability at the enterprise level, they must look back at the domain name returned after deployment and deploy it again. Even, we need to do some performance improvements for the site, including stress testing, etc., and then do the entire online and offline debugging. This series of enterprise service capabilities is actually not available on the command line.
But the command line also has the advantage of being easily integrated. First of all, a professional developer must want to have a very clear tool, and the command line is the best choice. After installing the command line tool, you can still operate the site building capability, and you can integrate the command line into the workflow.


Therefore, these two methods have their own advantages, and everyone can use them based on their own habits and needs. The following figure is a list of functions of the entire tool chain, in addition to the above two, there are desktop and application center. The application center carries many scenarios, including templates for e-commerce website building, blog website building, etc. It is more convenient for users to use these templates.





Another major feature of the deployment tool Serverless Devs is that it can achieve cross-vendor service capabilities. The current cloud services are provided by each vendor for themselves. At this time, a developer wants to serve multiple clouds, or he himself has multiple services, and wants to try the service technology on different cloud vendors. Different tools need to be installed.


Serverless Devs have strong scalability, that is to say, they have the ability to build businesses on various clouds in a component-based way. So you only need to install Serverless Devs to serve multiple cloud vendors. This itself is also a very open source and open concept.


At present, Serverless Devs supports 30 web frameworks; it has 7 application scenario templates, and it is still increasing; in addition, it has more cooperation with other communities, including support on docker, code hosting services at home and abroad, etc.

5. Other Serverless Engineering Practices
Serverless Devs themselves are a practical example. The current Serverless interface is the interface of the Service tool, and it is born to use the Service solution. That is to say, this solution was used on the day of launch, and the code itself was written in Python, and 30 interfaces were developed within 10 days; and the practice that has been running for more than 7 months is still in a state of zero failures. This is all thanks to the stable service of Service.
The official website of Serverless Devs itself is also deployed with tools. The entire development, deployment, launch and continuous integration took only 2 days.
I hope that through the above sharing, everyone can see the value of serverless architecture in software engineering development practice, and I hope it can inspire everyone's practice.


Finally, if you want to get command-line tools, desktop tools, etc., you can log in to the official website to download directly. The tools include both Mac version and Windows version.

Copyright statement: The content of this article is contributed by Alibaba Cloud's real-name registered users. The copyright belongs to the original author. The Alibaba Cloud developer community does not own the copyright and does not assume the corresponding legal responsibility. For specific rules, please refer to the " Alibaba Cloud Developer Community User Service Agreement " and " Alibaba Cloud Developer Community Intellectual Property Protection Guidelines ". If you find any content suspected of plagiarism in this community, fill out the infringement complaint form to report it. Once verified, this community will delete the allegedly infringing content immediately.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00