JAMstack is quite popular right now in the developer world. But what exactly is it? Should you use JAMstack for your next project?
Termed as a new approach to make our websites faster and more secure, does it live up to the hype?
This is a quick guide to JAMstack.
What is it?
JAMstack is revolutionizing the way we think about workflow by providing a simpler developer experience, better performance, lower cost, and greater scalability.
This is all great. But in practice, what does it really mean?
For a long time, web developers used coupled CMS: it organized development efforts and gave clients the autonomy to manage their site. This made the hand-over of web projects and customization by the client easier.
But that was 5+ years ago.
Many web developers have since felt the pains of working with CMS. We became aware that traditional CMSs (WordPress) were too much. We realized how cumbersome and opinionated they were. They also had numerous security problems such as cross-site scripting, brute force attack, file inclusion exploits, and malware mostly from Plug-Ins.
Unlike the large legacy apps, Jamstack projects neatly separate the frontend pages and UI from the backend apps and databases. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN.
Before deployment, the entire front end is prebuilt into highly optimized static pages and assets. This happens in a build process (before being deployed/hosted).
Serve pre-built markup and assets over a CDN
No need to worry about server or database vulnerabilities
Hosting of static files are cheap or even free
Better developer experience: Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development
If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.
When building Jamstack projects, you can really get the most out of the stack if you stick to a few best practices.
Because Jamstack projects don’t rely on server-side code, they can be distributed instead of living on a single server. Serving directly from a CDN unlocks speeds and performance that can’t be beaten. The more of your app you can push to the edge, the better the user experience.
With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction and also simplifies staging and testing workflows.
Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.
Because Jamstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.
As Jamstack projects grow really large, new changes might require re-deploying hundreds of files. Uploading these one at a time can cause inconsistent state while the process completes. You can avoid this with a system that lets you do “atomic deploys,” where no changes go live until all changed files have been uploaded.
When the build-to-deploy cycle becomes a regular occurrence, you need to know that when a deploy goes live, it really goes live. Eliminate any doubt by making sure your CDN can handle instant cache purges.
So, what tools should you use for a JAMStack?
The good news here, there are a ton of tools currently available and a ton more on the way. They might still be a little rough around the edges, but that’s because this is a brave new world of tooling and that takes some smoothing out to get just right.
Pick your favorite flavor of the UI framework and get off the ground running.(Gatsby, or Scully for Angular fanboys)
Tools like Netlify make it easy to configure by hooking into your Github repo and building anytime a new commit gets pushed, but of course, you have options like AWS if you want more control.
Making your app dynamic
Make your web app dynamic: I’m not going to list a bunch of examples per type, even better, here are a few tools and places you can find some resources.
Auth0 — Authentication
Cloudinary — Media management
Google Analytics — Web traffic analytics
headlesscms.org — Endless list of headless CMSs
Sanity — CMS
Serverless Framework — DIY, easy to deploy serverless resources
Snipcart — Ecommerce
Stripe — Payment management
And a bunch of other resources…
And a bunch of other CMS choices…
And some general info and tools…
Missing your favorite JAMstack tool or an awesome example? Connect with me on LinkedIn or comment below.
Have a great day(or night) wherever you are, from Nairobi.