How a Headless CMS Can Help you Become a 10X Developer

What is a 10x Developer?

Richard's like a 10x-er. I'm, like, barely an x-er. I kinda suck.

- Nelson "Big Head" Bighetti, Silicon Valley

What is a 10x Developer?

Asks the Right Questions

Tools!

Work Smarter

Always Learning

Gives Back

Getting Familiar with a CMS Is a Good start...

How Can I level up?

What is a Content Management System (CMS)?

  • Software designed  to manage and publish digital content
     
  • A back-end that stores your content, and a front-end that displays the content
     
  • Other names include DXP, ECM, and WCM

What's the Point?

  • Allows non-technical editors to modify and create content without a developer  
     
  • Organizes and simplifies management of content

If you Haven't Used One...

It's Only a Matter of Time...

They Aren't Just for Editors...

Devs: No More Content Updates!

Write Modular/Dynamic COde, not Static HTML

Be the Hero, Save your Editors

... And yourselves

But... They Can Also Kinda Suck...

What the heck is Cold Fusion?

Error establishing a database connection

White screen of death?!?

Plugin requires 'X' version
Upgrade failed
My site has been hacked?!?
Why does my site have a 20/100 Page speed score?
Who installed this plugin? It just broke the site...

Traditional CMS

  • You need to install and manage (web server, db, and admin application)
  • Must be maintained and upgraded
  • Security can be a concern
  • Monolithic architecture 
  • Does not scale well
  • Hard to syndicate content to other channels
  • Must use their tech stack

Introducing the Headless CMS

What it Enables...

  • Use any programming language or framework
     
  • Hosted, managed, and secured APIs
     
  • Easily consume content across multiple channels
     
  • Micro-service architecture
     
  • JAMStack websites

But, A Bad Implementation Can Still Derail you...

Example: A Static React Web App

Breaking Down the Content ARchitecture

Editors See This

You See This 

curl https://046a1a87-api.agilitycms.cloud/fetch/en-us/item/28 
--header "APIKey: defaultlive.2b7f3a91559d794bedb688358be5e13af2b1e3ae8cd39e8ed2433bbef5d8d6ac"
{
  "contentID": 28,
  "properties": {
    "state": 2,
    "modified": "2019-08-16T15:49:56.583",
    "versionID": 173,
    "referenceName": "dodgeblocklandingpage",
    "definitionName": "LandingPage",
    "itemOrder": 0
  },
  "fields": {
    "brandLogo": {
      "label": "Dodgeblock VR",
      "url": "https://046a1a87-cdn.agilitycms.cloud/Attachments/NewItems/dodgeblock_20190816194430_0.png",
      "target": null,
      "filesize": 19767,
      "pixelHeight": "54",
      "pixelWidth": "440",
      "height": 54,
      "width": 440
    },
    "youTubeURL": "https://www.youtube.com/watch?v=TjfY_cBc8DI&t=4s",
    "mainRichText": "<h2 style=\"text-align: center;\">Coming soon...</h2>\r\n<h2 style=\"text-align: center;\">An endless runner, re-imagined in VR.</h2>\r\n<p style=\"text-align: center;\">No two runs are ever the same. How long can you last?</p>",
    "primaryLink": "<a href=\"https://www.reddit.com/r/DodgeblockVR/\" target=\"_blank\">Join the Discussion on Reddit</a>",
    "platformsHeading": "Platforms:",
    "platformsImages": {
      "galleryid": 2
    },
    "footerRichText": "<p>Produced by Vidler Studios, 2019</p>"
  }
}

Job Done!

  • How do editors re-arrange the order of content on the page?
     
  • How do editors create/delete or rename a page?

Not so Fast...

A better Way: Give them Page Management And Modularize Functionality

What they See

What They See

What You See

curl https://046a1a87-api.agilitycms.cloud/fetch/en-us/page/2 
--header "APIKey: defaultlive.2b7f3a91559d794bedb688358be5e13af2b1e3ae8cd39e8ed2433bbef5d8d6ac"
{
  "pageID": 2,
  "name": "home",
  "path": null,
  "title": "Home",
  "menuText": "New Home Text",
  "pageType": "static",
  "templateName": "One Column Template",
  "redirectUrl": "",
  "securePage": false,
  "excludeFromOutputCache": false,
  "visible": {
    "menu": true,
    "sitemap": true
  },
  "seo": {
    "metaDescription": "",
    "metaKeywords": "",
    "metaHTML": "",
    "menuVisible": null,
    "sitemapVisible": null
  },
  "scripts": {
    "excludedFromGlobal": false,
    "top": null,
    "bottom": null
  },
  "properties": {
    "state": 2,
    "modified": "2019-08-01T14:26:01.177",
    "versionID": 48
  },
  "zones": {
    "MainContentZone": [
      {
        "module": "Jumbotron",
        "item": {
          "contentID": 12,
          "properties": {
            "state": 2,
            "modified": "2019-08-01T14:26:02.553",
            "versionID": 135,
            "referenceName": "home_jumbotron",
            "definitionName": "Jumbotron",
            "itemOrder": 0
          },
          "fields": {
            "title": "Blog Post Template ",
            "subTitle": "Welcome to Agility!"
          }
        }
      },
      {
        "module": "RichTextArea",
        "item": {
          "contentID": 22,
          "properties": {
            "state": 2,
            "modified": "2019-08-01T14:26:03.603",
            "versionID": 136,
            "referenceName": "home_richtextarea",
            "definitionName": "RichTextArea",
            "itemOrder": 0
          },
          "fields": {
            "textblob": "<h1>About this Site</h1>\n<p>This is a sample blog that showcases how you can use React and the JS SDK to build a dynamic Single-Page-Application.</p>\n<p><a href=\"https://github.com/agility/agility-create-react-app\" target=\"_blank\" rel=\"noopener\">View the source code</a></p>"
          }
        }
      },
      {
        "module": "PostsListing",
        "item": {
          "contentID": 23,
          "properties": {
            "state": 2,
            "modified": "2019-08-01T14:26:04.837",
            "versionID": 137,
            "referenceName": "home_postslisting",
            "definitionName": "PostsListing",
            "itemOrder": 0
          },
          "fields": {
            "title": "Posts",
            "posts": {
              "referencename": "posts"
            }
          }
        }
      }
    ]
  }
}

Keys to a Successful Headless CMS Implementation

  1. Editors can manage all aspects of pages (Name, SEO, and Content)
     
  2. Editors can manage Url Redirections
     
  3. Editors can understand your content architecture

But how can this help me  become a 10x Developer?

Ask the Right Questions

What happens if this is used on a different page template?

What if the editor adds 100 items to this list...

How can I protect page speed performance?

How can this be re-used?

Will people still know how to use this after i'm gone?

Work Smarter & Avoid Distractions

Offload content entry

Focus on performance

Focus on features

Getting to 'Done' and moving on

Focus on the next big thing

Always Learning

Fluid Tech Stack

Giving Back

Happy Editors

Happy Developers

Tools!

Every Developer Deserves a 'Good' CMS in THeir Toolkit

fastr_conf

By James Vidler

fastr_conf

How a Headless CMS can Help you Become 10X Developer

  • 22
Loading comments...

More from James Vidler