Badass WordPress Stack

Julien Melissas

 

WordCamp Asheville 2017

💪

Hi! I'm Julien 🤓

Twitter: @JulienMelissas

Technical Director at Craftpeak

I like...

  • Dogs
  • Motorcycling
  • Travel
  • Music
  • Cooking
  • Other Stuff

Dina

Wilbur

Most days I do...

  • Custom websites/web tools for Craft Breweries
  • WordPress Development: on the roots.io team and build custom themes/websites/web applications all day
  • UX/UI Consultation

"It's time to focus, we need to build something legit."

📤

API Server

💻

JS SPA

🗄

Database Server

🖥

Admin JS SPA

🗂

Version Control

🔄

CI

None of this includes:

  • Load Balancers, CDN, DNS

  • DB Cache (Redis, etc)

  • CI Testing (Travis, etc)

  • Staging/Dev Environment(s)

📤

WordPress

💻

WordPress Theme

🗄

Database Server

🖥

WordPress Admin

🗂

Version Control

🔄

CI

"Why are you using WordPress?"

Less to build

Abundance of tools/resources

Community

(Developers, Open Source, Corporate Backing, Security)

Backwards Compatibility*

(sometimes this makes me sad)

"Why are you not using WordPress?"

Our Requirements:

  • Loads fast. Fast. As fast as possible.
  • "Scaleable"
  • Multiple Developers
  • Modern Development Tools
  • Everything in Source Code (resiliency)
  • Automated Deployments/Builds
  • Staging Environment

DNS+

Assets (CDN)

Content

WordPress (Back End)

Database

Host

CI / Deployments

Version Control

WordPress (Front End)

WordPress (Back End)

  • Application code

  • Plugins, mu-plugins

  • Admin interface

  • API endpoints

WordPress (Back End)

WordPress (Back End)

Bedrock:

  • Moves things to /wp/ and /app/ (old wp-content)
  • Uses composer for plugins/dependencies (anything PHP)
  • Uses .env files for environment-specific details
  • Uses bcrypt for user passwords (better than MD5)

Database

Host

  • PHP 7(.1) - seriously

  • nginx

  • HTTP/2

  • Caching

  • SSH/root access

  • wp-cli, SSL (Let's Encrypt)

Host

WordPress (Front End)

  • Build process

  • Minified & critical assets

  • Templating (Twig/Timber, Blade, etc.)

  • ES6, SASS, LESS, React, etc.

WordPress (Front End)

WordPress (Front End)

  • Webpack

  • Blade Templates

  • ES6 & SASS

  • Bootstrap or Foundation

  • Community

Version Control

GitHub

GitLab

Bitbucket

Version Control

Git Flow

CI / Deployments

Travis

Circle CI

DeployBot

CI / Deployments

CI / Deployments

Build Process:

  1. Merge develop into staging/master

  2. Run `yarn build` on theme to build assets

  3. Upload all changed files to server via SFTP

  4. Run `composer install` on bedrock install and theme

CI / Deployments

DEMO DEMO DEMO

🚨

https://github.com/Craftpeak/badasswp

Assets / CDN

  • Optimized Images per browser/device (webp)

  • Edit/crop in WordPress admin

  • Loads Quickly, Distributed

Assets / CDN

  • WP Offload S3 + Amazon Cloudfront

  • KeyCDN

  • MaxCDN

  • Host-specific CDN

Assets / CDN

+

storage

cdn / optimizations

Assets / CDN

  • Media Cloud by ILAB

  • Upload to S3, serve images from imgix

  • Serve image based on browser/device

  • On-demand image editing

Content

  • Minify HTML

  • Critical CSS / JS

  • Smart webfont loading

  • Cache cache cache!

DNS+

  • Quick Responses

  • Not with host

  • Fast Changes

DNS+

  • Cloudflare

  • Route53

  • + (lots)

DNS+

DNS+

  • Super fast changes

  • Reverse Proxy CDN

  • WAF (Web application firewall)

  • SSL

WIP (Work in Progress)

  • Automated Testing

  • Load balancing

  • Database Sharding (WPMU)

  • DB Migrations (Merge(bot)?)

Thanks!

Any Questions?

Made with Slides.com