Whats the Difference between Jam and Jelly? Our Thoughts on the Jamstack

No one would name their band Pearl Jelly

Jamstack is a catch all phrase that describes modern web development technology that is based on the use of JavaScript, APIs, and Markup to create websites and web apps. It is important to note that though Jamstack implies the use of JavaScript there are Jamstack frameworks that utilize other languages such as Ruby and Python. We have found the adoption of Jamstack frameworks to provide numerous benefits to our clients including but not limited to site speed, a decrease in web site total cost of ownership (TCO), a decrease in development time, easier extensibility and large community support. While there are many benefits there are of course issues. More controllable but more involved SEO, no clear winner for headless content management systems (CMS), as well as having to develop solutions to problems solved elsewhere. Currently at Theory Digital we are working with Nuxt.js for the majority of our sites though we have experimented with both Gridsome and Gatsby in the past.

Benefits of the Jamstack

One of the most noticeable benefits of the Jamstack for your users is the speed increases such frameworks can provide. In our experience, without third-party tools being added to sites, our sites routinely range from the high 80’s and up on Google’s PageSpeed Insights. Take this with a grain of salt however, as third-party tools and tracking scripts can cause significant performance degradation and PageSpeed Insights scores can vary between tests. Another benefit we have found with the Jamstack is a decrease in TCO of most websites. On the topic of improving your site, perhaps the biggest benefit from my perspective in regard to the Jamstack is the speed at which new value adding features and experiences can be deployed to your project. In our experience with Nuxt.js we have found the ecosystem surrounding the framework to meet the majority of our needs through plugins and modules which allows us to focus on creating value for our clients. Take the Nuxt Shopify module for example. This module rapidly enabled us to draw products from a client's Shopify store and focus on creating a real-time product customizer based on the content in Shopify. Finally, the benefit of community surrounding the Jamstack ecosystem cannot be understated. Especially when considering more popular Jamstack frameworks, there are a large number of users who can provide support and you are almost always guaranteed to find the solution to any questions you may have.

Drawbacks of the Jamstack 

Our experience with the Jamstack has not been without our share of troubles. Though statically generated sites are generally better for SEO, care must be taken to ensure that you are implementing sites properly for SEO gains. Take the case of WordPress and Yoast SEO, which enables end users to make direct changes to things such as page title and open graph tags. While Nuxt.js utilizes Vue Meta to enable similar changes, to expose this to the client in a code free manner does require additional development time. Another issue we have discovered utilizing the Jamstack is that not all headless CMS’ are created equal, and care must be taken to ensure that the right tool for the job is selected. While this does sound like it would be obvious, we have found additional care must be taken here than a typical website in the following ways:

• Cognitive load in navigating the page structures
• Data integrity controls to prevent users from making “novel” changes
• UX considerations for non-developers as they will be the ones making the changes long term

The final drawbacks that we feel should be mentioned is the additional workload that can result from working with a newer technology. Let’s say you have a simple use case displaying an image on the home page of your website and you want it to lazy load. With established technologies such as WordPress there are a million different tools that can provide you with this functionality. Depending on the Jamstack framework you choose to work with on your project, this may be included but that is not a given. For example, we had to develop a custom solution for this with Nuxt.js (Nuxt Image is a package coming from the Nuxt.js team that will resolve this issue, but at the time of writing the plugin is not production ready). These are just some of the drawbacks we have found but that in no way means you shouldn’t give the Jamstack a shot.

Conclusion

Like most things regarding websites, the decision to move to the Jamstack should be well thought out and researched before a final decision is reached. In our experience the biggest benefits we have found to be the site speed, a decrease in TCO, increased development speed to add value, and a large supportive community of developers. We have found the largest challenges in making sure the SEO functionality that exists in other platforms is available in an easy-to-use way, determining the optimal CMS for a given project, and having to develop functionality we take for granted on other platforms. Overall, the Jamstack is another tool in a web developers toolbox and one that we really enjoy working with. If you have any questions feel free to reach out to us, we’d love to hear from you.