In the beginning (of the web), Tim Berners-Lee created HTML, the markup language we all know and love for creating static webpages. Not content with the staticity of the web, us humans have since created innovative ways for making content dynamic by coupling databases and web servers to render our sites on the fly, often separating content from HTML. Sadly, as a result of this we’ve also created some very big problems, most notably: performance, scalability, security, cost and maintenance. Fast forward to 2020 and we’re embracing a new era that’s focused on returning the web back to its core, and it’s as delicious as its name Jamstack may suggest.

So, just what is Jamstack?

Not long ago static site generators (SSGs) exploded in popularity, driven in part by the emergence of Jekyll, which is still one of the most popular SSGs today. Some very clever developers began to realise that static sites could be more than just static and as performance, accessibility and scalability became philosophically adopted as must-haves, a movement towards a modern architecture that provided this took place.​The term Jamstack was coined by Netlify CEO Mathias Biilman in 2017, who described it as:​

“A modern development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”.​

Let’s look at each of these in a little more detail.

JavaScript

JavaScript handles the dynamic functionality in the stack, allowing us to get creative and add interactivity. This means you could use a framework or a library, like React or Angular JS, or just straight up vanilla JavaScript.

It’s important to note that all of the JavaScript runs entirely on the client-side, meaning we can take full advantage of a CDN, saving us from having to pay for hosting and configure a server.

APIs

Need a content management system (CMS)? Need a payment processor? Need a contact form? No problem! This is where application program interfaces (APIs) come into the mix.

APIs take care of all server-side processes and – just like conveyor belt sushi – you can mix and match APIs to your heart’s content. These include services like: Auth0 for managing user authentication; Stripe for processing payments; Formspree for facilitating contact forms; Contentful as a headless CMS; and Algolia for blazing fast search.

The list goes on and, even better, it’s growing daily. By decoupling our backend services from our front-end markup, we open up opportunities to carefully curate the correct architecture for all of our client projects, building bespoke solutions that meet each project’s specific needs.

Markup

Let’s circle back to static site generators (SSGs) for a second to remind ourselves of how we got here….

SSGs generate static HTML files. These are pre-built and then deployed to a CDN such as Netlify, versus at runtime on a traditional server which happens when you request a page from, for example, a WordPress site.

One of the many beauties of HTML is that it’s lightning-fast. Nothing compares to it in terms of speed, especially when we benchmark it for time to first byte (TTFB). HTML, after all, is what our browsers interpret and display on our screens, so by rendering at build-time we’re removing the need for any server rendering round-trips. We can then use JavaScript or APIs to add dynamic functionality to our static sites or web apps.

Do we need JAM in our stack to be Jamstack?

The short answer is no. A straight up static site deployed to a CDN with no JavaScript or APIs is still considered Jamstack. The beauty is its flexibility, so you can go all out with JavaScript, APIs and markup or alternatively use only what you need for your project.

Our Top 3 Reasons for Using Jamstack

There are honestly too many reasons to embrace Jamstack for one, brief article, but we’ve picked our top three reasons to explain why we’re all in on Jamstack at Little Thunder.​

1. Performance

As we’ve already explored, static sites perform better. In a world where even milliseconds can cause lost revenue and affect search engine rankings, we can supercharge the performance of our websites by pre-building our pages and deploying them to a CDN. This reduces latency, distributes our assets globally and caches them, meaning our users enjoy a faster experience, regardless of where they are in the world.

You can test the performance of your own website here, and while you’re at it why not test ours.​

2. Security

By abstracting server-side processes into APIs, we no longer have to worry about server or database vulnerabilities. The user is served static HTML pages ensuring they’re super-secure and with no databases or server-side software running, it leads to a massive reduction in the potential for hacks and malicious code injections. Compare this to the statistics in a recent report from 40,000+ WordPress websites in the Alexa Top 1 Million – which showed that more than 70% of WordPress installations are vulnerable to hacker attacks – and you can see why we’re embracing Jamstack on current and future projects.

3. Cost

We can break this into two sub-points — the cost to us and the cost to our clients. For us, it improves the developer experience and lowers the barrier for entry for our staff and other developers we work with.

This means development time is quicker, our costs are lower, and our clients are happier. It also removes the need to manage and maintain servers and databases, deal with hacks, update plugins, which – let’s face it – nobody likes to do! Instead, we can deploy to a CDN and depending on the requirements of the project, the cost of this may even be zero.​

Let’s Jam!

Would you like to discuss Jamstack and how it could work for you in an existing or future project? Maybe you’d like to discuss migrating your Wordpress site or existing CMS to Jamstack? If so, drop us a line, we’re passionate about Jamstack and would love to chat about how we can use it to help solve your problems.

Summary

What it means for us - We can develop faster, cheaper and sleep better knowing that our sites are secure, performant, reliable, serverless and global thanks to a content distribution network (CDN).

What it means for our clients - We can deliver projects faster and more cost effectively, and offer peace of mind with regards to security, performance, scalability, SEO, maintenance and uptime.