3, 2, 1 Let's Jamstack!

Zach Brooks

(@Zacann0n)

An Introduction

Breakdown

• The What, How, and Why
• Best Practices
• Jamstack Examples
• Tools/Toolkits
• Q&A at the End!

What is the Jamstack?

• Term and Acronym coined by Matt Biilmann, Co-Founder and CEO of Netlify
• Focused on performance, security, and a better developer experience
• Aims to make web development simpler

(Image from freecodecamp.org)

Javascript

• Vanilla js, UI Frameworks like Vue, Angular, and Svelte, Libraries like React
• Handles client side rendering
• Adds dynamic functionality and interactivity

APIs

• Utilizing the strength of API’s is how we make Jamstack applications Dynamic
• This includes services like Headless CMS’s for content, Auth0 for authentication, or even custom-built API’s

Markup

• Markup does not mean Markdown
• HTML or the code that compiles down to the HTML, it's the first part you’re serving to the client.
• Static Site Generators (SSGs)

Benefits of using Jamstack

• Speed ⚡️
• Scalability 📈
• Cost 💸
• Security 🔒
• Maintenance 🔧

Best Practices - Speed

• Jamstack is only fast if you make it fast
• Dependent on API’s speed
• Some tools require extra configuration to add performance
• Server side first

Best Practices - Markup

• Good markup can make your site better overall
• Markup is the foundation of your site

Best Practices - Additional

• Everything lives in Git
• Entire Site on a CDN
• Automated Builds and Atomic Deploys
• Instant Cache Invalidation

Jamstack Examples

docs.microsoft.com

Flamingo - shopflamingo.com

JFK Terminal 4 - jfkt4.nyc

Frontier Airlines - flyfrontier.com ...almost

HeySugar - heysugar.health

https://www.youtube.com/watch?v=rpQMbF-QGKU&list=PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT&index=8&t=0s

Jamstack Tools - Personal Favorites

Netlify

Hosting and deploying

https://netlify.com

Sanity.io

Content Management System focused on structured content

https://sanity.io

Forestry.io

Git-backed content management system

https://forestry.io

TinaCMS

Open source toolkit to add live editing and hot reloading to React based sites

https://tinacms.org

Gridsome

Vue based jamstack framework and static site generator

https://gridsome.org

Vue

Progressive javascript framework

https://vuejs.org/

Jamstack Tools - Others to keep an eye on

Vercel

Formally called Zeit, Hosting platform and CDN similar to netlify

https://vercel.com

Firebase

Hosting and cloud platform by Google

https://firebase.google.com

Azure Static Web Apps

Hosting platform and CDN built my Microsoft, built in Azure Functions api capabilties

https://azure.microsoft.com/en-us/services/app-service/static/

CraftCMS, Prismic, AgilityCMS, Strapi

All Headless CMS platforms

https://craftcms.com

https://prismic.io

https://agilitycms.com

https://strapi.io

11ty

Static site generator designed to be performant and light weight out of the box, that also has a possum as their mascot

https://www.11ty.dev/

RedwoodJS

Javascript framework designed to build Fullstack jamstack applications

https://redwoodjs.com/

Svelte

Lightweight Javascript framework designed to build ui interfaces with a new approach

https://svelte.dev

Final Thoughts

Jamstack Resources

• https://jamstack.org
• https://freecodecamp.org
• https://snipcart.com/blog/categories/jamstack
• https://dev.to/t/jamstack
• https://jamstack.org/slack

Resources Used

• jamstack.org
• https://www.freecodecamp.org/news/what-is-the-jamstack-and-how-do-i-host-my-website-on-it/
• https://nicolas-hoizey.com/articles/2020/05/05/jamstack-is-fast-only-if-you-make-it-so/
• https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/
• https://bejamas.io/blog/jamstack-for-clients/

Thanks for watching!

Twitter - @Zacann0n

Denver Devs - @zach_brooks

Blog - zacharybrooks.dev/blog

Meetup - meetup.com/jamstack-denver