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.

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