SlideShare a Scribd company logo
1 of 37
Download to read offline
Lose Your Head!
Reimagining WordPress's Role
in Content Presentation
Jeremy Ward

WordCamp Minneapolis-St. Paul

August 24, 2019
@_jmichaelward jmichaelward.com
Hi, I'm Jeremy.
• Senior Backend Engineer at WebDevStudios

• Student of Software Architecture 

• Author of OOPS-WP

• Board Game Enthusiast

• Stand-up Comedy Fan

• "I'm from St. Paul."
@_jmichaelward jmichaelward.com
Why We're Here
• Learn about "front-end", "back-end", and "headless"

• Discuss the recent history of the WordPress project

• Discover benefits and trade-offs of a headless approach

• Review available front-end presentation options

• Find out where to learn more
@_jmichaelward jmichaelward.com
What is "Headless"?
@_jmichaelward jmichaelward.com
Headless === Two Apps
@_jmichaelward jmichaelward.com
Classic WordPress
@_jmichaelward jmichaelward.com
Headless WordPress
@_jmichaelward jmichaelward.com
WordPress in the back...
• WordPress admin dashboard for content entry

• WP REST API

• MySQL database for storing content (...maybe)
@_jmichaelward jmichaelward.com
...party in the front!
• Custom JavaScript apps (Node, React, Vue)

• Native or mobile apps

• "Serverless" sites 

• Basically anything that presents content that isn't WordPress itself
–Matt Mullenweg, 2015 State of the Word
"Learn JavaScript, deeply."
@_jmichaelward jmichaelward.com
WP REST API
@_jmichaelward jmichaelward.com
@_jmichaelward jmichaelward.com
The Key To It All
• JSON-based interface for getting and creating data

• Fully customizable

• Faster than admin-ajax!
@_jmichaelward jmichaelward.com
Authentication
@_jmichaelward jmichaelward.com
API Tools
• Command Line

• cURL

• HTTPie

• GUI

• Postman

• Insomnia
@_jmichaelward jmichaelward.com
Block Editor
@_jmichaelward jmichaelward.com
Frontends
@_jmichaelward jmichaelward.com
Static Sites
@_jmichaelward jmichaelward.com
JavaScript Apps
@_jmichaelward jmichaelward.com
Mobile Apps
@_jmichaelward jmichaelward.com
Benefits and Trade-offs
@_jmichaelward jmichaelward.com
Why Headless?
• Publish once, distribute anywhere

• Better security

• Separate apps

• Potentially static frontends (no logins!)

• Improved performance

• WordPress skillsets not required for frontend development
@_jmichaelward jmichaelward.com
There are Trade-offs
• Maintain two apps instead of one

• Requires specialized skillsets (e.g., JavaScript developers)

• Feature loss/challenges

• Native preview

• SEO

• WordPress theme settings/filters
@_jmichaelward jmichaelward.com
Who's Going Headless, and...
Do I Need To?
@_jmichaelward jmichaelward.com
But, performance...
@_jmichaelward jmichaelward.com
define( 'SHORTINIT', 1 );
@_jmichaelward jmichaelward.com
define( 'WP_USE_THEMES', false );
@_jmichaelward jmichaelward.com
GraphQL
@_jmichaelward jmichaelward.com
WordPress as a Client
@_jmichaelward jmichaelward.com
Calypso
@_jmichaelward jmichaelward.com
Demo....?
@_jmichaelward jmichaelward.com
Summary
@_jmichaelward jmichaelward.com
WordPress is Changing
@_jmichaelward jmichaelward.com
Developer Roles are Changing
@_jmichaelward jmichaelward.com
Change is the only constant.
@_jmichaelward jmichaelward.com
Resources
• REST API Handbook: https://developer.wordpress.org/rest-api/

• Smashing Magazine:

https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/

• Postlight Headless WP Starter: https://github.com/postlight/headless-wp-starter

• Gatsby + WordPress: https://www.gatsbyjs.com/guides/wordpress/

• Headless WordPress with React:

https://medium.com/@jchiatt/headless-wordpress-with-react-d573bca02ee0

• WPGraphQL: https://wpgraphql.com

• JAMStack: https://jamstack.org
@_jmichaelward jmichaelward.com
Questions?
• Twitter: @_jmichaelward

