By Timothy McCallum, Miley Fu, and Vivian Hu

The Jamstack is a set of technology stacks for building modern Internet applications. It has a wide range of applications in edge cloud, Serverless computing, and the big front end, and has also been popular in the capital market this year. What is the magic of it? This article will take you through the Jamstack concept and development paradigm. We’ll also discuss how emerging technologies like Rust and WebAssembly are making Jamstack faster, safer, and easier to use.

What is a Jamstack?

Jamstack is a new way to build websites and Web applications. The Stack of a Jamstack is a number of separate, but combinable, layers of technology. When combined, they provide a complete Web application.

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 the Jamstack is the clear distinction between the front-end Web UI and the API-based back-end services. Unlike traditional, vertically integrated Web applications, Jamstack applications are modular and distributed: the UI can be distributed via static Web servers, CDN, or even blockchain-based storage; Back-end API services can be deployed on the cloud or provided by edge nodes nearby.

Why is Jamstack awesome?

From a stack comparison perspective, another common technology stack for developing Web applications is LAMP (Linux, Apache, MySQL, PHP) followed by MEAN (MongoDB, express.js, Angular, Node.js).

An overview of the LAMP

K7. India at English Wikipedia, CC BY 3.0 creativecommons.org/licenses/by… , via Wikimedia Commons

As you can see from the diagram above, from an application developer’s perspective, when using the LAMP technology stack, there are many components that can be installed, configured and maintained simultaneously. The user interface for a LAMP application is dynamically generated by the back-end server. Most of the logic and computation is on the server. The browser on the front end is only responsible for rendering.

An overview of the JAM

The Jamstack is different from the LAMP technology stack in a number of ways that have profound implications for how developers build websites or Web applications. Architecturally, the Jamstack application’s user interface is generated by “compiling” static web pages, which greatly improves performance, security, and reduces server-side complexity and computing load.

From a developer’s perspective, some major differences include:

  • Jamstack developers do not need to install or manage an operating system such as Linux
  • Jamstack developers don’t 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

Overall, choosing to use Jamstack to build websites and Web applications has four main benefits: cost-effectiveness, performance improvements, better security, and a better user/developer experience.

JAM components

Let’s take a quick look at the three components that make up a JAM; Javascript, APIs, and Markup. Next, we’ll focus on dynamically programmable API components.

Javascript

Without a doubt, 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 (made by the client) can be used to invoke the remote API endpoint and return the result to the client (application).

API

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

Here’s an example of how we can get the axial tilt of Mercury using the API.

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

This API service node returns quite a bit 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}Copy the code

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 JAM manages this task, with a few lines of Javascript to get the data, and some markup to present the data as valid information.

Markup

Markup makes it very easy to create visually satisfying web pages. To demonstrate this, I’ve created a simple HTML page (source code here) that you can try out, 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’ll notice that this demo is only hosted using GitHub Pages. Of course, you can also copy the HTML source to a local folder and open it on your PC. You don’t need to run the server at all. Using a content delivery network (CDN) can also help you minimize client response times.

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

Create and publish your own API endpoint without a server

SpaceX, CC0, via Wikimedia Commons

We just demonstrated that we can easily retrieve data from publicly available public endpoints. But…

If you can create and deploy your own API endpoint, 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 the data, images, and video. We can also share the API endpoints (custom functions) that we develop with others.

Serverless service

As the name suggests, the Serverless service lets developers provide API services without running their own servers. Developers only need to upload a piece of code to provide the service. Public clouds generally provide two types of Serverless services.

  • Database-as-a-service (DaaS) Provides storage and query services based on cloud databases for Jamstack applications. It is used to manage the state of an application, such as the storage of user data.
  • Function-as-a-service (FaaS) A Function service provides stateless calculations. It typically supports multiple programming languages and frameworks and provides a logical back end for Jamstack applications along with databases or cloud storage services.

Careful readers may have noticed that deploying serverless API services on a public cloud does not entirely fit the Jamstack philosophy. J and M have been deployed through edge cloud, why not A? Deploying serverless functions on edge clouds requires a new generation of lightweight software containers. This is an important application scenario for WebAssembly sandboxes like CNCF’s WasmEdge.

The Rust function calculates services

WasmEdge can be deployed on edge clouds and edge devices. It is OCI compliant and can be scheduled and managed by tools such as Cri-O and Kubernetes. WasmEdge enables developers to write secure and high-performance function services in Rust, as well as support low-code DSL solutions customized for scenarios.

In this article, we use a free FaaS service released by Second State based on WasmEdge as an example of how to develop the Serverless API for deploying Jamstack applications in Rust.

Second State provides a cross-cloud FaaS infrastructure that you can use to create, deploy, and invoke your own custom functions. Whether you want to create a whole new Web application, migrate your existing Web application, or just enhance the client side of your Web application, WasmEdge based FaaS is a great choice. You don’t even need a username and password. All calls are made over the open Web, via secure HTTP requests. You can deploy your own application within minutes.

There are a number of great pre-built demos and tutorials that enable you to learn how to create your own FaaS endpoints. These prebuilt functions (demos) include:

  • Image Classification (tutorial, Demo)
  • Facial Recognition (tutorial, Demo)
  • Sending emails (tutorial, Demo)
  • Watermarking images (tutorial, Demo)
  • Identifying food in videos (tutorial, Demo)
  • Solve the puzzle of alphabet ectopic words

You also 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 having to manage a server.”

The next step

In this article, we introduced the basic concepts of Jamstack and how to quickly develop a dynamic API based on WasmEdge for your needs. Next, we’ll show how to use The WebAssembly Runtime/WasmEdge in Vercel and Rust to write apis in Jamstack applications.