3, 2, 1 Let's Jamstack!

Zach Brooks

(@Zacann0n)

An Introduction

jamstack logo

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

Made with Slides.com