DEV Community

Cover image for Using Betterer To Track NgRx Upgrade
Stephen Cooper
Stephen Cooper

Posted on

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]'
    ),
};
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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!

GitHub logo phenomnomnominal / betterer

betterer makes it easier to make incremental improvements to your codebase

Betterer

npm version

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!

Discussion (0)