Jamstack
Proof of Concept
Introduction
Who isn't familiar with the large CMS packages that claim to do 'everything'? Those packages that need to be installed on servers with all the associated drawbacks. Or the CMS packages that can't do it all, but you can 'easily' install a plugin for (sometimes insecure and often untested). Who hasn't experienced the management of those packages and everything else that comes with it, such as risky releases? Let's not even start on the poor performance of your site or the costs of some of those packages.
For quite some time now, there have also been Headless solutions like Kontent, Heartcore, or Contentful. But what if you start seeing all these additional features of such a large CMS as standalone solutions?
That, in my opinion, is the principle of Jamstack. For every solution, there is a specialized SaaS (Software as a Service) package.
In this article, I will take you into the world of Vercel and Uniform, showing you why I believe this will become the new standard.
Table of contents
- Jamstack
- Headless CMS
- Uniform
- Forms
- NextJS
- Vercel
- Proof of Concept
- Conclusion
- Demo
- Links
Jamstack
What is Jamstack exactly? The JAM in Jamstack stands for:
- (J)avascript
- (A)PIs
- (M)arkup
So, essentially, you're saying that with JavaScript and Markup, you leverage APIs to, for instance, fetch your content from a headless CMS and store your forms in another SaaS package. All of this is then deployed to the 'Edge' of the web, making it quickly accessible to the general public.
Headless CMS
As a headless CMS, I have experience with Kontent, Heartcore, and Contentful. I used Contentful for my 'Proof of Concept'. Of course, there are differences between the systems, but what's important to know is that you need to let go of the concept of a traditional CMS with a tree structure of your content. Headless essentially means that your content is now accessible through various API endpoints. You retrieve all agenda items through these APIs and use them in your application to display an agenda overview. Does this sound complicated? Let me show you an example:
Xperience CMS content tree (traditional)
Contentful all page types in a container (headless)
Uniform
Visualization
To provide for a traditional CMS, you can make use of a 'visualization' SaaS package. In my Proof of Concept, I explored Uniform so that personalization could be implemented directly. With Uniform, you can create blocks on a canvas, determining the sequence, for example, of a page on your site.
Personalization
It is also possible to keep scores based on actions that take place on your site. For instance, if you have an action on a developer page with a score and a block in your canvas that listens to it, that block will be displayed. This is especially exciting if you have many campaigns on your site and you want to guide the visitor to an engaging result faster based on previous actions.
Integration with Headless
Uniform can be configured to work seamlessly with a headless CMS such as Contentful. This is very convenient and allows content editors to easily switch from the structure of their page to the components with content in their headless CMS.
Forms
An interesting point often cited as a motivation to stick to a traditional CMS is the presence of built-in form modules. Indeed, having this feature within your CMS is undoubtedly convenient. However, how could you address this in a Jamstack way?
In my quest for a ready-made forms engine, I encountered various options. However, I couldn't find a fully-fledged engine that could be easily integrated. Most engines outputted the final HTML of the form, which you could then use in your Markup. While that's useful, you might as well have a developer create a form in something like NextJS. It can be done quickly, and within a traditional CMS, you often still need a developer to tweak the form or implement something.
But then, what do you do with the data submitted through a form? You no longer have a traditional CMS that can store it for you. My solution for that was Basin. It's a straightforward SaaS solution that stores all forms sent to an API endpoint and can even send notifications and autoresponders.
NextJS
NextJS is a framework based on React. It combines the power of a static HTML site with the server-side rendering of a 'classic' server/client website. For more information, you can refer to Vercel.
What I want to emphasize about NextJS is that it not only provides the advantages of modular construction, as commonly known in React sites, but it also offers tremendous optimization for elements like images and responsiveness.
Before creating a real site, NextJS builds all codes into a static website (HTML). This way, all API calls have already been made, resulting in a super-fast website. The modular construction also has the advantage that any developer can quickly familiarize themselves with a project.
Vercel
To eventually make the PoC publicly accessible instead of just on a laptop, it needs to be hosted somewhere. However, since we're working with Jamstack, we don't use traditional web servers like Apache or IIS.
My Git repository is linked with Vercel. Once code is pushed to the production branch, Vercel picks it up and transforms it into a static website. This process takes about half a minute to a minute, depending on the extent of the transformation, and, upon success automatically goes live in production.
If you work with feature branches and push such a branch to the Git repository, Vercel also picks it up and transforms it into a static site. It doesn't go to production but gets its own URL. This is incredibly useful because you can share this URL with your tester or Product Owner. This way, you can quickly check your features with the rest of your team and speed up the production release process.
Releasing to production also becomes faster since Vercel keeps track of previous versions. You can easily revert to them because it's static HTML, which means they are just files. Releasing happens without downtime and without any loss in performance.
Proof of Concept
Would you like to know how all of this is interconnected? Then watch the video below.
Conclusion
My conclusion is that the flexibility of Jamstack is so much better than a cumbersome CMS claiming to do everything. What you often see is that a large CMS can do what it claims, but it doesn't work smoothly. A SaaS solution that specializes in that one aspect is always better than a large CMS that added it as an extra.
The speed of NextJS and Vercel continues to amaze me; the advantage of a static site is so tremendously significant. It also took almost no effort to achieve a 100% score within Lighthouse
The passage you provided discusses the benefits of using features after committing changes, the canvas feature of Uniform for determining the page structure with draggable blocks, and the advantages of personalization. The concluding question is asking why the reader has not yet transitioned to Jamstack, with an offer of support from colleagues at Human Digital.
Demo
here you can find my Proof of Concept: Serverless-Digital