A lightning-talk on how the MIT Libraries are attempting to structure a project development ecosystem to support WordPress for technical and non-technical stakeholders and developers.

1. WordPress Under Control
Matthew Bernhardt, MIT Libraries

2. MIT Libraries Use WordPress

3. Multiple environments
Production
• libraries.mit.edu
Testing
• libraries-test.mit.edu
Development
• libraries-dev.mit.edu

4. Multiple environments
Production
Testing
Development
Developer FTP

5. Multiple developers
Production
Testing
Development
Developer
Developer

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

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

8. Enter GitHub
Developer
Developer
Contractor
Production
Testing
Development

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

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

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

12. Seven repositories
• Two plugins
• Wp-home-page-news https://github.com/MITLibraries/wp-home-page-news
• Wp-pending-posts https://github.com/MITLibraries/wp-pending-posts
• Five themes
• MITLibraries-parent https://github.com/MITLibraries/MITlibraries-parent
• MITLibraries-child https://github.com/MITLibraries/MITLibraries-child
• MITLibraries-news https://github.com/MITLibraries/MITLibraries-news
• Music-Oral-History https://github.com/MITLibraries/music-oral-history
• unBox https://github.com/MITLibraries/unBox

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

14. But wait…
This only addresses part of the team.

15. But wait…
Developer
Developer
Contractor
Production
Testing
Development
UX
Specialist
Content
Owner
Communications

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

17. GitHub UI can be intimidating

18. Enter Waffle.io

19. Enter Waffle.io
• Focused on issues, not code
• Stores (almost) no data itself
• Alternate UI for GitHub
• Free for open source
• Offers easy point of entry

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

21. …now let’s talk about quality
Speed of development
Quality assurance
Stakeholder confidence

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

23. Development and review process
Developer
Development
Testing
• Rigorous User
Testing
• Cross-browser
inspection
Production
Stakeholder

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

25. Can we automate any of this?

26. Can we automate any of this?
Visual Regression Testing
Static Code Analysis

27. Static Code Analysis

28. Static Code Analysis
• PHP CodeSniffer
• Includes WordPress-specific
rules
• Run under Travis CI
• Sample repository
https://github.com/MITLibraries/wp-plugin-template

29. Static Code Analysis
• Swallow our pride
• Chip away at fixes

30. Development and review process
Developer
Development
Testing
Production
Stakeholder

31. Visual Regression Testing

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

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

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

35. Future steps
• Integrate Visual Regression Testing into GitHub workflow
• Better build/deploy workflow from GitHub to servers
• Refactor WordPress code to be testable (where possible)

36. Thank You
• GitHub for source control
• One repository per project
• Themes
• Plugins
• Automatic code linting
• Travis CI
• CodeClimate?
• Visual regression testing
• BackstopJS
• (Instadiff?)
• MIT Libraries
https://libraries.mit.edu
https://github.com/mitlibraries/
• Matthew Bernhardt
mjbernha@mit.edu
@morphosis7