Sujay Kundu

Sujay Kundu

Full Stack Web Developer based on Bangalore, India

Mordern Web - Jamstack, Serverless, Headless, SSG and CMS

Posted on May 26, 2019

Let’s start with Static Site Generator’s - Jekyll, Hugo, Gatsby are few of the popular ones.

Jekyll - Enter the world of Static Site Generator

Jekyll is static site generator built in ruby, uses liquid and markdown as base to build static templates. This was a bit complicated at first to understand, but after when i understood its power - its easier and too geeky for me as a developer.

Pros - Jekyll

  • No headache of depending on a backend
  • Secured and Fast
  • Uses Rubygems dependencies ( You can improve your functionality)
  • Liquid Templates
  • Highly Customizable
  • Easy Deployment using Github Pages or Netlify
  • Integrating third party plugins is easy
  • Works like a CMS, but its not. Only focuses on what you want to reciprocate.
  • Custom Domain Support
  • CDN and SSL support
  • Very Cost Efficient. All you pay is the cost of the domain.

CONs

  • Not for normal users, there’s a lot of technical things involved that one needs to understand.
  • You need to know Markup, Ruby and Liquid.
  • Not as functional as wordpress - You cant depend on Jekyll for building heavy duty apps.

For a full list of Static Site Generators - https://staticgen.com

Static Site Generator{: data-src=“{{site.cloudinary.postimgurl}}/v1594666060/cms3_ji0g35.svg” class=“img-fluid lazyload”}

JAMstack

JAMstack is a new way to build content-heavy websites and web apps. Using JAMstack delivers better performance, higher scalability with less cost, and overall a better developer experience as well as user experience. Your website architecture is JAMstack if it meets following three criteria: client-side JavaScript, reusable APIs powered by microservices, and prebuilt Markup. In many ways, JAMstack is obvious next evolution of SSG as it requires templated markup to be pre-built at deploy time usually using a site generator. However, it is important to note that JAMstack can serve both static as well as dynamic content. Using JAMstack you can add dynamic functionality such as user identity, HTML forms, and personalisation.

Going Serverless

Everyone wants to deploy a blog but worries about how to save money building one. The architecture behind Serverless CMS is that you use a Backend as service Infrastructure and only worry about the code + You can customise the looks according to your needs. Until your requirement is more than the limit, these Cloud Based services won’t charge you !

What is Serverless?

According to Wikipedia, Serverless is a cloud-computing execution model in which the cloud provider dynamically manages the allocation of machine resources. Pricing is based on the actual amount of resources consumed by an application, rather than on pre-purchased units of capacity. The server management and capacity planning decisions are completely hidden from the developer.

How does Serverless blog compare with Static blogs?

Serverless blog have some of the niceties of static blogs and overcome some of their shortcomings.

Static blogs hosting can be inexpensive and static blog tools like pelican or jekyll make it very configurable. But for every update, the blog would need to be compiled and the updates need to be pushed to deployment.

Serverless blog hosting is also inexpensive because you only get charged for each visit. The per visit charges are also fairly minimal. Adding a new blog post or updating a post happens instantly like any other online blog platform Four reasons why you should go Serverles :

  1. Most frontend Developers write Business Logic in the app. Prying eyes may try to reverse engineer and modify your app’s code.
  2. Instead of having a logic that is susceptible to change periodically when an app needs to be developed in another platform(web/mobile), a business logic can easily be abstracted into a piece of function and inserted into the server thereby exposing that function universally.
  3. You’d always need to publish a new version of your app whenever you change your app’s codebase (mobile app) and behavior.
  4. Scalability will no longer be an issue. You will only be charged for the execution times, which means no amount will be charged for unused space.

There are many providers that support Cloud Serverless CMS infra. Some of them that I know :

Cloud Providers{: data-src=“{{site.cloudinary.postimgurl}}/v1594666060/cms1_dafvbh.webp” class=“img-fluid lazyload”}

Serverless CMS :

So, In order to acheive serverless, these providers have given the ability for developers to acheive this, via using their services.There are many options now which one can use to just deploy a blog, one of them i would suggest you to try are :

  • LessPod.org + Firebase ( which I contribute to (currently in development))
  • WordPress + Shifter + AWS S
  • OpenSource Project + Zappa + AWS Lambda
  • HEXO (Open Source) + AWS S3
  • Chalice + AWS Lambda
  • Hasura + Next.js + Zeit

And the list goes on, possibilities are limitless … You can check out the Curated List of Serverless Providers here : https://github.com/anaibol/awesome-serverless

Headless CMS

difference in traditional cms{: data-src=“{{site.cloudinary.postimgurl}}/v1594666060/cms0_fyyt1w.webp” class=“img-fluid lazyload”}

