What is the current jamstack?

Author: Timothy McCallum , Miley Fu and Vivian Hu

Jamstack is a set of technology stacks used to build modern Internet applications. It has a wide range of applications in edge cloud, serverless computing, and large front-ends, and it is also sought after by the capital market this year. What magic power does it have? This article will take you to understand the concept and development paradigm of Jamstack. We will also discuss how emerging technologies such as Rust and WebAssembly make Jamstack faster, safer, and easier to use.

What is Jamstack?

Jamstack is a new way to build websites and web applications. Jamstack's Stack refers to many independent but combinable technology layers. When combined, they can provide a complete web application.

The JAM in the Jamstack architecture refers to client-side JavaScript, reusable back-end APIs, and user interface Markup, such as HTML and CSS.

The key feature of Jamstack is the clear distinction between front-end Web UI and API-based back-end services. Unlike traditional vertically integrated web applications, Jamstack applications are modular and decentralized: UI can be distributed through static web servers, CDNs, or even blockchain-based storage; back-end API services can be deployed in the cloud On the other hand, the edge node can also provide services nearby.

Why is Jamstack awesome?

From the perspective of technology stack comparison, another common technology stack used to develop Web applications is LAMP (Linux, Apache, MySQL, PHP) and later MEAN (MongoDB, Express.JS, Angular, Node.JS) .

LAMP overview

K7.india at English Wikipedia, CC BY 3.0 https://creativecommons.org/licenses/by/3.0, via Wikimedia Commons

As can be seen from the above chart, from the perspective of application developers, when using the LAMP technology stack, there are many components that can be installed, and can be configured and maintained at the same time. The user interface of the LAMP application is dynamically generated by the back-end server. Most of the logic and calculations are on the server. The front-end browser is only responsible for rendering.

JAM overview

Compared with the LAMP technology stack, Jamstack has many differences, which have a profound impact on the way developers build websites or web applications. In terms of deployment architecture, the user interface of the Jamstack application is a static web page generated by "compilation", which greatly improves performance, security, and reduces the complexity and computational load of the server.

From a developer's perspective, some of the main differences include:

• Jamstack developers do not need to install or manage an operating system (such as Linux)
• Jamstack developers do not need to manage security policies (server firewall)
• Jamstack developers do not need to install or manage application databases (such as MySQL)
• Jamstack developers can deploy websites or web applications without using an HTTP (Web) server (such as Apache)

Overall, choosing to use Jamstack to create websites and web applications has 4 main benefits: cost-effectiveness, performance improvement, better security and better user/developer experience .

JAM components

Let us first take a quick look at the three components that make up JAM; J avascript, A PIs and M arkup. Then, we will focus on dynamically programmable API components.

Javascript

There is no doubt that JavaScript is one of the most popular programming languages on the web. Javascript allows web application developers to easily request dynamic content generated by back-end services in HTML pages. These secure HTTP requests (issued by the client) can be used to call remote API endpoints and return the results to the client (application).

API

API is a good way to access dynamic data in the form of microservices. There are many publicly available API endpoints on the Internet, which can return a lot of useful data. One example is Solar System Open Data API, which can return all kinds of data such as planets, moons, dwarfs, comets and asteroids.

Here is an example of how we can obtain the axial tilt of Mercury through the API.

