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

Quality Tooling For Web Apps

By Kyle Coberly

Quality Tooling For Web Apps

Presentation for DenverScript, April 2021

  • 1,132