Using Betterer To Track NgRx Upgrade

A few weeks ago I came across this tweet from @phenomnominal where he was introducing a tool called BETTERER. I immediately thought about using this to track my team's progress in converting our NgRx code to use the greatly improved Action creators.

Creating the rule

I finally got round to trying it out and with the help of the TSQuery Playground - lovingly crafted by Uri Shaked, I was able to write the following TSQuery check.

const { tsqueryBetterer } = require('@betterer/tsquery');

module.exports = {
    'NgRx: Action Creators:': tsqueryBetterer(
        './tsconfig.json',
        'HeritageClause > ExpressionWithTypeArguments > Identifier[name=Action]'
    ),
};

Running betterer gave the following output (greatly shortened...)

  137 | export class SelectSimulation implements Action {
      |
  139 |     readonly type = SELECT_SIMULATION;
  140 | 
  141 |     constructor(public payload: SimulationId) {}
☀️  betterer  info 💬   - 1 thing got checked.
☀️  betterer  warn ⚠️   - 1 thing stayed the same. 😐
Done in 9.48s.

The number of matches gets recorded in a better.results snapshot file. If you then update the Action declaration to use the createAction syntax you will reduce the number of matches. Running betterer again will then give the following output.

☀️  betterer  info 💬   - 1 thing got checked.
☀️  betterer  good ❤️   - 1 thing got better! 😍
Done in 9.61s.

Preventing Old Style Code

Now comes the really useful part. Once agreed with the rest of the team, we can add Betterer to our lint stage. If someone then adds an action using the old syntax the number of matches will go up and we can fail the task accordingly.

  betterer  info 💬   - 1 thing got checked.
☀️  betterer  baad 💀   - 1 thing got worse. 😔
☀️  betterer  baad 💀   - "NgRx: Action Creators:" got worse
error Command failed with exit code 1.

It's then clear to see which of your checks failed making it easy to go and update your code as required. If you really need to get something out you can always just reset the snapshot results file.

Tracking Progress

The cherry on the cake. I can now search our Github repos for "NgRx: Action Creators" and get an accurate and up to date snapshot on our progress. No longer is it a vague guess as to what is left because we have concrete figures!

Thank you so much to @phenomnominal for sharing this tool with us!

phenomnomnominal / betterer

betterer makes it easier to make incremental improvements to your codebase

Betterer

Are you working with a large team, or a legacy codebase? Want to make big sweeping changes over your project, but can't do it all in one go?

Making widespread changes to a codebase can be really hard. When trying to make some sort improvement that affects a lot of code, one of two things often happens:

1. You start a really long-lived branch that is awful to maintain and often impossible to merge.

2. You and your team have some agreement to make the improvement slowly over time, but it gets forgotten about and never really happens.

Betterer makes it easier to make incremental improvements to your codebase!

Docs

Check out the docs at phenomnomnominal.github.io/betterer!

View on GitHub