Giving ❤ 2 your EX

with JAMstack

@jameskvidler

#Love2yourEX

EX = 

Editor Experience

About Me

@jameskvidler

linkedin/in/jamesvidler

github/jamesvidler

Special Guest

@JoshWComeau

https://joshwcomeau.com/

Staff Software Engineer @ Gatsby

Agility CMS

#CMSinthe6ix

About Agility CMS

• Only headless CMS, with built-in Page Management
   
• Built by developers over the course of a decade
   
• Big enough for billion-dollar brands
   
• Small enough to care about each user

A Few of Our Customers...

Our Vision

A world where you NEVER have to rebuild your website from scratch!

We Believe

EX

DX

UX

1. User Experience
    
2. Editor Experience
    
3. Developer Experience

Success Depends on:

Website, No CMS

Website, Traditional CMS

Wordpress

Drupal

Sitecore

PHP

ASP.NET

Website, Headless CMS + JAMstack

Contentful

Gatsby

Next.js

Prismic

What's Wrong with the EX in JAMstack?

Top 5 Editor Complaints

1. 👁‍🗨 Can't preview content updates in real-time
    
2. 🚫 Limited control over creating, deleting and redirecting pages
    
3. 📄 Limited control over what content is on each page
    
4. 😖 Inconsistent and in-efficient content workflows
    
5. 🤼 They feel powerless...

We can do Better!

Here's How...

1. 👀 Give them a Preview environment
    
2. 🎁 Give the gift of Page Management

+

Starter Site

• `git clone https://github.com/agility/agility-gatsby-starter`
• Set Agility CMS API env vars
• `gatsby develop`

Starter Site

Starter Site: Config

Preview: Using Gatsby Cloud 

1. Login to Gatsby Cloud
    
2. Create a new Org/Site

Preview: Using Gatsby Cloud...

1. Copy Preview Webhook in Gatsby Cloud

2. Register Webhook in Agility CMS

Preview: Using Gatsby Cloud...

Source Nodes

Webhook

= Sub-Five Second Updates

Set Up your Own Custom Preview

Custom Preview: Enable Refresh Endpoint

Set ENV var:

Custom Preview: Add Dockerfile

Dockerfile:

Custom Preview: Run `gatsby develop`

Add to your package.json scripts:

Custom Preview: Build + Push Image

1. > docker login
2. > docker image build
3. > docker image push 
4. On push of image, deploy somewhere:

Custom Preview: Register Webhook for Preview

1. Set your Webhook URL in Agility CMS - this would be:
   
   <url-of-webapp>/__refresh

What is Page Management?

What Isn't Page Management...

When devs dictate pages:

What Isn't Page Management...

When devs dictate what is on a page:

Why?

Editors feel constrained...

Still not Convinced?

This will be you...

Responding to Change Requests

🛑 Stop Building Websites.

Build Tools.

+

👨🏿👱🏻‍♀️

Editors

=

Components

Page

Agility CMS Content Methodology

We believe there are two types of content...

Non-Page Specific Content

Page Specific Content

Page Specific Content

Page Management

Live Demo 🤞

What's in a Page?

Page Properties

1. Title, URL Slug, and other SEO properties
2. Page Template
3. Content Zones - {} object
   - Modules - [] array
     -- Fields - {} object

Page Templates

Defined in Agility CMS, but corresponds to a React Component in your code

Defines the Content Zones of where editors can control what is on the Page

Content Zone

The area(s) on a Page that will be dynamically controlled by the editor

Modules

Modules

Modules

Look ma, no GraphQL?! 🤯

Modules

Agility CMS Gatsby Starter

• Clone from agility-gatsby-starter (GitHub) 
• Uses gatsby-source-agilitycms plugin
• Will automatically:
  • source your content into GraphQL
  • generate your pages based off your sitemap
  • render your Page Template, and Module React Components

Build Modules, not Websites.👍

Learn More 🎓

• Sign up for a free account
• Follow @AgilityCMS
• Upcoming Events 🎉:
  • July 30th - Never Rebuild your Website from Scratch
  • August 13th - Proper Architecture: Why you Cannot Sustain without it in 2020
  • August 27th - NextJS + Agility CMS + Vercel