Embed Size (px)
Citation preview
WordPress Under Control
Matthew Bernhardt, MIT Libraries
MIT Libraries Use WordPress
Multiple environments
Production• libraries.mit.edu
Testing• libraries-test.mit.edu
Development• libraries-dev.mit.edu
Multiple environments
Production
Testing
Development
Developer FTP
Multiple developers
Production
Testing
Development
Developer
Developer
This is getting out of hand...
Production
Testing
Development
Developer
Developer
Contractor
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
Enter GitHub
Developer
Developer
Contractor
Production
Testing
Development
Enter GitHub…and Magic happens?
Developer
Developer
Contractor
Production
Testing
Development
WordPress ArchitectureWordPress
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
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
…WordPress under (source) control
Developer
Developer
Contractor
Production
Testing
Development
But wait…This only addresses part of the team.
But wait…
Developer
Developer
Contractor
Production
Testing
Development
UX Specialist
Content Owner
Communications
Developer
Developer
Contractor
Production
Testing
Development
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• Offers easy point of entry
Developer
Developer
Contractor
Production
Testing
Development
UX Specialist
Content Owner
Communications
Waffle.io
…now let’s talk about qualitySpeed of developmentQuality assuranceStakeholder confidence
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
Production
Stakeholder
Development and review process
Developer
Development
Testing
Production• Post-deploy
verification
Stakeholder
Can we automate any of this?
Can we automate any of this?Visual Regression TestingStatic Code Analysis
Static Code Analysis
Static Code Analysis• PHP CodeSniffer• Includes WordPress-specific
rules• Run under Travis CI
• Sample repositoryhttps://github.com/MITLibraries/wp-plugin-template
Static Code Analysis• Swallow our pride• Chip away at fixes
Development and review process
Developer
Development
Testing
ProductionStakeholder
Visual Regression Testing
Visual Regression Testing• Rampart
https://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)
Developer
Developer
Contractor
Development
Testing
Production
UX Specialist
Content OwnerCommunications
Waffle.io
Rampart
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)
Thank You• GitHub for source control• One repository per project• Themes• Plugins
• Automatic code linting• Travis CI• CodeClimate?
• Visual regression testing• BackstopJS• (Instadiff?)
• MIT Librarieshttps://libraries.mit.eduhttps://github.com/mitlibraries/• Matthew Bernhardt
[email protected]@morphosis7
![WordPress speed [INFOGRAPHIC] – How to reduce your load time to under 1 second](https://img.pdfslide.us/doc/110x75/55c56f20bb61eb05538b4670/wordpress-speed-infographic-how-to-reduce-your-load-time-to-under-1-second.jpg)
