export { default as theme } from "./src"; import { Appear, Head, Notes, Image } from "mdx-deck"; import { LayoutBlank, LayoutDark, LayoutGradientBg, Layout } from "./src"; import { CodeSurfer } from "mdx-deck-code-surfer"; import nightOwl from "prism-react-renderer/themes/nightOwl";
<title>Spreading the Jam: Getting started with the Jamstack</title>export default LayoutGradientBg;
Getting started with the Jamstack
using Gatsby and Netlify Forms
So excited to be here with you (remotely) today!
Over the next half hour, we'll look at getting started with the Jamstack and how you can set up a static site that collects form responses - without any server side code - using Gatsby and Netlify Forms.
Whoa, that's a lot of buzzwords! Don't worry, we'll cover what they mean.
But before we dig in, a little about me...
export default LayoutGradientBg;
Pronounced CONE🍦-wine🍷Austin ➡️ Denver ➡️ Australia ➡️ NYC ➡️ Dallas
💙 Jamstack + React + CSS + Accessibility + Remote Work 💙
Staff Frontend Engineer at Netlify
👩🏻💻 leslie.dev
My name is LCW
I work remotely from Dallas as a FE engineer at Netlify
Netlify is a platform that helps you build fast, modern websites on the Jamstack, then helps you host them
Started my dev career in NYC, working at digital agencies on sites for clients like Nintendo and Jerry Seinfeld
I was used to having to bug backend engineers to get my frontend views wired up to the back end properly
And then I had to bother the DevOps team to prepare a staging environment
It seemed like there should be a be a better way. Enter the Jamstack!
As a FE dev, this new approach to building sites let me focus on building impressive frontend experiences, and opened up the world of serverless - where I can write backend functionality - all in JS, without writing backend code.
Btw, my handle is @lesliecdubs, find me on Twitter + GitHub
export default Layout;
- JavaScript
- APIs
- Markup
Jamstack is an architecture more than an acronym
JS: client-side functionality (often via a framework like React or Vue, or vanilla JS / jQuery)
API: Jamstack sites use APIs to integrate data and other dynamic information. They often serve this data to your frontend through JSON.
Markup: HTML / presentation layer
The Jamstack is a decoupled approach to web dev. "Separation of concerns" for front + back end
Front end has its own repo (JS + Markup), connects to "back end" via APIs
Leverage microservices + serverless functions to build more complex + dynamic web apps
Prebuilt into highly optimized static pages and assets during a build process. Pre-rendering results in sites which can be served directly from a CDN (cheaper, scalable, secure).
The "Jamstack" name was coined bc "static site" doesn't do it justice (comment systems, web forms, ecommerce...)
Jamstack as a term has been around for 5 or 6 years, though the idea predates that
Syntax FM: "BYOF - bring your own frontend"
Chris Coyier (CSS Tricks): "The all-powerful frontend developer"
export default LayoutBlank;
<img className="split" src={require("file-loader!./images/jamstack-workflow-snipcart-1.jpg")} />
![](/lesliecdubs/spreading-the-jam/blob/master/{require("file-loader!./images/jamstack-workflow-snipcart-2.jpg")})
Graphics courtesy Snipcart
Fetch data at runtime
User loads a page in their browser, request is sent off to be processed by a database server
Request is filled; web server will stitch the data response together with HTML to assemble a dynamic view
Finally, that page will get served to the client (browser)
Other steps: CDN layer helps with caching, load balancer to help distribute traffic to the right servers
Creates a slower experience for users, with multiple points of failure
Fetch data at build time
Content may live in a CMS, markdown files in the repo, or pulled in via APIs
Instead of user waiting for server to dynamically render their views, Jamstack offloads wait time onto the developer during a build step
Build step can be automated w continuous integration
When page loads in the browser, request goes directly to a CDN that has a pre-rendered view of that site
export default Layout;
- ⚡️ Blazing fast performance
- 🤑 Cheaper + easier scaling
- 🚨 Fewer security risks
- 👩🏻💻 Better developer experience
- ✨ Give frontend developers superpowers
Performance: We serve pre-built markup and assets over a CDN (Content Delivery Network) so our sites load really, really fast (and we get better Lighthouse scores)
Scalability: Cheaper to host. No server maintenance + sites can scale without worry (CDN compensates for more visitors).
Security: No need to worry about server or db vulnerabilities
DX: Front end focused, allows quicker dev with modern tools
Front end: Build full-stack apps with only JS knowledge + leverage existing microservices for deeper functionality
export default Layout;
Tight coupling between client and server:
- monolithic server-run web app
![](/lesliecdubs/spreading-the-jam/blob/master/{require("file-loader!./images/logo-wordpress.png")}){kind=logo}
![](/lesliecdubs/spreading-the-jam/blob/master/{require("file-loader!./images/logo-drupal.png")}){kind=logo}
![](/lesliecdubs/spreading-the-jam/blob/master/{require("file-loader!./images/logo-joomla.jpg")}){kind=logo}
![](/lesliecdubs/spreading-the-jam/blob/master/{require("file-loader!./images/logo-squarespace.png")}){kind=logo}
It can be helpful to understand what a particular architure is by exploring what it is not.
1. wouldn't be built with a server-side CMS with a built-in theme (WP, Drupal, Joomla, or Squarespace)
(unless you are using a REST API to bring content stored in one of those places into a decoupled frontend)
2. isn't a single page app that uses isomorphic rendering to build views on the server at runtime. Jamstack sites fetch data at build time; use progressive enhancement to bring interactivity into the browser at runtime
3. And finally, we have monolithic web apps that rely on Ruby or other backend languages
Massive site (millions of pages) due to time needed for build step (unless Next.js)
You have a big team (DevOps), and a project that requirers dynamic, highly variable content
If you need hand-written dynamic features like comments, e-commerce, etc, and can't use an existing service like Disqus, Stripe, Netlify forms, etc
So what are the ingredients of a Jamstack site?
export default Layout;
Choose the benefits of static, but sprinkle in SSR where needed
Some frameworks like Next.js offer dual modes: "server-side rendering" (SSR) & "static site generation" (SSG)
Some people might call this "hybrid Jamstack." I would call this "full Jamstack" depending on how the server-side rendering is happening!
A "Jamstack way" to do what we typically think of as server-side rendering would involve using serverless functions. We don't have time to cover serverless today...
export default Layout;
“Static site” generator | staticgen.com
Next.js, Gatsby, React Static, Nuxt, VuePress, Eleventy, Jekyll, Hugo, Middleman...
Headless CMS | headlesscms.org
Open source: Ghost, Strapi, Netlify CMS, Directus, TinaCMS, WordPress...
Commercial: Sanity, Contentful, Cosmic, Forestry, Prismic, DatoCMS...
First, we rely on static site generators to build all of the pages of our websites, when there are changes to the site
The word "static" can be a little misleading; we are not talking a static or unchanging user experience, but about static architecture (host statically)
SSGs can be Javascript-based, but dont have to be
The next ingredient is often a CMS to help manage the dynamic, changing content on our site
The field of headless CMSes has exploded recently, so there are a lot of options to choose from based on your needs
Open source options - you can submit PRs, community-driven
Commercial options - many offer free tier but require payment for heavier usage, well funded, backed by full-time team
Best practice to use Git (usually either GitHub, GitLab or Bitbucket) for handling version control
Whew, this slide is overwhelming! but it shows how big the ecosystem really is
You'll always want some kind of presentation layer; perhaps React or Vue, or a metaframework built on top of React or Vue like Gatsby or Next.js or Nuxt, or a static site generator like Jekyll or Hugo, or a UI library or toolkit
If you need dynamic data, you'll want to wire in an API of some kind. This could include a CMS or a utility API like Stripe.
Ideally you're using version control and storing your code in Git
And then you'll need a host. My favorite is Netlify.
So, if you put all of these ingredients together, what do you get?
export default LayoutGradientBg;
Portfolio site with a contact form
A simple example of a Jamstack app is a portfolio website with a contact form
A traditional form would require a database to store the form entries
But the Jamstack offers a better and easier way
Before we start building, let's talk for a second about the specific tools we've chosen for this project
export default Layout;
A “static site generator” based on React
- 🛠 Build your site in React
- 📂 GraphQL data layer
- 🔌 Rich plugin ecosystem
- 📖 Good documentation + starters
- ⚡️ Emphasis on performance + accessibility
I chose Gatsby for this demo bc I work in React every day, but we could have used any static site generator for this example
At build time, Gatsby creates an internal GraphQL server of all your data (wherever it may be stored - Markdown, JSON, a CMS, third party API, etc). All your data is queried at build time from your React components in a consistent way
Gatsby ecosystem is rich; data source plugins provide for an easy connection to APIs
Gatsby has clear documentation + starters, which are Gatsby sites that are preconfigured for different use cases to give you a head start for your project
Built with performance and accessibility in mind
(no more clicks) So, assuming we've set up a Gatsby site, what do we do with it?
The Jamstack architecture would tell us that we want to host it statically, right? That's where Netlify comes in...
export default Layout;
A “static site” host leveraging all the benefits of the Jamstack, plus:
- ✅ Automated builds via Git
- 😅 Atomic deploys with one-click rollback
- 🌐 Custom domains
- 🔒 Automatic HTTPS
- ⚙️ Simple setup
- 🆓 Free starter team
Netlify helps you build and manage Jamstack projects.
It offers automated builds with continous deployment from your Git provider
Configure Netlify to build + deploy when you push to git
Set up webhooks to trigger deploys based on an action elsewhere (e.g., content update in Contentful)
Netlify's deploys are atomic = versions your content by fingerprinting
Instead of pushing individual files (FTP), Netlify creates new deploy object
Compares new deploy with existing deploy and determines what files have changed
Allows for one-click rollback - so you can make an older deploy live instantly
Netlify sites come with their own customizable URL, your-site.netlify.com
Or buy a custom domain through Netlify or another domain provider
Free HTTPS comes out of the box
Simple setup
Free team with flexible pricing tiers and add-ons if you need more team members, bandwidth, guaranteed support, etc
export default LayoutGradientBg;
Portfolio site with a contact form
So, now that we're familiar with the tools we're going to use, let's get started building a portfolio site in Gatsby with a contact form that will store form responses in Netlify
To start, we would open up the terminal and install the Gatsby command line tools. These will help us to build and run a Gatsby site locally
Then, we'll creaate a project called 'portfolio' from a "Gatsby Starter" theme called gatsby-starter-forty
We'll change directories into the portfolio folder we created on the last step, and then run gatsby develop to run the project locally on our machine
Now, let's see what our local Gatsby starter looks like! The terminal will give us a local URL like localhost:8000 we can visit
export default LayoutDark;
<Image src={require("file-loader!./images/gatsby-starter-forty.gif")} size="90% auto" />
This is a pretty slick looking starter
We're going to focus in on this existing contact form, and hook it up to capture leads from people who visit our site
To do that, we'll want to open up our favorite code editor and bring up the Gatsby code in the portfolio directory we just created
Open the Contact.js file of the Gatsby starter so we can hook it up to Netlify
Once the site is deployed, Netlify's post-processing bots are going to look for `netlify` attributes on the form in order to capture it
These bots only know how to parse HTML, so we have to give them a little help to make sure they can detect forms rendered with Javascript (walk through code)
Now our site is ready to be deployed. Before we do that, let's make sure we've hooked our local code up to a GitHub repository
Let's open our terminal again and initalize git (walk through code)
The last step is deploy our code from GitHub to the web with Netlify so we can set up and test our form
export default LayoutDark;
<Image src={require("file-loader!./images/deploy-with-netlify.gif")} size="90% auto" />
Visit app.netlify.com and create an account or log in
Click "New site from Git"
Connect to GitHub
Select the repo we just created
Netlify guesses our build settings
Deploy your site!
If you prefer using the command line, Netlify also offers a command line tool to link and deploy sites
export default Layout;
https://netlify-gatsby-form-example.netlify.com/
- Visit app.netlify.com, find the site, and click "Forms" to see and manage form entries
- Set up form notifications with Netlify or a{" "} Zapier integration {" "}
Now we can test the form live on our Netlify site by visiting https://netlify-gatsby-form-example.netlify.com/
Fill out the form if you want
To see form responses, we can visit the Netlify dashboard
Netlify is essentially acting as our database to hold the form entries
You can also set up email notifications so you know when a user submits your form
Let's try it out!
export default LayoutDark;
<Image src={require("file-loader!./images/fill-out-form.gif")} size="90% auto" />
First, we'll visit the site that we deployed on Netlify
And now we're going to try filling out our form
Success! Let's make sure Netlify captured our form entry
export default LayoutDark;
<Image src={require("file-loader!./images/check-form-submission.gif")} size="90% auto" />
We would want to visit our Netlify dashboard
Click into the site and then go to "Forms"
There's our form, with the name we set earlier
And there's our entry!
If this site had been live for a while, we could also use this toggle to see any spam entries that Netlify filtered out for us
export default Layout;
- ⚡️ Blazing fast performance
- 🤑 Cheaper + easier scaling
- 🚨 Fewer security risks
- 👩🏻💻 Better developer experience
- ✨ Give frontend developers superpowers
So why does all this matter again?
We just spun up a portfolio site with a working contact form with zero backend code and no database, in about 5 minutes!!
Netlify and Gatsby gave us tools to do this quickly and efficiently, using just our terminal and a bit of HTML
Jamstack doesn't mean you're stuck with a "static," unchanging site
It means you're choosing all of the advantages I mentioned - performance, scaling, a better dev experience - by choosing a static architecture and deciding to host statically
export default Layout;
- 📕 netlify.com/oreilly-jamstack
- 📝 netlify.com/blog
- 🥞 jamstack.org
- ⚡️ staticgen.com + headlesscms.org
- 🤩 Jamstack Conf
- 👥 community.netlify.com
Want to learn more?
There's now a Jamstack eBook published by O'Reilly, available to download for free! "Modern Web Development on the Jamstack" was written by Netlify CEO and co-founder Mathias Biilmann and principal developer advodate Phil Hawksworth, who I should also thank for creating a bunch of great talks that helped inform this one
jamstack.org - best practices, examples, resources, links to community meetups
staticgen.com - a list of SSGs for Jamstack sites, filterable by GitHub stars
headlesscms.org - a list of headless CMSes for Jamstack sites
There's also a community conference around the Jamstack. You can watch videos from past conferences on Jamstack topics on YouTube!
Community - join us in the Netlify Community if you have questions, or want to see what other people are building
export default Layout;
👩🏻💻 leslie.dev
Also, I Tweet about Jamstack + frontend @lesliecdubs - hope to see you there
Do we have time for questions?