Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Sweetness of the JAMstack

The Sweetness of the JAMstack

The JAMstack connects a static site generator using your favourite JavaScript framework with a huge range of data sources.
That sounds unspectacular, but it results in unbeatable performance of directly served files via CDN combined with a modern development setup.
With a rapidly growing environment there are dozens of tools popping up: e.g. Next.js, Gatsby.js or Hexo for generating your markup; Contentful, GraphCMS or dotCMS for managing your data and even more for hosting your files.

This talk gives you an introduction to the inner workings of the JAMstack and how to choose from the multitude of tools. You’ll learn the practical steps of setting up and developing a project with Gatsby.js and a headless CMS.

C2dc413b54db210547885a5adc437e68?s=128

Kristin Baumann

June 24, 2019
Tweet

Transcript

  1. EnterJS 2019 · Kristin Baumann The Sweetness of the JAMstack

    JavaScript · APIs · Markup
  2. @kristin_baumann Source: http:/ /gph.is/2fctBFz "2

  3. @kristin_baumann JAMstack "3

  4. @kristin_baumann J A M "4

  5. @kristin_baumann J A M "5 Markup Static files Static Site

    Generators
  6. @kristin_baumann J A M "6 Markup Static files Static Site

    Generators JavaScript Single Page Application VanillaJS / React / Vue / …
  7. @kristin_baumann J A M "7 Markup Static files Static Site

    Generators APIs JavaScript 3rd party services or custom e.g. comments, search, … Single Page Application VanillaJS / React / Vue / …
  8. @kristin_baumann At Runtime… "8

  9. @kristin_baumann At Runtime… "8 request serve Client Browser User Server

    (CDN) Static Files J M
  10. @kristin_baumann At Runtime… "8 client side JS calls Services via

    API A request serve Client Browser User Server (CDN) Static Files J M
  11. @kristin_baumann Workflow at Build Time "9 Server (CDN) Static Files

  12. @kristin_baumann Workflow at Build Time "9 Server (CDN) Static Files

    Version Control Code Static Site Generator Dev push
  13. @kristin_baumann Workflow at Build Time "9 Server (CDN) Static Files

    Version Control Code Static Site Generator Dev push Editor Content Headless CMS
  14. @kristin_baumann Workflow at Build Time "9 Server (CDN) Static Files

    Version Control Code Static Site Generator Dev push Editor Content Headless CMS Continuous Delivery build & deploy webhooks
  15. @kristin_baumann Advantages - Good performance - Cheap hosting - Easy

    scaling with CDN - High security - Good developer experience "10 Source: GatsbyJS Showcase
  16. @kristin_baumann Ecosystem of the JAMstack "11 Source: Astasia Myers (Redpoint)

    Medium Article
  17. @kristin_baumann Ecosystem of the JAMstack "11 JS Framework & Static

    Site Generator Plus Build Tools, Component Libraries, … Headless CMS Source: Astasia Myers (Redpoint) Medium Article
  18. @kristin_baumann Overview of Static Site Generators https:/ /www.staticgen.com/ "12

  19. @kristin_baumann Overview of Headless CMS https:/ /headlesscms.org/ "13

  20. @kristin_baumann Ecosystem of the JAMstack "14 Utility APIs Hosting /

    CDN Version Control Source: Astasia Myers (Redpoint) Medium Article
  21. @kristin_baumann Practical Example "15

  22. @kristin_baumann Practical Example "15 https:/ /jamstack-trees.netlify.com/

  23. @kristin_baumann Practical Example "16 Content Ecommerce https:/ /jamstack-trees.netlify.com/

  24. @kristin_baumann Practical Example - Tools "17

  25. @kristin_baumann Practical Example - Steps - Intro to GatsbyJS -

    Integrating content with Contentful - Exploring the build - Payment integration with Stripe "18
  26. @kristin_baumann Summary - JAMstack - Web development architecture based on

    client-side JavaScript, reusable APIs, and prebuilt Markup (no serverside rendering) - Automated workflow with continuous delivery - Large and growing ecosystem "19
  27. @kristin_baumann Questions? "20

  28. Thank you! @kristin_baumann www.kristin-baumann.com The Sweetness of the JAMstack -

    JavaScript & APIs & Markup Slides: https:/ /speakerdeck.com/kristinbaumann/the-sweetness-of- the-jamstack Practical Example: https:/ /github.com/kristinbaumann/jamstack-trees