Timothy McCallum, Miley Fu and Vivian Hu
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 large front ends, and has also been a hot topic in the capital markets this year. What’s the magic about it? This article will take you through the concept and development paradigm of JamStack. We’ll also discuss how emerging technologies like Rust and WebAssembly can make JamStack faster, more secure, and easier to use.
What is a Jamstack?
JamStack is a new way to build websites and Web applications. The Stack of Jamstack refers to many separate, but combined, layers of technology. When combined, they provide a complete Web application.
Jam in 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 the front-end Web UI and the API-based back-end services. Unlike traditional Web applications, which are vertically integrated, JamStack applications are modular and decentralized: UIs can be distributed via static Web servers, CDNs, or even blockchain-based storage; The back-end API services can be deployed on the cloud or served nearby by the edge nodes.
Why is JamStack awesome?
From a stack comparison point of view, another common stack for developing Web applications is Mean (MongoDB, Express.js, Angular, Node.js) after LAMP (Linux, Apache, MySQL, PHP).
An overview of the LAMP
K7. India at English Wikipedia, CC BY 3.0 https://creativecommons.org/licenses/by/3.0, via the Wikimedia Commons
As you can see from the diagram above, from an application developer’s perspective, when using the LAMP stack, there are many components that can be installed, configured and maintained simultaneously. The user interface for a LAMP application is dynamically generated by a back-end server. Most of the logic and computation is on the server. The front-end browser is only responsible for rendering.
An overview of the JAM
JamStack differs in many ways from the LAMP stack, which has a profound impact on the way developers build websites or Web applications. In terms of deployment architecture, the JamStack application’s user interface is “compiled” to generate static web pages, which greatly improves performance, security, and reduces server-side complexity and computational load.
From a developer’s perspective, some of the major differences include:
- JamStack developers don’t 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 HTTP (Web) servers such as Apache
Overall, there are four main benefits to choosing JamStack to create websites and web applications: cost effectiveness, improved performance, 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. Then, 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 call a remote API endpoint and return the result to the client (the application).
API
An API is a great way to access dynamic data in the form of a microservice. There are a number of 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 the planets, moons, dwarfs, comets and asteroids.
Here is an example of how we can get the axial tilt of Mercury from 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 bit of data, as shown below.
{ "id": "mercure", "name": "Mercure", "englishName": "Mercury", "isPlanet": true, "moons": null, "semimajorAxis": Inclination inclination 57909227, "perihelion": 46001200, "aphelion": 69816900, "eccentricity": 0.20560, "inclination": 7.00000, "mass": {"volValue": 3.30114, "volExponent": 23}, "vol": {"volValue": 10}, 5.42910, "Gravity ": 3.70000," Escape ": 4250.00000, "Mean Radius": 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 don’t have to set up any server infrastructure to access dynamic content. Let’s take a quick look at how to manage this task using Jam, with a few lines of JavaScript to get the data, and some markup 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) 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 hosted using GitHub Pages only. Of course, you can also copy the HTML source code to a local folder and open it locally on your 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, and others.
Create and publish your own API endpoints without a server
SpaceX, CC0, via Wikimedia Commons
Just demonstrated how effortlessly we can get data from publicly available public endpoints. But…
If you can create and deploy your own API endpoints, but don’t want any extra servers, is there any way 🤔?
Not only can we access open data (as shown above), but we can write our own custom logic to process data, images, and video. We can also share the API endpoints (custom functions) that we develop with others.
Serverless service
As the name implies, 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 kinds of serverless services.
- The Database-as-A-Service (DAAS) Database service provides JamStack applications with cloud-based Database storage and query services. It is used to manage the state of the application, such as the storage of user data.
- The function-as-a-service (FAAS) Function service provides stateless computation. It typically supports multiple programming languages and frameworks, and works with a database or cloud storage service to provide a logical backend for JamStack applications.
Careful readers may have noticed that deploying Serverless API services on a public cloud doesn’t fit neatly into JamStack’s philosophy. Both J and M are already deployed through the edge cloud, so why not A? Deploying serverless functions on edge clouds requires a new generation of lightweight software containers. This is an important application scenario for CNCF’s Wasmedge WebAssembly sandbox.
The Rust function evaluates the service
WASMEDGE can be deployed on edge clouds and edge devices. It is OCI compliant and can be scheduled and managed by tools like CRI-O and Kubernetes. WameEdge enables developers to write secure, high-performance functional services in Rust, as well as support DSL low-code solutions tailored for scenarios.
In this article, we use a free FAAS service published by Second State based on Wasmedge as an example of how to develop a Serverless API service 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 brand new Web application, migrate your existing Web application, or simply enhance the client side of your Web application, WASMEDGE based FAAS is a good 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 in a matter of minutes.
There are many great pre-built demos and tutorials that will enable you to learn how to create your own FAAS endpoints. These prebuilt functions (demos) include:
- Image Classification (Tutorial, Demo)
- Facial recognition (tutorial, demo)
- Send email (tutorial, demo)
- Watermark Images (Tutorial, Demo)
- Identifying Food in Video (Tutorial, Demo)
- Solve the puzzle letter heterotopic words
Why don’t you try it?
The point here is that you can create your own code execution service, which runs 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”.
The next step
In this article, we introduce you to the basic concepts of JamStack and how to quickly develop a dynamic API based on WASEdge to suit your needs. In the next article, we’ll show you how to use the WebAssembly Runtime/ Wasmedge in the currently popular Vercel and Rust functions to write APIs in the JamStack application.