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
-
Use MariaDB or Percona Server for MySQL
-
Require high availability & low ping time
-
Know your r/w limits
-
Good backups!!
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:
- Merge develop into staging/master
-
Run `yarn build` on theme to build assets
-
Upload all changed files to server via SFTP
-
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?
Badass WordPress Stack Julien Melissas WordCamp Asheville 2017 💪