Jamstack Attack! Static Sites, Dynamic APIs, Killer DX

What is the Jamstack and why is it on the rise?

What is the Jamstack?

The Jamstack (originally stylized JAMstack) is an approach to building web applications that extends the ideas of “static sites” to emphasize their true dynamic potential. Originally introduced by Matthew Biilmann in 2016, then popularized by Netlify and other companies in 2017 onward, the Jamstack approach continues to grow in popularity thanks to its design for rapid scalability, performance, security, and relatively easy developer experience.

The JAM in Jamstack is an acronym that stands for:

• JavaScript
• APIs
• Markup Image credit: Colby Fayock, What is the JAMstack and How Do I Get Started? (freecodecamp.org)

JavaScript in the client browser handles dynamic interaction using a set of reusable APIs to abstract away server-side (backend) operations. An app often combines the use of many API services, each tailored toward a specific operation set (more on this later!). Markup is the technology used to serve prebuilt websites as static files to end users without delay.

Key facts and features of the Jamstack:

• JavaScript web applications
• APIs for dynamic services (no reliance on specific servers)
• Pre-rendered pages (Markup, including HTML/CSS)
• Deployed via CDN

Key advantages:

• Highly Scalable
• Highly Performant
• Highly Secure
• Easy to implement

Don’t Call Them Static Sites

“You may have already seen or worked on a Jamstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using sites built by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator. The thing that they all have in common is that they don’t depend on a web server.” —jamstack.org

Jamstack apps don’t rely on web servers. So how are they able to behave as if they do?

APIs are the secret sauce that allow a Jamstack application to go beyond being a “static site.” Web developers can use relatively simple HTTP calls to endpoints maintained and scaled by other providers, thereby abstracting away all of their server-side concerns. Developers don’t need to worry about the meticulous work that goes into building a reliable and performant backend, and can instead focus on their front end and user experience. They can make a static site remarkably dynamic with extended functionality. Developers are able to take full advantage of best-in-class API solutions offered by the industry.

API services used in Jamstack applications often include:

• E-Commerce APIs (e.g. Snipcart)
• Content Serving APIs (e.g. Contentful)
• Search functionality via third-party services (e.g. Algolia)
• Custom serverless functions
• Custom data stores and data queries

Developer Experience: Will Your API Jam?

Developers building their site with Jamstack naturally take on a microservices approach to building out their server-side functionality and are eager to make use of existing APIs that fulfill their requirements. In the early prototyping and exploration phases, the search for suitable APIs includes sampling third-party API services.

To get developers to adopt and enjoy your API, you can’t just tell them about features, you need to show them you care about their experience with your documentation. In the case of a bad or missing documentation, the crowd will inevitably seek alternatives that offer a better experience.

If you’re looking for some helpful guidance, Andy Trattner sat down with me in April to write up his 4 Steps to Implementing Stellar Documentation for the ReadMe blog, while API Engineer Jon Ursenbach told us all about How to Make Your API More Enjoyable to Use. Documentation owners will find these articles help them to feel more confident they’ve properly considered their developer experience.

More About the Jamstack

Hungry for more Jamstack knowledge? Here are some sweet resources to help you get started:

• awesome-jamstack
  • An extensive list of awesome Jamstack resources and APIs, curated on GitHub.
• jamstack.org
  • Netlify’s Jamstack resource site.
• jamstack.training
  • Tamas Piros’ free course catalog (itself a Jamstack app!).

Jam On!

The Jamstack development phenomenon shows little sign of slowing down and now you know why: fast, scalable static architecture made dynamic thanks to APIs. With an easy developer experience free of server-side concerns, we’ll continue to see its popularity rise as the age of cloud computing continues. Jam on!

(This article was originally published for ReadMe)