This was a presentation I gave at the Boston WordPress Meetup on October 30, 2017. It focuses on a set of development tools that we have used at the MIT Libraries that includes Waffle.io, Travis, and CodeClimate. I also discuss some alternatives that we tried, and some thoughts on replacements for aspects of this approach.

1. WordPress Under Control
Matthew Bernhardt
MIT Libraries
@morphosis7

2. MIT Libraries Use WordPress
• 21 node multisite network
• 58 plugins
• 11 themes

3. Multiple environments
Development
• libraries_development.mit.edu
Testing
• libraries_testing.mit.edu
Production
• libraries.mit.edu

4. How we change things…
Starting with developer(s)

5. Multiple environments
Development
Testing
Production
Developer
FTP

6. Multiple developers
Development
Testing
Production
Developer
Developer
FTP

7. This is getting out of hand...
Development
Testing
Production
Developer
Developer
Contractor
FTP
FTP

8. You take this, you take that, I’ll be over here
Plugins
Home Page News
Pending Posts
Multisearch Widget
Private Debug Log
Themes
Parent
Child
News
Music Oral History
150Books
Connick
TwentyTwelve
Developer
Developer
Contractor

9. Enter GitHub
Developer
Developer
Contractor
Development
Testing
Production

10. Enter GitHub…and Magic happens?
Developer
Developer
Contractor
Development
Testing
Production

11. WordPress Architecture
WordPress Core Plugins
Community
Custom
Themes
Core
Community
Custom

12. WordPress UI for Core / Community
GitHub for Local / Custom code
WordPress Core Plugins
Community
Custom
Themes
Core
Community
Custom

13. 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

14. Each project gets its own repository

15. …WordPress under (source) control
Developer
Developer
Contractor
Development
Testing
Production

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

17. What about non-developers?
Developer
Developer
Contractor
Development
Testing
Production
UX
Specialist
Content
Owner
Communications

18. Developer
Developer
Contractor
Development
Testing
Production
UX
Specialist
Content
Owner
Communications

19. Developer
Developer
Contractor
Development
Testing
Production
UX
Specialist
Content
Owner
Communications
Agile?
Basecamp?

20. GitHub UI can be intimidating

21. Enter Waffle.io

22. 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

23. 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

24. Developer
Developer
Contractor
Development
Testing
Production
UX
Specialist
Content
Owner
Communications
Waffle.io

25. …let’s talk about side benefits
Code quality
Ghosted plugins

26. Side Benefit: code quality

27. Development and review process
Developer
Development
• Simple visual
inspection
Testing
Production
Stakeholder

28. Development and review process
Developer
Development
Testing
• Rigorous User Testing
• Cross-browser
inspection
• Pull request / code
review
Production
Stakeholder
Developer

29. Development and review process
Developer
Development
Testing
Production
• Post-deploy
verification
Stakeholder

30. Can we automate this?
Developer
Development
Testing
• Code Review
Production
Developer

31. Static Code Analysis

32. Static Code Analysis

33. 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

34. Example implementations
Plugin Template
• https://github.com/MITLibraries/wp-plugin-template
Underscores theme (Travis/PHPCS only)
• https://github.com/automattic/_s
• Specifically .travis.yml

35. Outcomes
• Swallow our pride
• Chip away at fixes when possible

36. Development and review process
Developer
Development
Testing
• Code Review
Production
Developer

37. Developer
Developer
Contractor
Development
Testing
Production
UX
Specialist
Content
Owner
Communications
Waffle.io

38. Side Benefit: ghosted plugins

39. Ghosted plugins

40. Ghosted plugins to local repository

41. Ghosted plugins to local repository
• Enables code analysis to try and
guess why removed
• Ensures backup if a site needs to
be rebuilt

42. Related: Plugin canary
• Watch for plugins that are not
listed in public directory

43. Other things we have tried

44. Visual Regression Testing

45. Visual Regression Testing
• Rampart
https://github.com/mitlibraries/rampart
• Based on BackstopJS
https://github.com/garris/BackstopJS
• Also evaluating Instadiff

46. Visual Regression Testing
• Automated visual comparisons
• Multiple window sizes
• Selenium-based (only one
render engine)
• Tricky to tune
• Manually initiated (so far)

47. Trello

48. Trello
• Separate from GitHub
• Easy to use on its own
• Very simple (in fact, too simple)

49. JIRA

50. JIRA
• Separate from GitHub
• Much more complex
(appropriately so, in our case)

51. 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?

52. 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 Libraries
https://libraries.mit.edu
https://github.com/mitlibraries/
• Matthew Bernhardt
mjbernha@mit.edu
@morphosis7