fbpx Skip to content

Aquent | DEV6

JAMstack Overview

Written by: Shane Whittaker

For over 4+ years, using a CMS like WordPress was the simplest and easiest tool for sites: It managed development and gave users the autonomy to manage their content. Since then, many developers like me have felt some growing pains with plugins and even site customization.

After doing some research on JAMstack, it was immediately obvious that this approach to development and content management seemed like the solution to the headaches experienced when using a system that is doing too much – i.e. a traditional CMS.

What exactly is JAMstack?

JAMstack is a modern web development methodology based on the following three elements:

JavaScript: Entire execution on client-site for dynamic functionality

APIs: Server-side operations are abstracted into reusable APIs

Markup: Templates pre-built with Static Site Generators at deploy time

Why use JAMstack?

Overall with this new methodology, we can deliver a site that feels as responsive and smooth as a native app — without the overhead of a traditional CMS. Porting content from WordPress to JAMstack is no longer a huge factor with the help of a WordPress Importer.

  • Improved security – Since the method is based upon static markup, server-side execution is completely out of the picture leaving almost zero possibility of security threats
  • Faster performance – The website pages are pre-built and deployed to CDNs reducing the time to start the download of the first byte – because no code needs to run on the server.
  • Scalability – Since APIs make the content available to microsites, landing pages & mobile applications, users can have easy access to the content anywhere and the Content Delivery Network seamlessly compensates for high usage
  • Frictionless developer experience – Without being tied to the monolithic architecture of a traditional CMS, developers can truly focus on the front end and this typically translates to quicker and more focused development cycles
  • Maintainability – By taking away the server-side aspect of the application, complexity is removed resulting in the site becoming simpler to maintain
  • Improved site uptime – If the backend goes down using JAMstack, the site remains up — updates fail until the API comes back online, but the static web pages are still served to the end users.
  • Reduced cost – The lowered complexity of development and maintenance help reduce costs as opposed to more monolithic architectures

How to get started with JAMstack?

Development

There are a few approaches to develop using JAMstack, and here are two of the most common:

  • Static Site Generators – Simply put, these generators take site content, apply it to templates, and generate a site of purely static HTML files ready to be delivered.
    Popular Site Generators include: Gatsby, Next.js and Hugo
  • Frontend Framework – JavaScript is everywhere nowadays and nowhere is it more noticeable than in the evolution of these frameworks in the last few years. They’ve transcended the world of browsers to become the go-to for Single-Page Applications (SPA), Progressive Web Apps (PWA) and mobile apps everywhere.
    Popular Frontend Frameworks include: React, VueJS and Angular

Deployment

Once the site or application has been built, it needs to be hosted somewhere. There are great services that provides this for free and with ease. Most developers turn to GitHub pages, Netlify, Stackbit or Zeit to host the code.

What else can I do with JAMstack?

JAMstack websites don’t have to be static. There are several great services available to help bring some dynamic data to a site.

  • Custom functions – Developers can also create functions as reusable APIs by utilizing Netlify Functions
  • Custom data – As features are added to the site, there may be a need to store user profiles, shopping cart data or other dynamic data. Solutions such as FaunaDB Serverless GraphQL help with housing custom data
  • Comments – Many JAMstack products have dynamic comment sections
  • E-Commerce – Using JAMstack to set up an online store has never been easier
  • Search – Search functionality is readily available when using JAMstack with the help of third-party applications
  • Analytics – Easy integration with Google Analytics

Conclusion

Filling the collaboration gaps between frontend stakeholders; from content creators, marketers, design and development team is one of the main takeaways from utilizing JAMstack.

JAMstack provides a great developer experience since generating code is much faster, while providing more control without the bulk of a traditional CMS. The deployment process is easier because you won’t need to worry about the backend, which results in increased security, reliability, and performance.

Resources:

https://jamstack.wtf/

https://snipcart.com/blog/jamstack