Quality Tooling For Web Apps
kylecoberly.com
Quality Tooling For Web Apps
- What is quality?
- Who cares?
- Quality principles
- Quality practices
- Checklist
What is Quality?
When it does what you say it does.
Why Does Quality Matter?
1. It's Faster
The Effect of Low Quality Over Time
Rework
Fear of change
Slow is smooth, smooth is fast.
2. Morale & Trust
Quality Principles
These take the exact same amount of time!
Chores
Fun Work
Chores
Fun Work
Chores
Fun Work
Timing Matters
Handoffs Matter
Scoping
Design
Dev
Testing
Release
Quality Is Not A Feature
A feature is not done until it's:
- Styled
- Accessible
- Deployed
- Documented
- Tested
- Refactored
- Integrated analytics
- Refactoring tickets
- Accessibility as an afterthought
- QA writes the tests
- "It's done except..."
Quality Practices
Version Control
"Wait, that worked a second ago"
"Can you show me the code from 2.1.4?"
"That deploy broke stuff, roll it back"
- Commit every time your tests go green
- Squash features
- Tag your versions
Use: Git
Measure: How quickly can you roll back?
What problems look like:
Practices:
Containers
New hire spends a week setting up
Someone proposes containers
First "Weird, works on my machine"
- Do this first, while it's still easy
- This is a force-multiplier on speed!
Use: Docker Compose
Measure: How quickly can you setup the app?
What problems look like:
Practices:
Some manager finally approves it
Linting & Formatting
Syntax problem
Time spent manually formatting
Still troubleshooting syntax problem
- Make it part of the build system, not someone's config
Use: ESLint and Prettier
Measure: How much time do you spend formatting?
What problems look like:
Practices:
Team has an 4 hour argument about style
Someone's commit
reformats the entire codebase
Testing
Guess
Check
- Write them first, before your app becomes untestable
- Test outside-in
- Refactor when your tests pass
Use: Cypress and Jest
Measure: How much time on manual testing?
What problems look like:
Practices:
Guess
Guess
Guess
Guess
Guess
Check
Check
Check
Check
What the living fuck that broke something else
Deployment
Deployed something broken anyway
Can't deploy because it's Friday afternoon
- Do this first, while it's still easy
- Deploy early, deploy often
Use: GitHub Actions
Measure: How quickly can you confidently deploy?
What problems look like:
Practices:
Scrambled to fix it and broke something else
Realizing late something won't work in production
Deployment is exhausting because you only do it once a quarter
Forgot to do some manual build task
Old Man Coberly's New Web App Checklist
- Version control
- Container Setup
- CI/CD pipeline
- Delete boilerplate files
- Formatting & Linting
- Feature test setup
- Unit test setup
- Smoke tests
- Accessibility Test Plan
- Update README
- Documentation
- Analytics
- Logging
- Design system
- Splash page
- 404 page
- Make favicons
- Update app manifest
- Setup profile & avatar for email
What Can You Do?
- Practice!
- Front-load the quality work
- Don't ask permission
Questions?
Kyle Coberly
kylecoberly.com