Headless WordPress
WordCamp SLC 2019
Who Am I?
What is "self"?
Are we greater than the sum of our parts?
For real though...
- Married since 2012 and have 2 daughters and 2 dogs
- Love BBQing and Video Games
- Lakers Fan
- I'm a developer at Clearlink
- Working with WordPress since 2012
- Run a small WordPress-based YouTube channel - WPCasts
What We Are Covering
-
Vanilla WordPress
-
Headless WordPress
-
When it would make sense to use a headless WordPress setup
-
When it would not make sense
-
Real-world example
Vanilla
<Hello />
www.mysite.com
othersite.com
Advantages of Vanilla
#1 PHP Top To Bottom
- Very fast especially the latest versions
- PHP 7.3 is just shy of 10% faster than PHP 7.2 in the popular PHPBench. PHP 7.3 is 31% faster than PHP 7.0 or nearly 3x the speed of PHP5.
- PHP is very familiar
- Large open source community
- Lots of tutorials about how to to X, Y, AND Z
#2 Maintaining One Thing
- You're dealing with one codebase (your theme)
- More if you have custom plugins
- All your HTML, CSS, and JS is in one spot
- Pull down one repository, probably run composer and npm and you're good to go
#3 Plugins! Glorious Plugins.
- Insane amount of free plugins
- Super powerful premium plugins
My Favorites
Honorable Mentions
- Yoast SEO
- CPT UI
- Advanced Custom Fields Pro
- Query Monitor
- Shortpixel, EWWW, Smush
- WP Rocket
- WooCommerce
- Gravity Forms
- Regenerate Thumbnails
- much more
#4 Themes...sometimes
- Good for non-techies
- But mostly a hassle for developers
#5 Instant Publishing
- You push "publish" and your content is live
- Can have WYSIWYG experience
- Instant feedback
#6 Performant If Done Right
- WordPress gets a bad rap for performance
- Not always true, but sometimes
- WP Rocket and other caching plugins can hide some issues
- REST API can be slow
- Plugins and/or themes can be the culprit
#7 Spin Sites Up Quickly
- Flywheel, Pre-made Docker Images, etc.
- Install some plugins
- Install a theme
- Lots of cheap and available hosting options that will do the trick
#8 Easy For Clients and Devs
- Awesome user interface for publish content
- ACF
- Elementor
- Divi
- etc
- Developer friendly with lots of code examples, documentation and tutorials
Disadvantages of Vanilla
#1 PHP Templating is good, but not great
- Definitely does the trick and what I've used for a long time
- There are tools out there that can help like Twig and Timber
#2 Plugins Are Amazing...Until They Aren't
- Plugins can speed up work
- Saves time and money
- Some plugins can go unmaintained, have security holes, or cause bloat
#3 Performance Needs Attention
- Plugins can help with this
- Lazy loading images and optimizing them
- Minifying and concatenating your CSS and JS
- Being smart about API calls
- Caching responses in Transients when it makes sense
#4 Backend And Frontend Are Tightly Coupled
- This makes redesigns and updates harder
- If you need to move away from WordPress or move to another frontend framework, it makes it harder
#5 PHP Is Cheap, But Not Free
- TTFB can be a killer
- Hosting can become expensive as you need more and more power
What Is Headless WordPress?
Headless WordPress Advantages
#1 Freedom To Use Whatever Frontend You Want
- You can use things like Angular, React, Vue to render your content
- You can use GatsbyJS to render your content statically
- You can use React Native to make a phone app
- Whichever makes sense for your project
#2 Publish Same Content To Any Platform
- You can publish the same content to your internal site, your CRM, phone app, or wherever
#3 Potentially Share Code Between Platforms
- Utilize component libraries to share code
- From site to site
- Site to app
- From all of the above to a design system
#4 Pivot At Any Point
- Do you need to switch from React to GatsbyJS? No problem
- React Native to Swift and Java. Again, no worries.
Headless WordPress Disadvantages
# 1 Frontend and Backend are two different technologies
- Now all of a sudden you have to know deep PHP and deep JavaScript
- If you can't do both, you'll have to hire someone who knows the one that you don't know
# 2 Hosting Your Code In Different Places
- You'll host your WordPress site in one place and your other properties in other areas
- Different hosts might have different workflows unless you're building a process on your own in something like AWS
- If you are, someone has to build that and maintain it
# 3 No instant feedback
- Headless removes the WordPress frontend, so things like the Preview button won't work
- There will be a build process if you use something like GatsbyJS
#4 Limited Plugin Selection
- You can't drop a slider plugin in the same way you could in Vanilla
- Manual hookup would need to happen on the frontend most of the time
#5 More Upfront Work
- Someone has to create the API
- Someone has to build out the frontend
- Can have a big learning curve
#6 Can simply be overkill
When Is Headless WordPress
A Good Idea?
When you anticipate publishing on multiple platforms (website, phone app, watch app, etc)
When you need the same content to appear across multiple services (public-facing website, CRM, or other internal services)
When you want to take advantage of modern frameworks like GatsbyJS
It's only you and you want to give it a try.
When Is Headless WordPress
A Bad Idea?
-
You need to rely on plugins or themes
-
You're handing it off to someone who isn't tech-savvy
-
It can be overkill
Real-World Example
Let's say we sold cars...
What we are tasked with...
Website
Mobile Apps
CRM
How would we go about it?
We use WordPress
-
WordPress is our "source of truth" for our data
-
Employees can enter information about new cars, categorize them, upload images, etc.
-
House data about past or potential customers
-
Store SEO data
We use WPGraphQL. Why?
-
WPGraphQL is much faster
-
Single Request
-
Frontend focused for rapid development
-
Query agnostic (knows if you’re asking for meta, categories etc.)
-
-
Using the REST API can be slow
-
Loads WordPress Core
-
Loads Plugins, who can be greedy sometimes
-
Independent queries that have no idea about each other
-
Predefined endpoints
-
Website
CRM
We use GatsbyJS. Why?
-
GatsbyJS can have CRA abilities for our CRM
-
GatsbyJS can statically generate the pages of our website ahead of time
-
A large array of plugins
-
Offline support
-
Performant
-
Lazily load content
-
Predict user behavior and prefetch content
-
Much more
-
React Native & NPM
Conclusion
"Use a headless setup if it makes sense. If it doesn't make sense. Don't." - Wayne Gretzky
- Alex Young
THANK YOU!
WordCamp SLC 2019
By Alex Young
WordCamp SLC 2019
- 1,435