[https://api.le-systeme-solaire.net/rest/bodies/mercury](https://api.le-systeme-solaire.net/rest/bodies/mercury)

This API service node returns quite a lot of data, as shown below.

{
 "id": "mercure",
 "name": "Mercure",
 "englishName": "Mercury",
 "isPlanet": true,
 "moons": null,
 "semimajorAxis": 57909227,
 "perihelion": 46001200,
 "aphelion": 69816900,
 "eccentricity": 0.20560,
 "inclination": 7.00000,
 "mass": {
  "massValue": 3.30114,
  "massExponent": 23
 },
 "vol": {
  "volValue": 6.08300,
  "volExponent": 10
 },
 "density": 5.42910,
 "gravity": 3.70000,
 "escape": 4250.00000,
 "meanRadius": 2439.40000,
 "equaRadius": 2440.53000,
 "polarRadius": 2439.70000,
 "flattening": 0,
 "dimension": "",
 "sideralOrbit": 87.96900,
 "sideralRotation": 1407.60000,
 "aroundPlanet": null,
 "discoveredBy": "",
 "discoveryDate": "",
 "alternativeName": "",
 "axialTilt": 0.0352
}

As can be seen here, so far we can access dynamic content without setting up any server infrastructure. Let's quickly see how to use JAM to manage this task, that is, a few lines of Javascript to get the data, and some markups to display the data as effective information.

Markup

Markup allows us to create visually satisfactory web pages very easily. To demonstrate this, I created a simple HTML page (source code is here), you can try it, as shown in the figure below.

NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington. Edited version of Image:Mercury in color — Prockter07.jpg by Papa Lima Whiskey., Public domain, via Wikimedia Commons

You will notice that this demo is only hosted on GitHub pages. Of course, you can also copy the HTML source code to a local folder and open it locally on the PC. There is no need to run the server at all. Using a content delivery network (CDN) can also help you minimize client response time.

If you want to generate a more fancy static site, there are many software products that can help you, such as Gatsby, Hugo, Netlify, Vercel, etc.

No server required, create and publish your own API endpoints

SpaceX, CC0, via Wikimedia Commons

Just demonstrated that we effortlessly get data from publicly available public endpoints. but……

If you can create and deploy your own API endpoints, but don't want any additional servers, is there any way 🤔?

Not only can we access open data (as shown above), we can write our own custom logic to process data, images, and videos. We can also share the API endpoints (custom functions) we developed with others.

Serverless service

As the name suggests, serverless services allow developers to provide API services without running their own servers. Developers only need to upload a piece of code to provide services. Generally speaking, public clouds provide two serverless services.

• Database-as-a-service (DaaS) database service provides cloud database-based storage and query services for Jamstack applications. It is used to manage the state of the application, such as the storage of user data.
• Function-as-a-service (FaaS) Function-as-a-service (FaaS) provides stateless computing. It usually supports multiple programming languages and frameworks, and provides a logical backend for Jamstack applications together with database or cloud storage services.

Careful readers may have discovered that deploying serverless API services on public clouds is not entirely suitable for Jamstack's philosophy. Both J and M have been deployed through the edge cloud, why can't A? The deployment of serverless functions on the edge cloud requires a new generation of lightweight software containers. This is an important application scenario of the CNCF's WasmEdge WebAssembly sandbox

Rust function calculation service

WasmEdge can be deployed on edge clouds and edge devices. It complies with OCI standards and can be scheduled and managed by tools such as CRI-O and Kubernetes. WasmEdge allows developers to write safe and high-performance function services in the Rust language, and can also support DSL low-code solutions customized for the scene.

In this article, we use the Second State Company based on a free FaaS service WasmEdge released as an example to demonstrate how to use serverless API service Rust Jamstack language development and deployment of applications.

Second State provides a cross-cloud FaaS infrastructure that can be used to create, deploy, and call your own custom functions. Whether you want to create a brand new web application, migrate your existing web application, or just enhance your web application client , FaaS based on WasmEdge is a good choice. You don’t even need a username and password. All calls are performed through the open Web and through secure HTTP requests. You can deploy your own application in a matter of minutes.

There are many wonderful pre-built demos and tutorials to enable you to learn how to create your own FaaS endpoint. These pre-built functions (demos) include:

• Image classification ( tutorial , demo )
• Facial recognition ( tutorial , demo )
• Send mail ( tutorial , demo )
• Watermark the picture ( tutorial , demo )
• Identify food in the video ( tutorial , demo )
• Solving the mystery of alphabetic

you also come and try!

The point here is that you can create your own code execution service, that is, run your own custom code without providing any infrastructure. Second State's FaaS "allows developers to upload and execute code in the cloud without managing the server."

Next step

In this article, we introduced the basic concepts of Jamstack and how to quickly develop a dynamic API based on WasmEdge according to your needs. In the next article, we will introduce how to use WebAssembly Runtime/WasmEdge to write APIs in Jamstack applications using WebAssembly Runtime/WasmEdge in the current hot Vercel.