52
WordPress Under Control Matthew Bernhardt MIT Libraries @morphosis7

WordPress Under Control (Boston WP Meetup)

Embed Size (px)

Citation preview

WordPress Under ControlMatthew Bernhardt

MIT Libraries

@morphosis7

MIT Libraries Use WordPress

• 21 node multisite network

• 58 plugins

• 11 themes

Multiple environments

Development

• libraries_development.mit.edu

Testing

• libraries_testing.mit.edu

Production

• libraries.mit.edu

How we change things…Starting with developer(s)

Multiple environments

Development

Testing

Production

DeveloperFTP

Multiple developers

Development

Testing

Production

Developer

Developer

FTP

This is getting out of hand...

Development

Testing

Production

Developer

Developer

Contractor

FTP

FTP

You take this, you take that, I’ll be over here

Plugins

Home Page News

Pending Posts

Multisearch Widget

Private Debug Log

ThemesParent

Child

News

Music Oral History

150Books

Connick

TwentyTwelve

Developer

Developer

Contractor

Enter GitHub

Developer

Developer

Contractor

Development

Testing

Production

Enter GitHub…and Magic happens?

Developer

Developer

Contractor

Development

Testing

Production

WordPress Architecture

WordPress Core Plugins

Community

Custom

Themes

Core

Community

Custom

WordPress UI for Core / CommunityGitHub for Local / Custom code

WordPress Core Plugins

Community

Custom

Themes

Core

Community

Custom

17 repositories

• Seven plugins• Plugin Canary

• Multisearch widget

• Private debug log

• Analytics

• Home page news

• Pending posts

• Custom child post types

• Ten themes• Parent

• Child

• 8 Site-specific themes

Each project gets its own repository

…WordPress under (source) control

Developer

Developer

Contractor

Development

Testing

Production

…but wait…This only addresses part of the team.

What about non-developers?

Developer

Developer

Contractor

Development

Testing

Production

UX Specialist

Content Owner

Communications

Developer

Developer

Contractor

Development

Testing

Production

UX Specialist

Content Owner

Communications

Developer

Developer

Contractor

Development

Testing

Production

UX Specialist

Content Owner

Communications

Agile?Basecamp?

GitHub UI can be intimidating

Enter Waffle.io

Enter Waffle.io

• Focused on issues, not code

• Stores (almost) no data itself

• Alternate UI for GitHub

• Free for open source

• Multiple repos summarized on one board

One system, many interfaces

• Developers get to use git

• Non-developers get to not use git

• Everybody has interface choices based on their desire

• Everything is free

Developer

Developer

Contractor

Development

Testing

Production

UX Specialist

Content Owner

Communications

Waffle.io

…let’s talk about side benefitsCode quality

Ghosted plugins

Side Benefit: code quality

Development and review process

Developer

Development

• Simple visual inspection

Testing

Production

Stakeholder

Development and review process

Developer

Development

Testing

• Rigorous User Testing

• Cross-browser inspection

• Pull request / code review

Production

Stakeholder

Developer

Development and review process

Developer

Development

Testing

Production

• Post-deploy verification

Stakeholder

Can we automate this?

Developer

Development

Testing

• Code Review

Production

Developer

Static Code Analysis

Static Code Analysis

Static Code Analysis

Travis CI

• Runs PHP CodeSniffer

• Includes WP Code Standards

• Scans the entire codebase for each PR

• Customizable deploy script

CodeClimate

• Runs PHPCS, ESlint, CSSlint

• Includes WP Code Standards

• Scans only the methods/lines that have changed

• Only performs code analysis

Example implementations

Plugin Template

• https://github.com/MITLibraries/wp-plugin-template

Underscores theme (Travis/PHPCS only)

• https://github.com/automattic/_s• Specifically .travis.yml

Outcomes

• Swallow our pride

• Chip away at fixes when possible

Development and review process

Developer

Development

Testing

• Code Review

Production

Developer

Developer

Developer

Contractor

Development

Testing

Production

UX Specialist

Content Owner

Communications

Waffle.io

Side Benefit: ghosted plugins

Ghosted plugins

Ghosted plugins to local repository

Ghosted plugins to local repository

• Enables code analysis to try and guess why removed

• Ensures backup if a site needs to be rebuilt

Related: Plugin canary

• Watch for plugins that are not listed in public directory

Other things we have tried

Visual Regression Testing

Visual Regression Testing

• Ramparthttps://github.com/mitlibraries/rampart

• Based on BackstopJShttps://github.com/garris/BackstopJS

• Also evaluating Instadiff

Visual Regression Testing

• Automated visual comparisons

• Multiple window sizes

• Selenium-based (only one render engine)

• Tricky to tune

• Manually initiated (so far)

Trello

Trello

• Separate from GitHub

• Easy to use on its own

• Very simple (in fact, too simple)

JIRA

JIRA

• Separate from GitHub

• Much more complex (appropriately so, in our case)

Future (and latest) steps

• Visual regression testing

• Move from Waffle to JIRA• Combines code- and non-code changes

• Not as easy to use, but more expansive

• Better build/deploy workflow from GitHub to servers

• Refactor WordPress code to be testable

• Submit projects to WordPress / SVN / TRAC?

• Pantheon?

Thank You

• GitHub for source control• One repository per (local) project

• Waffle as an alternative UI• …although we’ve moved to JIRA

• Automatic code linting• Travis CI

• CodeClimate

• Continuously examine your tooling choices

• MIT Librarieshttps://libraries.mit.eduhttps://github.com/mitlibraries/

• Matthew [email protected]@morphosis7