Jamstack isn't a new ideology, it's been about for a while now and has gained momentum over the last few years. So instead of delving deeper into what is Jamstack, why not get our hands dirty and go into the few reasons why you should consider it!
What is Jamstack? Benefits and Best Practices for Web Developers
Jamstack is an architecture created to make the web faster, secure, and easier to scale--It's a methodology of how to build a site. It builds upon a number of tools and systems. Jamstack's flexibility is precisely why developers love it and why I thought it would be best to address what is Jamstack for aspiring developers.
Less moving parts
As a developer, I want to make sure I deliver solutions to clients that matches their requirements. If a client is updating a site once every few months, why do we need a big Wordpress/Statamic/Perch build for something that remains static 95% of the time? So, we have a few options technically that'll allow us to get static performance:
- Use a management system with a caching plugin, so the CMS builds a HTML cache of the projects. WP Super Cache, Statamic Static Caching all do this and it works great! However, we have to host the software on a good hosting platform, and with that comes great responsibility to make sure software is up to date, well maintained and that any plugins are used are also kept up to date.
- Build directly in HTML/CSS. As developers this is a luxury we'd love to have, so we can keep control over every line of code and make sure clients don't end up ruining semantics, design or usability. However, as we know clients need to be able to update their site to stay relevant, so this is a less than ideal option.
What if we could hybrid this approach? What if we could make sure a management system is purely managing content, and the front-end is a HTML/CSS that's updated when we update content? This is where Jamstack excels. Let's explore:
- Using a site generator like 11ty, we can pull in data from any API. As the site is build at build time rather than runtime, we don't have to install plugins or create software that caches it. From an efficiency point of view, we can build the site at anytime, so it can rebuild once a day, via a webhook or whenever you like really! This lowers API requests and only updates the site when you really need it too. This is efficient.
- Decoupling the front-end from the backend means we've got a build that's more secure, more stable, lighter in weight and ultimately a lot faster. If your CMS goes down, or a third-party API goes down, the build would simply fail and the older cached version would remain stable. That's awesome.
- In situations where you need to run server functions, most platforms that host Jamstack websites have what we call serverless functions. These are small microservices that have a particular service. In the past I've used these to connect forms to CRM's. But the possibility is endless! You could run a Jamstack eCommerce that connected to Stripe to power a shopping cart (see example).
- And what about a CMS? Well we could use a variety of data sources. Heck, I've built websites that are powered via AirTable rows to pull in available jobs that are paginated. But in a more typical approach, I generally use Netlify CMS or Sanity. Netlify CMS is a git-based CMS, which means it connects to your repo and directly looks at the source to connect data to fields. This means you could plugin Netlify CMS at any point and it'd just work. Magic. Sanity is more of a headless CMS where we pull in data via the API, and then output it where we want it (see example).
The Jamstack developer experience
I've been using 11ty for the past year, and it's brilliant. It gives me as a developer a layer over the top of HTML/CSS to re-use code and allow my code to scale. But the key thing is that it only ever does what I tell it to. I feel in complete control of the build output and can manipulate it however I like. I can pull in data from almost anywhere, manipulate it to my hearts content and include it in templates. This is what I loved about Perch in it's prime. It allows me to separate front and back-end and have a clear picture as to what is getting pulled in from where. It means if I need to replace a data source, the data is so clear on where it comes from, how it's manipulated and can be a seamless transition.
Why is this better than a typical CMS (e.g. Statamic/Craft/Perch)?
The beauty of this stack is you could in theory power a Jamstack site with these products, and keep all the benefits of Jamstack. Imagine in a few years time and the client wanted a particular feature on another CMS, or if a CMS was no longer maintained. In a typical build, we'd have to start from scratch and rebuild the site on the new platform, as they all have their front-end techniques, be it Nunjucks, Antlers or Perch's templating language. With Jamstack, we'd use the headless API's that these provide, and pull in the data to the front-end. We can swap out the dependency and keep control of our front-end.
Most of my clients are small to medium businesses who update their site once every while. They don't need a big CMS initially, they don't need everything that comes with Statamic for a 10-page site. They just want a site that works, performs and can grow with them. With Jamstack you could start with Netlify CMS to power a blog, then migrate this to a larger CMS if you needed to. No front-end rewrites, just a data swap and a few updates in the templates we've created.
Out of the box
Products come and go. Wordpress has been out for a long time and I've never been a fan. Why? Because out of the box, I generally have to install a minimum of 5 plugins before I'd be happy to ship. A caching plugin, a security plugin, an editor plugin. This is mad. Out of the box I want a product that will deliver 100 scores on lighthouse, that I can start building with instantly. A combination of 11ty and Netlify allows me to launch a git versioned, fully hosted, https secure, state of the art cache and cache invalidation site, preview builds/domains within minutes. Statamic would require a server setup, git integration turned on, static caching configured and this is all time lost as a developer. I'd rather spend that time delivering better quality sites that are technically well built, whilst saving the client time and money too.
The Jamstack benefits:
- Better performance
- Improved security
- Less code
- Lower risk of failure
- More control over every line of code.
- Less server maintenance as platforms like Netlify just handle everything technically for you, with great support and world-class hosting. I've also used Vercel, which is fantastic too!
- A website that you know will scale. It's a static site at the end of the day.
I was skeptical at first as I didn't really understand what is Jamstack and what it could offer my clients and I, but I'm now fully invested in Jamstack and won't be reverting anytime soon. Are you looking to get started with Jamstack or want a beginners guide? I regularly post on Twitter about all things Jamstack!