An invitation to JAMStack web-app architecture.
What is JAMStack?
JAMstack is a new approach to building websites and web applications (Utomo, 2020). The Stack, part, in JAMStack refers to the fact that we are talking about many separate layers of technology, which when combined are able to deliver a complete web site or web application.
The JAM, in the JAMStack architecture refers to client-side JavaScript, reusable APIs, and Markup (Hoang, 2020).
Why is JAMStack awesome?
From a stack comparison standpoint, another common & well-known stack, for delivering Web sites and web applications, is the LAMP stack.
LAMP, circa 1998, is a combination of Linux, PHP, MySQL and Linux.
LAMP overview
As you can see from the diagram above, from an application developers perspective, there are a lot of components to install (as well as configure and also maintain) when using a LAMP stack.
JAM overview
The JAMStack is different from the LAMP stack in many ways and this has a profound effect on the way in which developers will approach building a Website or web application.
Some of the major differences, from a developer’s viewpoint, include the following:
- JAMStack developers are not required to install or manage an operating system (such as Linux)
- JAMStack developers do not need to deal with security (server firewalls)
- JAMStack developers do not need to install or manage an application databases (such as MySQL)
- JAMStack developers can deploy their Web site or web application without an HTTP (Web) server (such as Apache)
Overall, there are 4 main benefits of choosing to create your websites and web applications using JAMStack; cost effectiveness, improved performance, better security and superior user/developer experience (Orosz, 2020).
JAM components
Let’s take a quick look at the 3 components of JAM; Javascript, APIs and Markup. Then, following this brief description, let’s focus on the API component. Specifically, ways in which we can easily create and deploy our own API endpoints using a simple cloud-agnostic Function as a Service (FaaS) offering from SecondState Inc.
Javascript
It goes without saying that JavaScript is one of the most popular programming languages for the Web. Aside from a myriad of features, Javascript allows web application developers to easily carry out request and response communication inside HTML pages. These secure HTTP requests (made by the client) can be used to call remote API endpoints and deliver results back to the client (application).
API
APIs are a great way to access dynamic features and functionality (for a given web application) in the form of a micro service. For example, there are many publicly available API endpoints which can return enormous amounts of useful data. One such example, is “The Solar System Open Data” API which can return (amongst other things) all planets, moons, dwarfs planets, comets and asteroids etc.
Here is an example of how we can obtain the axial tilt of the planet Mercury, via an API.
https://api.le-systeme-solaire.net/rest/bodies/mercuryThis endpoint returns quite a bit of data, as shown below. This is a good segway into the Markup component of JAM.
{
"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, so far, we are able to access dynamic content without provisioning any server infrastructure whatsoever. Let’s take a quick look at how we would manage this task using JAM i.e. a few lines of Javascript to obtain the data and then some markup to display the data as useful information.
Markup
Markup allows us to very easily create web pages which are visually pleasing (using just text). To demonstrate this, I have created a simple HTML page (source code here) as well as a live demo page which you can try out, as pictured below.
You will notice that the live demo is just hosted using GitHub pages. However, it is important to note that you could also just paste that HTML source code into a file and open it locally on your PC. No need for you to run a server.
If you want to generate a static site with a bit more flair there are many software products that will facilitate that i.e. Gatsby, Hugo and so forth. Using a Content Delivery Network (CDN) will also help keep your client application’s markup to an absolute minimum.
Right! Enough about presentation ;-) let’s look at functionality!
Creating and launching your own API endpoints without a server!
We just demonstrated that we can obtain data from openly available public endpoints with no effort. But …
What if you could create and deploy your own API endpoints without any additional infrastructure?
What if you could not only access this type of open data (as shown above) but also write your own customised logic to process data, as well as, images and video? What if you could also share your API endpoints (custom functions) with others?
Function as a Service (FaaS)
SecondState provides cloud-agnostic FaaS infrastructure which you can use to create, deploy and call your own custom functions. Whether you are creating a brand-new web application, migrating your existing web application, or simply boosting the client-side of your web application you should take a good look at SecondState’s FaaS. There are no usernames, no passwords, no proprietary hoops to jump through. All calls are performed via secure HTTP requests via the open Web. You can start right now and be up and running in a few minutes.
There are a number of fantastic pre-built demonstrations and tutorials which enable you to learn how to create your own FaaS endpoints. These pre-built functions (demos) include:
- image classification (tutorial, demo)
- face detection (tutorial, demo)
- sending emails (tutorial, demo)
- watermarking images (tutorial, demo)
- detecting food in videos (tutorial, demo)
- solving anagrams
The takeaway point here is that you can create your own code execution service i.e. run your own custom code without provisioning any infrastructure. SecondState’s FaaS “allows developers to upload and execute code in the cloud without managing servers” (long et al., 2020).
For those who would like additional information about storage options, callbacks, webhooks and much more, please take a look at this article which takes a deep dive into how to create your own Function as a Service (FaaS). The article also has step-by-step instructions as well as sample use cases.
What powers the FaaS
SecondState’s FaaS is a stand-alone stack-based WebAssembly (Wasm) Virtual Machine (VM) with extremely impressive performance. A recent research paper “A lightweight design for serverless Function-as-a-Service” provides research data in relation to the measurement of execution times across a range of computational benchmarks (long et al., 2020).
Get in touch
If you would like to learn more about using SecondState’s FaaS to create your JAMStack, we invite you to please get in touch.
If you have any great ideas for a web application (powered by JAMStack architecture), please leave a comment below.
Thank you for reading!
References
- Long, J., Tai, H.Y., Hsieh, S.T. and Yuan, M.J., 2020. A lightweight design for serverless Function-as-a-Service. arXiv preprint arXiv:2010.07115.
- Orosz, E., 2020. Modern Web Development with JAMsatck. Vancouver
- Utomo, P., 2020, July. Building Serverless Website on GitHub Pages. In IOP Conference Series: Materials Science and Engineering (Vol. 879, №1, p. 012077). IOP Publishing.
- Hoang, T., 2020. JAMStack Continuous Integration and Continuous Deployment with CircleCI and Netlify.
