JAMstack 101
noun: \’jam-stak’\
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
What is the JAMstack?
A new methodology for architecting sites:
The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.
Gatsby
Blazing fast static site generator using React
Gatsby lets you build blazing-fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.
Other options
- Jekyll - very simple Ruby-based one
- Hugo - quick builds
-
Next.js - also React based
- Background: https://zeit.co/blog/next2
- Full list: https://www.staticgen.com/
The Need for Speed
Talk by Gatsby's creator on what makes it so fast
Contentful
A headless CMS
GraphQL
Contentful data fetching with GraphQL
https://www.contentful.com/blog/2017/05/22/running-graphql-queries-in-contentful/
Other CMS options:
- Sitecore
are getting on board! https://jss.sitecore.net/ - https://www.netlifycms.org/
- https://prismic.io/
- A full list: https://headlesscms.org/
Netlify
Simple deploys and hosting - all from a Git push
Build, deploy, and manage modern web projects
Other options
What can I use this for?
A style guide
- https://bradfrost.com/blog/post/the-workshop-and-the-storefront/
- Using Gatsby for style guides: http://bradfrost.com/blog/post/style-guide-guide-gatsby-edition/
- These React components can then be reused in the actual app
A quick prototype
- Or a POC
- Get something in front of real users as soon as possible - Lean
- Try out a new idea and get it deployed within minutes
Sites using Gatsby:
- Gatsby's own site (obviously! 🐶) - https://www.gatsbyjs.org/
- https://reactjs.org/
- https://guide.freecodecamp.org/
- https://www.gatsbyjs.org/
- Showcase with other examples: https://github.com/gatsbyjs/gatsby#showcase