The Enterprise Wor/d/thy/Press

transcript

THE ENTERPRISE WOR/D/THY/PRESS

THE FAMOUS 5-MINUTE INSTALLATION

WORDPRESS

BUT WHAT ABOUT MAINTENANCE?

WORDPRESS

IS THE ADMIN THE BEST PLACE?

MANAGE THEMES & PLUGIN VERSIONS?

WORDPRESS

CHANGES OR NEW FUNCTIONALITY

HOW DO YOU TEST OR DEVELOP?

WORDPRESS

WITH MINIMAL DOWNTIME

AND WHAT ABOUT DEPLOYING?

WORDPRESS

FOR THE BEST USER EXPERIENCE

IT NEEDS TO BE FAST!

WORDPRESS

DEVOPS CLI FRONTEND SEARCH

WE NEED FULL CONTROL OF DEV & OPS

TO DEPLOY TO MULTIPLE ENVIRONMENTS

DEPENDENCY MANAGEMENT

FOR CONSISTENT ENVIRONMENTS

AUTOMATION

DEV DEPENDENCY MANAGEMENT

GETCOMPOSER.ORG

COMPOSER

PHP PACKAGE REPOSITORY

PACKAGIST.ORG

CUSTOM PATHS DEFINITIONS

COMPOSER INSTALLERS

COMPOSER’ED’ PLUGIN & THEME MIRROR OF WORDPRESS.ORG

WPACKAGIST.ORG

