Category Archives: Uncategorized

APIs Everywhere ( JAMstack )

Everywhere I turn there is a new API and the list is growing day-by-day. Amongst all the buzz there was another message being broadcasts… It was the “JAMstack”.

What is the JAMstack?

  • “J” for JavaScript
  • “A” for APIs
  • “M” for Markup
  • “stack” for the technology needed to accomplish this feat

image attribution (https://www.smcculloch.com/code/netlify-contentful-jamstack)

But what is the JAMstack really? I know the “MeAN stack”MongoDB, Express, Angular, and Node. I thought knowing the definition of the acronym would help me understand this new methodology, but it didn’t. All these terms are just that, terms. So, it was time to dig into this new phrase and see what all the buzz was about.

Basically, JAMstack was an idea created by Netlify. In my opinion JAMstack is a philosophy more than anything else. I say this because there are no rules, limitations or examples that you “must” follow. As far as I could discern it is the philosophy of serving static page sites that have API data displayed in them the best way you can. In this post we will breakdown some of the things I learned. By no means am I an expert on this. I took some time to investigate it and here I will present you with my findings.

Below we will cover some key parts of the JAMstack you should become familiar with if you plan to become a pro at it.

Breaking down the JAM-stack

  • Static Site Generators (SSG)
  • Hosting Services, or CDNs
  • Postman
  • Go Template Language
  • JavaScript (nuff said)
  • GraphQL
  • Headless Content Management Systems (Headless CMS)

Static Site Generators

SSGs are used to create your static site files. I would have loved to have these when I started designing websites back in 1999! I am sure they existed back then, but these are much more mature than anything last century. I fell in love with Hugo. Hugo uses the Go Templating Language to help you make powerful templates you can combine with your Markdown. Hugo is fast and Go is cool, so I instantly became a fan-boy. But there are tons of choices out there. This is a growing market so don’t stop at Hugo investigate some of the ones listed below.

  • React… Gatsby and Next
  • Vue… Nuxt and Grisdome
  • Python… Pelican and MkDocs
  • Ruby… Jekyll, Middleman, and Nanoc
  • Go… HUGO and InkPaper
  • .Net… Wyam and Pretzel

Gatsby.js is being used by Node.js to update their website. I would suggest following their regular YouTube post about this or join the working group and help. We (Node.js) could always use more contributors. This would be a good way to see professionals using an SSG and maybe learn a few things.

PLUG for Node.js…
*Get caught up on the
“Working Groups – website redesign” videos
*You can contribute to the
Github repo

Jekyll is another SSG I would suggest based on the size of the community. I don’t currently use, or know Ruby, but I hear there are a ton of plugins to do whatever you might need. If you run into a problem Ruby is a popular language and I am sure you could find some great help if you asked.

The pros and cons of SSGs

Pros

  • Fast page load times
  • Security and reliability (shrinks your attack surface)
  • Flexible

Cons

  • Content management
  • Administrative tasks
  • Dynamic features

Hosting Services or CDN or ADN ( Application Delivery Network )

With static html files you can deploy your site to a CDN “Content Delivery Network” easily. Here I will be covering hosting services, mainly Netlify. I only had a limited amount time to investigate the JAMstack so I made decisions based on ease of use. I tried to use Contentful and ran into some road blocks. I don’t know if it was them or me but because of the problems, I had to move on. Netlify worked like a dream. I watched a few videos then I was off and running. Good job Netlify, you should thank SnipCart for making you look so good.

Using Netlify was as easy as turning my Hugo folder into a git repository. I uploaded my files to Github then Netlify took over. With a free trial I was able to host a Github repo (here). I used the Hugo theme “Terminal” because it looked fun. The site is deployed here.

There are some gotchas. The main one is read the documentation. Netlify cares about the file structure of your site and if anything is missing it will fail to deploy. The other main issue I ran into was deploying the site with the theme. I don’t use git submodules and didn’t realize there are special considerations when deploying a git repo inside another git repo, hence the name “submodule” LOL. After combing through some errors, I had to nuke the Terminal theme and re-add it as a submodule. After that it was smooth sailing. Netlify is taking some getting used too because I have a habit of uploading my changes to github immediately even if the code is not working. If you are like me, but don’t want to break your site because you uploaded some “code in progress” I suggest changing your setting or locking the deploy to the last known working commit.

Netlify is considers itself an ADN “Application Delivery Network”. Other Hosting Services that came up in my research were Github pages and Zeit. Zeit has the creator of Mongoose on its team so I will be looking into them seriously when I have time. Mongoose is used to create schemas for MongoDB and I love it.

Postman

I don’t think I have to say much about Postman but if you don’t know what it is then I suggest you get educated. Postman is a tool to aid you in working with REST APIs. It is not necessary, but it simplifies a lot of the abstraction and work needed to test REST APIs.

I would say the API part of the JAMstack is the most problematic. I am so used to calling my APIs from JavaScript, but that kind of goes against the “philosophy” of JAMstack. Once your quote on quote “static website” makes API calls it is kind of not a JAMstack site.

The real paradox is!

It probably is still JAMstack if you use API calls from the site??!!? I know it “bakes my noodle” too. I suggest listening to Coding Blocks and hearing some professionals banter back and forth about it (podcast episode found here).

Go Template Language

I don’t know Go, but now I want to learn it. Hugo is written in Go. Being on a windows machine I had to download the executable to get Go running. If you are on a Mac, then the world of Go should be much easier for you. I assume that Go is the reason Hugo builds pages so fast. I have had an ongoing conversation with Go fans that I meet in SF. People seem to like Go and advocate hard for it. I only hear about Go being used for Kubernetes and servers. The Go templating language was the first time I saw Go in my realm, small/solo developer coding realm. It was easy to follow, given that I haven’t studied it yet. Plus, I like the way it looks in the markdown files. I am all for Go and plan on adding it to my list of languages to study soon.

JavaScript

I don’t know Go, but now I want to learn it. Hugo is written in Go. Being on a windows machine I had to download the executable to get Go running. If you are on a Mac, then the world of Go should be much easier for you. I assume that Go is the reason Hugo builds pages so fast. I have had an ongoing conversation with Go fans that I meet in SF. People seem to like Go and advocate hard for it. I only hear about Go being used for Kubernetes and servers. The Go templating language was the first time I saw Go in my realm, small/solo developer coding realm. It was easy to follow, given that I haven’t studied it yet. Plus, I like the way it looks in the markdown files. I am all for Go and plan on adding it to my list of languages to study soon.

GraphQL

I don’t know GraphQL. I need to learn GraphQL. But I suggest trying to use GraphQL because it will allow you to decouple your front end from the API implementation. Think of it like an abstraction layer to your data. I don’t see anyone talking about this yet with JAMstack but Francesca Guiducci (Twitter @engfragui) gave a great talk at SFNode about GraphQL and the benefits of using it this way. Again, this is on my short list of things to get educated and up to speed on.

Headless CMS

We are at the end of the article. If you like the JAMstack but are stressed because your site is in a CMS like WordPress don’t worry. There are ways to access your old data and move forward with the JAMstack anyway. I suggest you use the Headless CMS solution if you know you want to migrate to the JAMstack but you don’t have time to re-write everything the JAMstack-way. A headless CMS will allow RESTful API access to WordPress or another CMS. Benefits of Headless CMS are:

  • Manage user permissions
  • Manage editor roles
  • Manage content

Now where do you go from here? Share your story. JAMstack is newer and needs more people sharing their journeys.