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
- Editors can manage all aspects of pages (Name, SEO, and Content)
- Editors can manage Url Redirections
- 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!
