In the 5 years since the term “JAMstack” was coined by Netlify co-founders Matt Biilmann and Chris Bach, it has grown in popularity and gained increasingly broad adoption.
Although its core principles are simple, it is also a flexible and far-reaching approach to web development so there are sometimes misunderstandings about its fundamentals.
So, with the help of freeCodeCamp, I’ve put together an extended video to unpack some of the core principles of JAMstack, address some of the common misconceptions, and dive into some examples.
This 3.5 hour video begins with an explanation of the concepts and benefits of the JAMstack and progresses through a variety of examples which start very simple, and gradually build in complexity.
If you’re not planning on making some popcorn and settling in for the full 3.5 hours in one sitting, you might want to dive directly in to one of the sections or examples.
Here’s a breakdown of the video with some resource links to help you get to grips with the JAMstack:
Welcome message
📺 00:00:00
- Hello from me
- What is to come in the video
Introduction to the JAMstack
📺 00:01:75
- What does JAMstack stand for?
- What does JAMstack mean?
- Approaches to hosting web sites
- Evolution of hosting architectures
- Monoliths and complexity
- Static assets vs static experiences
- Comparing JAMstack to LAMP stack
- Bake, Don’t fry
- The motivations for generating sites ahead of time
- Simplifying deployments
- Some JAMstack advantages
- Security
- Performance
- Security
- Enablers of the architectural model
- Static site generators
- Tooling and automation
- Browser capabilities
- Services and the API economy
Example 1 – Simply a static site
-
Markup, potentially enhanced JavaScript and calls APIs
-
The simplest JAMstack site can be just an HTML file!
-
Deploying to a CDN with Netlify Drop
👉 Example repository 1 – All simply static
Example 2 – Adding JavaScript
- Explaining rendering
- Client-side rendering
- Server-side rendering at build time
- Server-side rendering at request time
- How “the stack” has moved to the browser
- Adding JavaScript to update the view client-side
- Deploying and hosting multiple files
👉 Example repository 2 – Changing the DOM with JavaScript
Example 3 – Building with a static site generator
- Build automation
- What is a static site generator
- Choosing a static site generator
- Managing and installing dependencies
- Abstracting content from templates
- Running a local build with npm
- Running a local build server with hot-reloading
- Version control as a deployment process, using Git
- Ignoring assets with
.gitignore - Running a build in a continuous integration (CI/CD) environment
👉 Example repository 3 – Introducing a static site generator
Example 4 – Generating pages from a content API
- Using an external API (NewsAPI.org) as a data source
- Exploring content feeds with
curlandjq - Stubbing page templates with dummy data
- Requesting data at build time with Axios
- Populating pages with an external API at build time
- Managing API keys with environment variables
- locally with dotenv
- in our continuous integration and deployment environments
- Lightning the load on data sources, by pre-generating instead of per-page view
👉 Example repository 4 – Generating pages from a content API
Example 5 – Localised content and Geo-IP routing
- Architectural complexity and the benefits of JAMstack and modern CDNs
- Caching everything
- Degrees of personalization
- Universal content
- Localized content
- Targeted content
- Personalized content
- Requesting localised content from the NewsAPI.org API
- Generating pages for many locales
- Routing users to content based on their location
- CDN GeoIP routing and configuration
- Generating routing config automatically with a site generator
- Configuring custom 404s at the CDN
- Routing users based on their Accept-Language header
👉 Example repository 5 – Generating localized pages, with geo-IP routing at the CDN
Example 6 – Client-side rendering targeted content
- Browser APIs
- Getting user location with the browser’s GeoLoaction API
- Working with HTTPS locally
- Configuring browsersync to use HTTPS
- Generate a free certificate for localhost
- Trusting your local certificate
- Progressive Enhancement
- Using the openweathermap.org API
- Client-side rendering personalised content
- Being aware of secrets in client-side API requests
- Safeguarding secrets
- Creating an API with serverless functions
- Synchronising our API and our UI throughout our deployments
👉 Example 6 repository – Client-side rendering targeted API content
Demo – Gradual migration to the JAMstack
- Introducing JAMstack to existing sites and other infrastructure
- Subdomains
- Adding static pages
- Resource shadowing, proxying, and redirects
- Demo of adding new static views or proxying to existing resources
👉 Proxy demo repository – FCC Proxy Demo
More JAMstack resources to explore
If you are still hungry for more resources to explore about understanding and using the JAMstack, why not take a look at these:
- Modern Web Development on the JAMstack, O’Reilly, 2019 – Book on building websites with the JAMstack. Available as a free e-book.
- JAMuary 2020 – A month of posts explaining different aspects and common questions relating to JAMstack, mostly by the excellent Divya
- Netlify’s JAMstack explanation
- JAMstack comments engine – An article on CSS-Tricks and demonstration of using JAMstack resources to drive a commenting system
- Static first, with serverless fallbacks – An article on CSS-Tricks and demo of using serverless functions to as a fallback to render views
- StaticGen – The most comprehensive list of static site generators. Open source.
- HeadlessCMS – The most comprehensive list of headless CMS services and products. Open source.
JAMstack community resources
- The JAMstack website – Lots of info and resources
- The JAMstack community – Find a JAMstack meetup near you
- JAMstack Conf – The JAMstack conference website, with links to previous videos and upcoming editions of the conference
…and if you’d like to talk to people already building projects on, and benefiting from the JAMstack, come and join the conversation in the official JAMstack Slack.
