What is the jamstack of the current fire?

Time:2021-7-23

Author:Timothy McCallum, Miley Fu and Vivian Hu

Jamstack is a technology stack for building modern Internet applications. It is widely used in edge cloud, serverless computing and big front end, and is also sought after by the capital market this year. What kind of magic does it have? This article will take you to understand the concept and development paradigm of jamstack. We will also discuss how emerging technologies like rust and webassembly can make jamstack faster, more secure, 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 composable technology layers. When combined, they can provide a complete web application.

Jam in jamstack architecture refers to client-side JavaScript, reusable back-end API, 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. Different from the traditional vertically integrated web application, jamstack application is modular and decentralized: UI can be distributed through static web server, CDN, and even blockchain based storage; Back end API services can be deployed on the cloud or provided nearby by edge nodes.

Why is jamstack so good?

From the perspective of technology stack comparison, another common technology stack for developing web applications is mean (mongodb, express.js, angular, node. JS) after lamp (Linux, Apache, mysql, PHP).

Lamp overview

What is the jamstack of the current fire?

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 lamp technology stack, there are many components that can be installed, configured and maintained at the same time. The user interface of lamp application is generated dynamically by the back-end server. Most of the logic and computation is on the server. The front-end browser is only responsible for rendering.

Overview of jam

What is the jamstack of the current fire?

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

From a developer’s perspective, some of the main differences are:

  • Jamstack developers do not need to install or manage operating systems (such as Linux)
  • Jamstack developers do not need to manage security policies (server firewalls)
  • Jamstack developers do not need to install or manage application databases (such as MySQL)
  • Jamstack developers can deploy web sites or web applications without using an HTTP (WEB) server such as Apache

In general, there are four main benefits of using jamstack to create websites and web applicationsCost effectiveness, performance improvement, better security and better user / developer experience

Jam component

Let’s take a quick look at the three components that make up jam;Javascript、APIs andMarkup。 Then, we’ll focus on dynamically programmable API components.

Javascript

There is no doubt that JavaScript is one of the most popular programming languages on the Internet. 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 the remote API endpoint 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 isSolar system open dataAPI, which can return all kinds of data such as planets, satellites, dwarfs, comets and asteroids.

Here’s an example of how we can get the axial tilt of mercury through 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 you can see here, so far we can access dynamic content without setting up any server infrastructure. Let’s take a quick look at 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 valid information.

Markup

Markup makes it very easy to create visually satisfying web pages. To demonstrate this, I created a simple HTML page (the source code is here). You can try it, as shown in the figure below.

What is the jamstack of the current fire?

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’ll notice that this demo is hosted only with GitHub pages. Of course, you can also copy the HTML source code to a local folder and open it on your PC. There is no need to run the server at all. Using content distribution 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 and so on.

Create and publish your own API endpoints without a server

What is the jamstack of the current fire?

SpaceX, CC0, via Wikimedia Commons

We just demonstrated that we can easily 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?

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

Serverless service

As the name suggests, serverless service allows 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 cloud provides two kinds of serverless services.

  • Database-As-a-Service (DAAS) database service provides storage and query services based on cloud database 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) provides stateless computing. It usually supports multiple programming languages and frameworks, and provides logical back-end for jamstack applications together with database or cloud storage services.

Careful readers may have found that deploying the serverless API service on the public cloud is not completely suitable for jamstack’s idea. Both J and m have been deployed through edge cloud. Why can’t a? Deploying serverless function on edge cloud needs a new generation of lightweight software container. This is from CNCFWeb assembly sandbox like wasmidge)It is an important application scenario.

Rust function calculation service

Wasmidge can be deployed on edge cloud and edge devices. It meets the OCI standard and can be scheduled and managed by tools such as cri-o and kubernetes. Wasmedge allows developers to write secure and high-performance function services in rust language, and also supports DSL low code solutions customized for scenarios.

In this article, we use the second state companyA free FAAS service based on wasmedgeAs an example, this paper demonstrates how to develop and deploy the server less API service of jamstack application with rust language.

What is the jamstack of the current fire?

Second state provides a cross cloud FAAS infrastructure, which can be used to create, deploy and call its own custom functions. Whether you want to create a new web application, migrate your existing web application, or justEnhance the client of your web applicationFAAS based on wasmidge is a good choice. You don’t even need a user name and password. All the calls are made through the open web and through secure HTTP requests. You can deploy your own app in a few minutes.

There are many wonderful pre built demos and tutorials to learn how to create your own FAAS endpoints. These demos include:

What is the jamstack of the current fire?

Come and have a 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 servers.”.

next step

In this article, we introduce the basic concept of jamstack and how to quickly develop a dynamic API based on wasedge according to our own needs. In the next article, we will introduce how to use the webassembly Runtime / wasmedge in the current vercel and the rust function in the jamstack application to write the API.