Skip to content

Latest commit

 

History

History
124 lines (75 loc) · 1.7 KB

deck.mdx

File metadata and controls

124 lines (75 loc) · 1.7 KB
Raw

import { themes, Head, Notes } from 'mdx-deck'

import Compare from './static/mwdj_0301.png'

export const theme = themes.yellow

<title>Introduction to JAMStack</title>

Introduction to JAMStack

based on the book Modern Web Development on the JAMstack

If you tend to feel delivering great websites should be more about the craft of markup and JavaScript than server setup and administration, you’ve found your book.

🥳🍷

JavaScript

API

Markup: content + template

❌ server

✅ CDN

  • TTFB⚡️
  • stable (no SPoFs)
  • cache invalidation

✅ Git

  • versioning
  • CI/CD
  • webhook

✅ API

  • microservice
  • serverless

✅ Deployment

Site Generator

https://www.staticgen.com/

  • Gatsby

  • Hugo

  • Next.js

Headless CMS

https://headlesscms.org/

API based CMS

Git based CMS

  • Netlify CMS

Case Study: Smashing Magazine

blog, ecommerce, membership...

  • static site generator: Hugo
  • frontend framework: Preact
  • assets pipeline: victor-hugo
  • CMS: Netlify CMS
  • API
    • GoTrue
    • GoCommerce
    • API gateway
    • Stripe
    • MailChimp
    • Lambda Function

Case Study: our course CMS

  • Lucy fills in course content in CMS
  • staticman creates a merge request which modifies courses.yml
  • gitlab notifies Jackie of the change via slack
  • Jackie merges the request
  • During the deployment of some particular branch, a backend job alters course data in database

👻 Are you OK?