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

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

๐Ÿšจ

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