Hi! I'm Julien 🤓

Twitter: @JulienMelissas

Technical Director at Craftpeak

I like...

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

Dina

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

📤

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)

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

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

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