The Evolution does not stop here, If you are more of a Front end developer, who don’t know how to proceed with the Backend to build API’s and managing content.. Headless CMS is what you can look to build your Blog’s with. All you need to do is connect your Frontend frameworks like React, Angular or Other with the Headless CMS services, that can help you managing your backend at ease. Some of them which I really like were:

Headless CMS{: data-src=“{{site.cloudinary.postimgurl}}/v1594666061/cms5_c2hq7z.webp” class=“img-fluid lazyload”}

A headless CMS such as Contentful has no presentation layer - a key distinction between headless CMS and decoupled CMS given they both provide content as APIs. With a headless CMS, the task of the content presentation is performed by an external client consuming APIs exposed by headless CMS. Here are few examples of an external client utilising the APIs exposed by a headless CMS: static site generator (SSG), single page application (SPA) (client-side as well as server-side rendering), a mobile app, a WordPress site, or an IoT device.

Headless vs Decoupled{: data-src=“{{site.cloudinary.postimgurl}}/v1594666060/cms4_b3n7kd.webp” class=“img-fluid lazyload”}

The Advantages Of Going Headless

  • No presentation limitations – build the best design ever.
  • Content for multiple channels – create content once, consume anywhere.
  • Highly scalable content – for all your devices and microsites.
  • Minimum training required – get started, immediately.
  • Easy integrations – connect with everything.
GraphQL

Headless with Graphq{: data-src=“{{site.cloudinary.postimgurl}}/v1594666061/cms6_jbs57j.webp” class=“img-fluid lazyload”}

Some headless CMS solutions such as GraphCMS and Mozaik are taking content infrastructure to the next-level by offering GraphQL based content APIs. GraphQL - created and open sourced by Facebook - is a powerful query language for APIs and a more efficient alternative to REST. In a nutshell, GraphQL enables a client to specify exactly what data it needs from an API - nothing more and nothing less.

For more list of Headless CMS’s : You can check out https://headlesscms.org or https://github.com/n370/awesome-headless-cms

####### Application Delivery Network

What is CDN. How CDN works{: data-src=“{{site.cloudinary.postimgurl}}/v1594666064/cms7_evafmd.svg” class=“img-fluid lazyload”}

A common theme across static sites, JAMstack, and Headless CMS is the extensive use of the content delivery network (CDN) to unlock the speed and performance. Caching API response of a headless CMS seems desirable but not essential - in the majority of cases, you are better served by caching the prebuilt Markup consuming the API response. Nonetheless, for static sites and JAMstack, CDN is essential.

Firstly, using a CDN has become a lot easier and cheaper. Now a day there are so many options - Amazon CloudFront, Cloudflare, Google CDN, Azure CDN, Edgecast, Fastly, and the list goes on. Gone the days when you required to have big fat-contract with Akamai. With most of CDN services, you can start small and pay as you go.

Secondly, having a CDN in front of origin (static site or APIs) reduces the global and regional latency. This is achieved by caching content (static HTML page, assets, APIs) at a large number of geographically distributed edge locations. In addition, CDNs scale really well - we are talking about 5-10k concurrent requests without any issues. To protect origin server from request overload some CDNs also support origin shield - an additional caching layer between edge and origin servers. Typically, this mid-tier caching is a designate edge or pop location closer to your origin server and other edge servers query origin shield rather than origin directly.

Lastly, several static sites hosting platforms such as Netlify have rolled out their own CDN. Netlify refers their CDN infrastructure as Application Delivery Network (ADN) which has no distinction between edge and origin servers. This is primarily to support the atomic deploy model and instant cache invalidation so that there is no risk of stale content or inconsistent state. With ADN, switching between multiple version of a static site is as easy as changing symlink to a directory. Atomic deploy model can be extended to advanced functionalities such as staging, instant rollbacks, phased rollouts, and A/B testing. Many conventional CDNs are unable to support some of these features due to restrictions and limitations around the instant cache purge. For example, some CDNs rate limit the cache invalidation, while others charge for each cache invalidation request.

ALL Hail ! Serverless + Headless is Here !!

This is crazy ! Think about it ! You don’t have to worry about your server cost nor your data !

“Serverless + Headless = Future of CMS”

Some of the popular and supercool stacks that I came accross :

Jamstack{: data-src=“{{site.cloudinary.postimgurl}}/v1594666060/cms0_fyyt1w.webp” class=“img-fluid lazyload”}

  • (React + Gatsby) Serverless CMS + (Contentful) Headless CMS + ( Netlify / Github Pages / Heroku ) Deployment
  • (React + Gatsby) Serverless CMS + (CosmicJS) Headless CMS + (Netlify/ Github Pages / Heroku) Deployment
  • (Vue + Nuxt) Serverless CMS + (Cockpit) Headless CMS + ( Netlify / Github Pages ) Deployment

I hope you enjoyed this post, as much as i loved writing it and realizing its vastness. Let me know what you think about this in comments. The Advantages Of Going Headless More Interesting Stuff Coming Up !!

Keep Visiting !