Spreading The JAM

Talk by Leslie Cohn-Wein

Exact timestamp here here

The JAM in JAMstack stands for

  • JavaScript
  • APIs
  • Markup

Why JAMstack?

  • Blazing fast performance
  • Cheaper + easier scaling0
  • Fewer security risks
  • Better developer experience
  • Gives frontend developers superpowers

JAMstack vs Traditional workflow

Traditional Workflow

JAMstack workflow i

What JAMstack isn't

  • Tight coupling between client and server
  • Wordpress, Drupal, Squarespace
  • Server-side rendered SPA
  • Monolithic server-run web app

Ingredients

  • Static Site Generators: Jekyll, Next, Hugo, Gatsby, React Static, Vuepress, Middleman...
  • Headless CMS: Netlify CMS, Directus, Strapi, Ghost, Wordpress...
  • Cosmic JS, Sanity, Forestry, Prismic, Contentful, DatoCMS...
  • Version Control:

Real world JAMstack

Portfolio site with a contact form

Why Gatsby?

Gatsby is 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

Why Netlify?

A Static Site hosting provider leveraging all the benefits of JAMstack, plus:

  • Automated builds
  • Atomic deploys with one-click rollback
  • Custom domains
  • Automatic HTTPS
  • Simple setup
  • Free starter team

Getting into the code

  1. Do all the installations
npm install -g gatsby-cli

gatsby new portfolio https://github.com/codebushi/gatsby-starter-forty

cd portfolio

gatsby develop
  1. Open up Contact.js in your favorite IDE, find the form element. Copy the code below
<form
  method="post"
  name="contact"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
  <input type="hidden" name="contact" value="contact" />
  <div className="field half first">
    <label htmlFor="name">Name</label>
    <input type="text" name="name" id="name" />
  </div>
  ...
</form>
  1. Set the data-netlify attribute to true to hook it up to Netlify. Set the data-netlify-honeypot to bot-field to enable spam filter.
  2. Add a hidden input with the form name.
  3. Initialize a git repo and push to the newly created repo
git init
git add .
git commit -m "First commit"
git remote add origin REPOSITORY_URL_GOES_HERE
git remote -v
git push origin master

Get JAMming