NOT SUPPORTED IN WORDPRESS CORE :(

COMPOSER

GITHUB.COM/JOHNPBLOCH/WORDPRESS

BUT THERE IS A SOLUTION

{ "name": "epwp/wordpress", "type": "project", "require": { "php": ">=7.0", "johnpbloch/wordpress": "4.6.1" }, "extra": { "wordpress-install-dir": "custom/path" } }

1 . 2 . 3 MAJOR . MINOR . PATCH

BC-BREAKS . FEATURES . FIXES

SEMVER

~ 1 . 2 . 3 ^ 1 . 2 . 3

VERSIONING

ROOTS.IO/BEDROCK

BEDROCK

├── composer.json ├── config │ ├── application.php │ └── environments │ ├── development.php │ ├── staging.php │ └── production.php ├── vendor └── web ├── app │ ├── mu-plugins │ ├── plugins │ ├── themes │ └── uploads ├── wp-config.php ├── index.php └── wp

NEVER HARDCODE OR STORE VARIABLES

WP-CONFIG CHANGES

BEDROCK

/** * Use Dotenv to set required environment variables * and load .env file in root */ $dotenv = new Dotenv\Dotenv($root_dir); if (file_exists($root_dir . '/.env')) { $dotenv->load(); $dotenv->required( [ 'DB_NAME', 'DB_USER', 'DB_PASSWORD', 'WP_HOME', 'WP_SITEURL' ] ); }

OPS AUTOMATION

PROVISIONING, CONFIGURATION & DEPLOYMENT

ANSIBLE

AUTOMATION

IN YAML FORM

PLAYBOOKS

AUTOMATION

--- - hosts: webservers vars: http_port: 80 max_clients: 200 remote_user: root tasks: - name: ensure apache is at the latest version yum: name=httpd state=latest - name: write the apache config file template: src=/srv/httpd.j2 dest=/etc/httpd.conf notify: - restart apache - name: ensure apache is running (and enable it at boot) service: name=httpd state=started enabled=yes handlers: - name: restart apache service: name=httpd state=restarted

DOCS.ANSIBLE.COM/ANSIBLE/

MODULES

AUTOMATION

COMMUNITY ROLE MANAGER

ANSIBLE GALAXY

AUTOMATION

- name: composer src: geerlingguy.composer version: 1.2.7

- name: ntp src: resmo.ntp version: 0.3.0

- name: logrotate src: nickhammond.logrotate version: fc3ea4

FOR SENSITIVE DATA ENCRYPTION

ANSIBLE VAULT

AUTOMATION

vi file_with_passwords.yml

ansible-vault edit file_with_password.yml

.VAULT_PASS NOT UNDER VERSION CONTROL

KEEP YOUR KEY PRIVATE

AUTOMATION

ANSIBLE-PLAYBOOK DEPLOY.YML -E ENV=<ENV> -E SITE=<SITE>

DEPLOY WITH CONFIDENCE

AUTOMATION

ROOTS.IO/TRELLIS

TRELLIS

FOR LOCAL DEVELOPMENT

VAGRANT

AUTOMATION

§ Nginx § MariaDB § PHP 7.0 § Composer § WP-CLI § LetsEncrypt SSL § Page caching like Varnish § Data caching in memory § Ops best practices

TRELLIS

epwp.com/ # → Root folder for the project ├── trellis/ # → Automation, provision, deployment └── site/ # → A Bedrock-based WordPress site └── web/ ├── app/ # → WordPress content directory └── wp/ # → WordPress core (don't touch!)

DIY LET’S BOOTSTRAP THIS!

TRELLIS

mkdir epwp.com

cd epwp.com

git clone https://github.com/jvandijk/epwp-trellis.git trellis

git clone https://github.com/jvandijk/epwp-site.git site

FASTER ADMINISTRATION OF WORDPRESS

WP CLI

WP-CLI

vagrant@epwp:/srv/www/epwp.com/current$ wp cli info

PHP binary: /usr/bin/php7.0 PHP version: 7.0.11-2+deb.sury.org~xenial+2 php.ini used: /etc/php/7.0/cli/php.ini WP-CLI root dir: phar://wp-cli.phar WP-CLI packages dir: /home/vagrant/.wp-cli/packages/ WP-CLI global config: WP-CLI project config: /srv/www/epwp.com/current/wp-cli.yml WP-CLI version: 0.24.1

TO EXECUTE DIRECT DATABASE QUERIES

WP-CLI

MIGRATE YOUR DATA

WP EXPORT & IMPORT

WP-CLI

MODIFY CONTENT

WP SEARCH-REPLACE

WP-CLI

INSTALL, CHECK-UPDATE, MULTISITE CHANGE

WP CORE

INSTALL, CHECK-UPDATE, MULTISITE CHANGE

WP CORE

`WP PACKAGE BROWSE` FOR MORE OSS CLI EXTENSIONS

WP CLI PACKAGES

WP-CLI

GENERATE CODE ACCORDING TO BEST PRACTICES

WP SCAFFOLD

SCAFFOLDING

GENERATE CODE FOR PLUGIN

WP SCAFFOLD PLUGIN <SLUG>

SCAFFOLDING

GENERATE CODE FOR A CUSTOM POST TYPE

WP SCAFFOLD POST-TYPE <SLUG>

SCAFFOLDING

GENERATE THE CODE FOR A TAXONOMY

WP SCAFFOLD TAXONOMY <SLUG> —POST-TYPES=<A,B>

SCAFFOLDING

IMPLEMENT PLUGIN

<?php /* Plugin Name: My WP extension Plugin URI: https://www.a-wp-site.com/ Description: WordPress extension Version: 1.0.0 Author: Enrise Author URI: https://www.enrise.com */ require_once('src/Bootstrap.php');

new \Bootstrap::getInstance();

IMPLEMENT PLUGIN

public static function getInstance() { if ( ! ( self::$instance instanceof self ) ) { self::$instance = new self(); }

return self::$instance; }

protected function __construct() { add_action( 'plugins_loaded', [ $this, 'doYourThing' ], 100 ); }

public function doYourThing() { // trigger your scaffolded code from here return; }

LIST, SEARCH, INSTALL, ACTIVATE, UPDATE

WP PLUGIN

3RD PARTY PLUGIN

LIST, SEARCH, INSTALL, ACTIVATE, UPDATE

WP PLUGIN

3RD PARTY PLUGIN

TO LOCK ON A VERSION

COMPOSER REQUIRE WPACKAGIST-PLUGIN/SLUG

3RD PARTY PLUGIN

ADVANCEDCUSTOMFIELDS.COM

LET’S EXTEND THAT CUSTOM POST TYPE

CUSTOM FIELDS

COMPOSER REQUIRE WPACKAGIST-PLUGIN/ADVANCED-CUSTOM-FIELDS

ADVANCED CUSTOM FIELDS

CUSTOM FIELDS

WILL BE STORED IN DATABASE

DESIGN CUSTOM FIELD ADDITIONS IN THE ADMIN

CUSTOM FIELDS

UNFORTUNATELY NO DIRECT SCAFFOLDING

EXPORT CUSTOM FIELDS TO PHP

CUSTOM FIELDS

DECOUPLED CMS

GOING HEADLESS

NO MONOLITH STRATEGY

SCALING UP

TRANSPILE TO SUPPORT OLDER TECHNOLOGIES

BLEEDING EDGE JAVASCRIPT & CSS

START USING IT TODAY!

ECMASCRIPT 2016

NPM INSTALL ESLINT —SAVE-DEV

ESLINT

NPM INSTALL ESLINT-CONFIG-AIRBNB —SAVE-DEV

ESLINT-CONFIG-AIRBNB

.ESLINTRC

{ "root": true, "extends": "airbnb", "globals": { "wp": true }, "parser": "babel-eslint", "rules": { "react/jsx-filename-extension": [ 1, { "extensions": [".js", ".jsx"] } ], } }

TRANSPILE DOWN TO ECMASCRIPT 5

BABEL JS

MODULE BUNDLER

WEBPACK

COMPONENT BASED STRATEGY

src/components/blocks/Logo/├── Logo.css├── Logo.js├── package.json└── logo.svg

EXTRACT-TEXT, FILE-LOADER, URL-LOADER

WEBPACK PLUGINS

AUTO RELOAD ON EVERY CODE CHANGE

WEBPACK HOT MIDDLEWARE

DESIGN IN MULTIPLE BROWSERS SIMULTANEOUS

BROWSER SYNC

DEVELOPER EXPERIENCE

COMPLETE DECOUPLE THE FRONTEND

WORDPRESS REST API

COMPOSER REQUIRE WP-API/WP-API

WORDPRESS REST API

USE THE POWER OF AMAZON S3

MEDIA STORAGE

COMPOSER REQUIRE HUMANMADE/S3-UPLOADS

MEDIA STORAGE

ARE YOU READY?

NOW LET’S START SETTING UP

SERIOUSLY?

LET’S NOT REINVENT THE WHEEL..

SERIOUSLY?

ROOTS.IO/SAGE

§ Sass for stylesheets § ES6 for JavaScript § Webpack for compiling assets, optimizing images, and

concatenating and minifying files § BrowserSync for synchronized browser testing § Bootstrap 4 for a front-end framework § Template inheritance

TEMPLATE STRUCTURE

$ tree templates templates ├── 404.php ├── index.php ├── layouts │ └── base.php ├── page.php ├── partials │ ├── content-page.php │ ├── content-single.php │ ├── content.php │ ├── entry-meta.php │ ├── footer.php │ ├── head.php │ ├── header.php │ ├── page-header.php │ └── sidebar.php ├── single.php └── template-custom.php

composer create-project roots/sage your-theme-name 9.0.0-alpha.3

WE NEED SOME DATA!

SMALL INTERMEZZO

FAKE DATA

GITHUB.COM/FZANINOTTO/FAKER

FAKE DATA

EXPRESSIVE FIXTURES GENERATOR

FAKE DATA

WP PACKAGE INSTALL TRENDWERK/FAKER

WP CLI FAKER

FAKE DATA

Trendwerk\Faker\Post: session{41..80}: post_content: <realText(600, 4)> post_title: '<sentence()>' post_type: 'session' post_date_gmt: <(gmdate('Y-m-d H:i:s', (time() - (rand(1, 5) * 86400) + ( rand(1, 8) * 3600))))> meta: date: <(gmdate('Ymd', strtotime(@self->post_date_gmt)))> start_time: <(strtotime(@self->post_date_gmt) - (strtotime(@self-> post_date_gmt) % 3600))> # end the session an hour later end_time: <(3600 + strtotime(@self->post_date_gmt) - (strtotime(@self-> post_date_gmt) % 3600))> speakers: <(array((string)((int)$this->valueForCurrent - 40 + 10)))> terms: location: <terms('location', 1)>

WP FAKER FAKE YOUR-FILE.YML

GENERATE THE DATA

FAKE DATA

DISTRIBUTED FULL TEXT SEARCH ENGINE

ELASTICSEARCH

SEARCH

CONSISTENCY - AVAILABILITY - PARTITION TOLERANCE

NOSQL DATABASE

SEARCH

HTTP JSON API

RESTFUL INTERFACE

SEARCH

RDBMS ELASTICSEARCH

DATABASE INDEX

TABLE TYPE

ROW DOCUMENT

DEFINING YOUR STRUCTURE

MAPPING

SEARCH

"your-index" : { "mappings" : { "post" : { "properties" : { "post_content" : { "type" : "string" }, "post_date" : { "type" : "date", "format" : "YYYY-MM-dd HH:mm:ss", "include_in_all" : false }, "post_title" : { "type" : "string", "store" : true, "fields" : { "raw" : { "type" : "string", "index" : "not_analyzed" }, "sortable" : { "type" : "string", "analyzer" : "ewp_lowercase" } }, ...

ANALYZED VS NOT ANALYZED

SEARCH

COMPOSER REQUIRE WPACKAGIST-PLUGIN/ELASTICPRESS

ELASTICPRESS

SEARCH

define('EP_HOST', env('EP_HOST')); define('ES_SHIELD', env('ES_SHIELD'));

wp elasticpress index --setup

SEAMLESS FOR WORDPRESS SEARCH

INTEGRATES WITH WP_QUERY

SEARCH

new WP_Query( [ 'ep_integrate' => true, 'post_type' => 'post', 'posts_per_page' => 20, ] );

./DEPLOY.SH PRODUCTION EPWP.COM

RUNNING IN PRODUCTION

DEPLOY

§ initialize - creates the site directory structure § update - clones the Git repo onto the remote server § prepare - prepares the files in the new release path § build - builds the new release § share - symlinks shared folders to new release § finalize - finalizes the deploy by updating the symlink

ADD YOUR DEPLOY HOOKS IN DEPLOY.YML

The Enterprise Wor/d/thy/Press

Technology