Making it easy to follow best practices

What's the point?

What's the point of "best practices"?

What do we all want?

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent
  • Engaged

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent
  • Engaged
  • Valued

Developer happiness

Best practices?

Best practices?

Chosen conventions

Convention adoption stages

  • Choosing
  • Implementing
  • Maintaining

Choosing conventions

Define the problems

Define technical problems in terms specific, personal, and emotional

Objectivity and absolutes don't exist in human systems

Avoid bikeshedding

Use 3 month discussion freezes

Time-constrained voting

Convention guidelines

Enable dumb devs to write great code

Conventions should be easy to refactor/abandon

Create "utils" folders for

still-evolving problems

Implementing conventions

Automate everything

  • Linters (eslint, stylelint, markdownlint)
  • Formatters (prettier)
  • Image optimization (image-min)
  • Generators (hygen/plop)

  • Code snippets
    (                                                        )

.vscode/*.code-snippets

Even in your app!

if (process.env.NODE_ENV !== 'production') { 
  // Check for insecure URL in href.
  if (!this.allowInsecure && !/^(https|mailto|tel):/.test(this.href)) {
    return console.error(
      `Insecure <BaseLink href="${this.href}">. When linking to` +
      `external sites, always prefer https URLs. If this site` +
      `does not offer SSL, explicitly add the allow-insecure` + 
      `attribute to <BaseLink>.`
    )
  }
}
<ExternalLink href="http://example.com/" />

Make console.error fail tests

// Make console.error throw, so that Jest tests fail
const error = console.error
console.error = function(message) {
  error.apply(console, arguments)
  // NOTE: You can whitelist some `console.error` messages here
  //       by returning if the `message` value is acceptable.
  throw message instanceof Error ? message : new Error(message)
}

Test everything

Test everything

Useful tests are...

Visible

Everyone knows when

tests are failing

Reliable

Tests don't fail intermittently

Fast

Tests run quickly

Debuggable

When a test fails,

it's easy to learn why

End-to-end testing libraries

The 2 essential end-to-end tests

  • Can users log in?
  • Can users give us money?

Unit testing libraries

  • Jest? 😅
  • Whatever 🤷‍♂️

The 2 essential unit tests

  • Do files export the rightish thing?
  • Does all the regex work?

Put unit tests next to files they test 

Multi-level continuous integration

  1. Pre-commit
  2. Pull/merge requests
  3. Dev branch

Pre-commit CI with husky and lint-staged

/** @file lint-staged.config.js */

module.exports = {
  '*.js': [
    'eslint --fix',
    'prettier --write',
    'git add',
    'jest --bail --findRelatedTests'
  ],
  '*.scss': ['stylelint --fix', 'prettier --write', 'git add'],
  '*.md': ['markdownlint', 'prettier --write', 'git add'],
  '*.{png,jpeg,jpg,gif,svg}': ['imagemin-lint-staged', 'git add']
}

Pull/merge request CI

Everything from pre-commit

Essential end-to-end tests

Related end-to-end tests

Dev branch CI

Everything from pull/merge requests

All other end-to-end and unit tests

Maintaining conventions

Foster emotional awareness

Don't blame individuals

Find systems solutions

If you have power, protect your devs

Take care of yourselves

That's all!

Special thanks to my Vuesionary sponsors!

  • Vuetify
  • Vue School
  • Vue Mastery
  • Ben Hong

patreon.com/chrisvuefritz

Thank YOU!

@chrisvfritz

slides.com/chrisvfritz/ easy-best-practices-2019-10

Made with Slides.com