JAMstack: What is it?

I have been staying at home for almost two months and I finally got some time to draft my personal website. As Jamstack has been gaining so much attention as I have also helped a side project midway using gatsby.js. So I decided to give it a try to build my personal website from scratch. Here I am and here to share some of my experiences.

What is JAMstack?

JAMstack officially refers to Javascript, APIs, and Markups. Actually this sounds pretty vague to me as I first heard of it. From the official website(https://jamstack.org/), they are claiming: fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. hmm, interesting but how do they do that? So basically, to me, there is this important block - static site generator. It fetches the markups (eg: markdowns) at runtime to generate the the static html files. These pre-rendered files are managed by a javascript frontend component such as React at the client side. Does this sound a little bit like server side rendering except the fact that JAMstack generates the static files at build time whereas SSR does it dynamically at runtime. So when the user hits the site, they would interact with the site backed by third-party APIs such as Typeform or Stripe.

How did I adopt it ?

After some research online, Gatsby.js looks interesting. The first time I heard of the word Gatsby is at Watsons passing by the hair gel section. Then I picked netlify as the the server and Prismic.io as CMS. First and foremost, I would give Netlify a thumb-up for its simplicity and stability and also with previews for pull request checks. Netlify also has a form support by simply adding a few attribute to the <form> tag with absolutely no javascript needed:

 <form name="contact" method="POST" data-netlify-honeypot="bot-field" data-netlify="true">
      <input type="hidden" name="form-name" value="contact" />
      ...
 </form>

Graphql is used to query the data from prismic. Prismic also supports webhooks, so any content changed in Prismic would auto trigger a new build in netlify. Then you would receive notifications on netlify dashboard and it can be configured to notify Slack or to send an email. For Gatsby, it is really cool and simple to start by using one of the starter projects. You will have to pay attention for gatsby-config.js and gatsby-node.js to load the plugins and decide how you will be able to create the pages. It is worthy mentioning that the lazy loading image feature works like a charm. To connect gatsby with prismic, I have tried the gatsby-source-prismic-graphql plugin which is relatively new but it provides features like pagination by a few lines of config code in gatsby-config.js.

{
      resolve: `gatsby-source-prismic-graphql`,
      options: {
        repositoryName: process.env.PRISMIC_REPOSITORY_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        previews: false,
        pages: [
          {
            type: 'Blogpost',
            match: '/blog/:uid',
            component: require.resolve(
              './src/components/templates/blogTemplate.js'
            ),
          },
        ],
        sharpKeys: [/image|photo|picture/, 'thumbnail'],
      },
}

Why should you try it out?

So wait wait, you might be wondering that I have been talking like it is the next KING; but why should you give it a try?

Personally, I have been working on backend a lot, designing APIs, talking to databases and etc. For certain scenarios, I would say JAMstack seems to make the job much easier by almost totally crossing out the backend development. In this small project, I did not write a simple line of backend code. What are the other benefits? I went to ask google and found that:

1. Better performance (pages are pre-generated at build time);
2. Better developer experience (Yay man, you don't write backend code at all)
3. Good SEO (I have yet to find out why? my website does not rank at the first in the search results though, twitter does!)
4. Better scaling (netfliy provided feature to scale for more CDNs)

So to conclude, it was pretty fun to experiment on JAMstack and I am pretty sure I only had a look at the tip of the iceberg. You can go ahead to try it out and tell me what you find. This is my first blog and I will share more stuff on this website in the coming days. Stay tuned!