Vanilla

www.mysite.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

• 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
• More on this later

#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

What we are tasked with...

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

• 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