12 Tips for Working With the Jamstack
Tags: javascript, html, css, webdev
Published: 2020-12-07 10:46:28

The <a href="https://jamstack.org/" target="_blank">Jamstack</a> has finally become mainstream and is one of the hottest topics in 2020 and beyond. The concept got a lot of traction and is taking off. And, as a web developer, you should be on board, whether you like it or not.

And even if you do not like it, it’s good to know what people are talking about. Keeping you up-to-date is what gives you an edge in this industry, so always be open-minded about new things!

So, what is this Jamstack? Well, it is JavaScript, APIs, and Markup. But it also is much more than that! When people talk about the Jamstack, they don’t talk about things like operating systems, back-end programming, databases, or specific web servers.

They don’t talk about specific technologies but about a new way of building applications and websites that are highly performant, have higher security, scale very well at lower costs, and provide a better developer experience.

To help you leverage the benefits of the Jamstack and stay ahead of the curve as developers I give you some tips and tricks you should know about when working with the Jamstack.

---

## 1. Utilize a CDN for Hosting
One of the biggest benefits of Jamstack applications is that they don’t rely on a back-end implementation (server-side code).

Instead, you can deliver the whole app directly from a CDN (Content Delivery Network) such as Cloudflare or similar services.

This results in a great performance and fast response times all over the world because no matter where a user is, there also is a CDN-node close to them most of the time!

---

## 2. Make Use of Atomic Deploys
Jamstack projects usually consist of hundreds or thousands of files. Uploading all these files one after another for a necessary deployment might cause an inconsistent state. Definitely not something you want!

With atomic deploys, you can upload all files and wait until everything is ready before any changes occur to production.

---


## 3. Use Modern Build Tools
Jamstack projects work great with state-of-the-art technology such as Babel, PostCSS, Parcel, etc. Don’t wait until browsers adopt new features, use them right now with the best build tools on the market!

---

## 4. Automate Your builds
Jamstack projects make use of Markup files that are prebuilt. To have changes go live, another build process is necessary.

Modern hosting providers give you the tools and services to automate builds to save you frustration. Alternatively, you can use webhooks for this.

---

## 5. Entire Projects in Git
Because Jamstack projects consist of static files and assets, having your whole project in Git is recommended.

Everyone is then able to clone the project, install packages and dependencies via npm or Yarn, and run everything locally without having to set up databases or run complicated installation routines.

---

## 6. Instant Cache Validation Is Important
Something to keep in mind when running a Jamstack application via a CDN is that many services cache your files and assets.

So, to see changes after deployment, it becomes necessary to invalidate caches on a regular basis, preferably via an automated process.

---

## 7. Static Site Generators Are Your Friends
Many if not most Jamstack applications are powered by today’s best static site generators like <a href="https://www.gatsbyjs.org/" target="_blank">Gatsby</a>, <a href="https://nextjs.org/" target="_blank">Next</a>, <a href="https://nuxtjs.org/" target="_blank">Nuxt</a>, <a href="https://gridsome.org/" target="_blank">Gridsome</a>, <a href="https://gohugo.io/" target="_blank">Hugo</a>, etc.

These combine the power of PWAs and server rendering with great effects on SEO and page speed. They also come with a lot of cool features such as preconfigured bundlers like <a href="https://webpack.js.org/" target="_blank">webpack</a> or Parcel to speed up application development.

---

## 8. Front-End Frameworks Need Some Tooling Experience
If you want to work with a front-end library or framework like React or Vue on a Jamstack project, that’s possible.

However, those libraries, in general, don’t output static files so some tooling is necessary to achieve your goals. You should think about using Next or Gatsby instead of plain React or Nuxt/Gridsome instead of Vue to combine the best of all worlds!

---

## 9. Choose a Jamstack-Friendly Hosting Service
With the rise of the Jamstack, great hosting services have emerged, such as <a href="https://vercel.com/" target="_blank">Vercel</a>, <a href="https://www.netlify.com/" target="_blank">Netlify</a>, <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>, and <a href="https://www.stackbit.com/" target="_blank">Stackbit</a>. They offer great support and one-click/one-command deployment services for your applications.

---

## 10. Serverless Functions Work Well
Because you generally don’t want to develop a real back end in Jamstack applications, many developers make use of serverless concepts for data and business logic.

Serverless solutions like AWS Lambda are great choices for running small pieces of logic without the need for taking care of servers.

---

## 11. Custom Data Via Serverless Databases
For storing dynamic data without having a back end and a database, developers can make use of services for serverless databases such as <a href="https://fauna.com/" target="_blank">FaunaDB</a>, <a href="https://serverless.com/blog/running-scalable-reliable-graphql-endpoint-with-serverless/" target="_blank">Serverless GraphQL</a>, or similar.

---

## 12. Headless CMS + Jamstack = Awesome
To power Jamstack applications like blogs, headless content management systems are the best choice.

Services like Netlify CMS, <a href="https://www.contentful.com/" target="_blank">Contentful</a>, <a href="https://forestry.io/" target="_blank">Forestry</a>, or even headless WordPress work perfectly in conjunction with a Jamstack app. A decoupled back end even has security benefits (think of WordPress attack vectors…).

---

### Conclusion
So, I hope you get why the Jamstack is pretty awesome. If you are not sold yet, here is a great video by Sarah Drasner (Netlify) about the Jamstack. Check it out!

{% codepen https://codepen.io/sdras/pen/NWqNBzV %}

I recently started a new site [The Smart Coder](https://thesmartcoder.dev/). This article is from there, you should check it out :)

**If you like what I write and want to support me and my work, please follow me on [Twitter](https://twitter.com/simonholdorf) to learn more about programming, making, writing & careers🥰**