• E-mail: jeremy@jmichaelward.com

• Work: https://webdevstudios.com

• Check out: https://github.com/webdevstudios/oops-wp

More Related Content

What's hot

What's hot (20)

WP 101 - WordPress Basics
WP 101 - WordPress BasicsWP 101 - WordPress Basics
WP 101 - WordPress Basics
 
Toolstrap
ToolstrapToolstrap
Toolstrap
 
Famo.us introduction
Famo.us introductionFamo.us introduction
Famo.us introduction
 
Build your WordPress page fast and clean
Build your WordPress page fast and cleanBuild your WordPress page fast and clean
Build your WordPress page fast and clean
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Startup Weekend & LocomotiveCMS (In Chinese)
Startup Weekend & LocomotiveCMS (In Chinese)Startup Weekend & LocomotiveCMS (In Chinese)
Startup Weekend & LocomotiveCMS (In Chinese)
 
Build Your WordPress Site or Blog in 10 Steps - BConnected Ottawa
Build Your WordPress Site or Blog in 10 Steps  - BConnected OttawaBuild Your WordPress Site or Blog in 10 Steps  - BConnected Ottawa
Build Your WordPress Site or Blog in 10 Steps - BConnected Ottawa
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Word press
Word pressWord press
Word press
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
 
Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!Resistance is futile: Start writing accessible websites now!
Resistance is futile: Start writing accessible websites now!
 
All about Front End - Girl Code @ ANWB
All about Front End - Girl Code @ ANWBAll about Front End - Girl Code @ ANWB
All about Front End - Girl Code @ ANWB
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and Plugins
 
CSS架構如何加速功能開發
CSS架構如何加速功能開發CSS架構如何加速功能開發
CSS架構如何加速功能開發
 
Wordpress for beginners
Wordpress for beginnersWordpress for beginners
Wordpress for beginners
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Top WordPress Responsive Personal Blog Themes for 2014
Top WordPress Responsive Personal Blog Themes for 2014Top WordPress Responsive Personal Blog Themes for 2014
Top WordPress Responsive Personal Blog Themes for 2014
 

Similar to Lose Your Head! Re-imagining WordPress's Role in Content Presentation

The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
hernanibf
 
Oxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your websiteOxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your website
hernanibf
 
Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012
Volkan Özçelik
 

Similar to Lose Your Head! Re-imagining WordPress's Role in Content Presentation (20)

Using WordPress as a Backend for Your React Project
Using WordPress as a Backend for Your React ProjectUsing WordPress as a Backend for Your React Project
Using WordPress as a Backend for Your React Project
 
Usersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJS
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
 
Oxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your websiteOxford DrupalCamp 2012 - The things we found in your website
Oxford DrupalCamp 2012 - The things we found in your website
 
The WordPress Way
The WordPress WayThe WordPress Way
The WordPress Way
 
Sahi Principles and Architecture
Sahi Principles and ArchitectureSahi Principles and Architecture
Sahi Principles and Architecture
 
Write Generic Code with the Tooling API
Write Generic Code with the Tooling APIWrite Generic Code with the Tooling API
Write Generic Code with the Tooling API
 
External JavaScript Widget Development Best Practices
External JavaScript Widget Development Best PracticesExternal JavaScript Widget Development Best Practices
External JavaScript Widget Development Best Practices
 
Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012
 
Best Practices for WordPress
Best Practices for WordPressBest Practices for WordPress
Best Practices for WordPress
 
Things you should know about WordPress (but were always too afraid to ask): W...
Things you should know about WordPress (but were always too afraid to ask): W...Things you should know about WordPress (but were always too afraid to ask): W...
Things you should know about WordPress (but were always too afraid to ask): W...
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
Acquia Insight – the Ultimate Drupal Management Suite
Acquia Insight – the Ultimate Drupal Management SuiteAcquia Insight – the Ultimate Drupal Management Suite
Acquia Insight – the Ultimate Drupal Management Suite
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in school
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Embracing HTTP in the era of API’s
Embracing HTTP in the era of API’sEmbracing HTTP in the era of API’s
Embracing HTTP in the era of API’s
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design Geek
 
External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1)
 
Word press as your company website
Word press as your company websiteWord press as your company website
Word press as your company website
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 

Lose Your Head! Re-imagining WordPress's Role in Content Presentation