Building an image processing application; using JAMStack
This article is a continuation of a previous article called “An invitation to JAMStack web-app architecture”. In that previous article we discovered how easy it is to create Javascript, to access API endpoints, and then display the results of those endpoints via Markup (JAM).
We now know that there are many free-to-access API endpoints which will provide raw data (such as the Solar System Open Data API, which we introduced in the previous article).
In addition to accessing free data, we can now also write custom functions and execute these custom functions as APIs. This Function as a Service (FaaS) approach to JAMStack, lets you boost your client-side Javascript, giving your zero-infrastructure application powerful server-side performance and functionality (without the overheads of actually running your own servers and dealing with security/networking and so forth).
Let’s look at a concrete example of how we could build an image processing application using JAMStack.
HTML
Firstly, let’s break down what we need in terms of HTML; a form, some buttons and a Javascript function.
A form
We will need to create a simple form element.
<form id="draw" enctype="multipart/form-data">We then need to create an input element for the form. This will allow the user to upload an image file.
<input type="file" class="form-control-file" id="input_image" name="input_image">Some buttons
This image processing application has 8 seperate functions, so we can go ahead and create one unique button per function.
<button class="btn btn-primary mb-2" id="process_grayscale" name="process_grayscale" value="1" onclick="return callService(273, 'grayscale');">Grayscale </button>Take particular note of the onclick attribute of the button element above; notice that it is executing a Javascript function called callService?
A Javascript function
The Javascript for this application is all contained as a single function called callService. This function takes two parameters an ID of the FaaS API and the name of the FaaS function. Please see Gist below for the complete HTML code. This is very straight forward.
Now that we have the Javascript and the Markup sorted, let’s take a look at the APIs that our application is calling.
The FaaS API endpoints
The APIs are separate endpoints which we have already deployed to SecondState’s FaaS. Here is an example of the grayscale image processing (complete with instructions on how to build and deploy). As you can see, the source code for this grayscale image processing is very simple and compact.
If you were creating your own custom function you would (first create some Rust and then) compile the rust code into WebAssembly by simply typing one command …
Then, the compiled WebAssembly binary (as the instructions show) can be easily deployed as a FaaS, via one secure HTTP request.
Once deployed, our aforementioned Javascript function called callService can go ahead and execute this grayscale image processing FaaS on the user’s behalf.
Live demo
There is a live demo of this image processing application.
The aim of this article was to provide a concrete example of how you can build and deploy a web-app in minutes without any infrastructure (other than perhaps a laptop and internet connection).
If you would like to expand your ideas in relation to “what app to create” please read my recent Programming the Web with WebAssembly article which demonstrates how SecondState’s FaaS infrastructure provides persistent data, callbacks, webhooks, storage and much more. You application could store data, fetch remote files, notify users, send emails …; the sky is the limit.
If you would like to build a web-app with this genre of infrastructure, or if you would like to migrate your existing server based applications to a this type of zero-infrastructure design, please get in touch.
Thanks for reading.
