Power Up Your JAMstack

#Love2yourEX

Give โ™ฅ to your EX

EX =ย 

Editor Experience

About Me

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

EX UX DX
๐Ÿคฌ ๐Ÿ˜Ž ๐Ÿ˜ƒ

=๐Ÿ˜ซ

Website, Traditional CMS

Wordpress

Drupal

Sitecore

EX UX DX
๐Ÿ™‚ ๐Ÿ˜ ๐Ÿ˜’

=๐Ÿค”

PHP

ASP.NET

Website, Headless CMS + JAMstack

EX UX DX
๐Ÿ˜• ๐Ÿคฉ ๐Ÿ˜

=๐Ÿ˜”

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. Publishing content takes too long, don't understand concepts of builds

๐Ÿคผ They feel powerless...

We can do Better!

Here's How...

  1. ๐Ÿ‘€ Give them a Preview environment
    ย 
  2. ๐ŸŽ Give the gift of Page Management
    ย 
  3. ๐Ÿš€Publish contentย Faster

Preview with:
Next.js + Agility CMS + Vercel +ย 

NAVstack? ๐Ÿฆธโ€โ™€๏ธ

What is Next.js?

What is Vercel?

What is Agility CMS?

Preview?? - Wait isn't this a static site?

NAVstack Preview

  1. ๐Ÿ‘ฅ Editor clicks Previewย from within the CMS
    ย 
  2. ๐Ÿช A preview cookie is set, instructing Vercel to run each page route at runtime/real-time (node js)
    ย 
  3. ๐Ÿ˜Ž Editor can see content they are working on prior to publishing

/some-page-request

Is Preview?

Yes, run route as serverless function (runtime)

No, return cached/generated HTML

How it Works

Preview Setup

  1. ๐Ÿ‘ฉโ€๐Ÿ’ป Signup for Agility CMS + Get the starter site codeย 
    ย 
  2. ย  ย  ย  ย  ย  ย  ย  ย  ย Deploy to Vercel
    ย 
  3. ๐Ÿ‘€ Set the Preview domain in Agility CMS
    ย 
  4. โœ… Done!

Preview Demo

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:

๐Ÿ’ฌ You can only build certain types of pages, with pre-defined layouts

Why?

Editors feel constrained...

Put yourself in their shoes ๐Ÿ‘ž...

๐Ÿ’ก Same reason WHY devs don't like Traditional CMS ๐Ÿคฎ

Still not Convinced?

This will be you...

Responding to Change Requests

๐Ÿ›‘ Stop Building Websites.

Build Tools.

+

๐Ÿ‘จ๐Ÿฟ๐Ÿ‘ฑ๐Ÿปโ€โ™€๏ธ

Editors

=

Components

Page

How Page Management Works with Content Modelling

Demo

NAVstack ๐Ÿš€Publishing

  1. ๐Ÿ‘ฅ Editor clicks Publish from within the CMS
    ย 
  2. ๐Ÿ‘คUser navigates to the page they just published in their browser
    ย 
  3. ๐Ÿ” Vercel will re-generate that page HTML in the background
    ย 
  4. โœ… The next user to hit that same page will get the updated content

Look Ma! No builds ๐Ÿ‘‹

Publishing Demo

Agility CMS Next.js Starter

  • Connected to a sample Agility CMS instance to get content and pages
  • Uses the getStaticProps function from Next.js to allow for full static site generation
  • Supports full page management
  • Supports preview mode
  • Uses revalidate tag with Vercel to enable incremental static builds

Build Modules, not Websites.๐Ÿ‘

Learn More ๐ŸŽ“

Agility Days: Editor Tools w/ JAMstack and Headless CMS

By James Vidler

Agility Days: Editor Tools w/ JAMstack and Headless CMS

  • 615