As an adult, I don’t know much about cleaning the house. I mean… I clean; my wife keeps me honest, but I do like to think I spend a bit more time trying to clean my enterprise repo, and what better time than the spring to do a little repo cleaning to make sure you’re continuing the year with good vibes and a good repo to log into every day? What good tech debt items can you use to clean some dust from your repos?
Clean Out Unused and Deprecated Third-Party Tools
This is a fun one! You can go extremely light here or go all out. You know that package.json file you have with over 100 packages listed? I promise you that several are no longer being used in your project. It’s almost tedious, busy work to go through every single package and see how it’s used or, more importantly, if it’s needed, but there are tools like depcheck that do a scan across a directory to see which dependencies are unused.
As for the deprecated tools (or just unneeded tools in general), we made a big effort last year to move from moment.js to date-fns. The you-dont-need series gives you access to you-dont-need-moment to help you migrate away from moment. I advocated for date-fns to get functional programming and tree-shaking, but there are great alternatives like luxon and dayjs to decrease your bundle size substantially.
Staying in that same vein, are you still using Lodash in 2023? The you-dont-need-lodash package can get you off Lodash after a sprint or two, heavily focusing on cleaning that package. This is another heavy package that gives you small benefits for a big bundle cost.
Clean Out Those Dirty Templates
With Component Testing becoming more popular, identifying unnecessary functionality in component classes has become easier. Some popular patterns used in Component templates are ternary or concatenation to build out strings.
<span>{{ user.firstName }} {{ user.lastName }}</span>
<p>{{ totalUsers }} {{ (totalUsers === 1 ? ‘User’ : ‘Users’) }} Online </p>
This pattern is pretty common, and Angular makes it easy to do this in a template instead of adding this logic to a lifecycle function. But both of these elements could cause a visual bug. If userisn’t defined, the page cannot render correctly. If totalUsersisn’t defined, you get a weird string that just reads “Users Online” without the total number. This would also flash on the screen before totalUsers receives a value.
To make these easier to test and limit visual bugs, move these patterns to a pipe! You can create pure functions that can take a User property and programmatically determine if the first or last name isn’t present to show “New User” or something more reader-friendly.
Any plurality pipe could take in two or three arguments and be sharable across multiple features. Instead of doing a ternary in your template, you could do something similar to:
transform(count: number, singular: string, plural: string): string {
return count === 1 ? `${count} ${singular}` : `${count} ${plural}`;
}
And then use it in your template like:
<p> {{ totalUsers | plural:’User Online’:’Users Online’ }} </p>
These are far easier to unit test since you can now pass the function any number and any two strings to test the values.
Run an Accessibility Audit
Accessibility is a big deal, whether you realize it or not. Many of the things that would fail an audit are things that you wouldn’t typically think of. Color contrasts, dynamically generated IDs being repeated on your page accidentally through *ngFor creating elements, or having an ID on a shared component you use in several spots (like a custom input). These things don’t have huge implications for most users, but try turning on a screen reader, rather it be Voiceover or Jaws, and give your application a listen.
Just add Axe Devtools to your chrome browser and run the default settings on a few pages at WCAG 2.1 AA will give you enough nooks and crannies to clean through for a week per page. I always advocate grabbing a subscription to the Pro plan to isolate your components and running audits against each component instead of a page, but if you’re running Cypress, you can add the cypress-axe package to get accessibility guards for your e2e tests (This doesn’t work currently with component-tests).
Improve Your Lint Rules
Do you find yourself, or any of your peers, leaving many of the same comments on PRs? Adding space between brackets? Nested subscriptions? Forgetting to mark a property as private? You name it. If you’re repeating yourself in a PR, it’s probably time to add this as an error in your linter.
Speaking of errors in linters, another fun thing to do is go in and fix warnings that your linter is spitting out during the lint step of your build. We used a fun strategy to nix 100 warnings at a time per lint warning. Removing console.log, removing all nested subscribes from the project, removing instances of takeWhile where it made more sense to use a takeUntil, and as I mentioned earlier, removing lodash and moment.
If you need help introducing new rules into your codebase, Jason Warner pointed me to a cool library called betterer that helps you introduce and test new rules. If you want more freedom and guidance on the different rules that are already on and quickly getting to them, nibble is an awesome solution.
Once your warnings are set to 0, flip the warning to an error and prevent those things from ever entering your codebase!
Finally Add Tests to Your Project
During interviews, I often ask, “What does your testing strategy look like?” On numerous occasions, I’ve been told that “Our repo has no tests” or “We just let QAs handle the testing.” What better time than now to add some tests? Any tests? Adding unit tests to pipes is a great way to introduce some tests to your environment. If you want to give some immediate impact to your business and maybe even WOW them with a demo of some end-to-end tests, adding Cypress and making a handful of “Happy Path” tests to a few of your major workflows can go a long way.
If you’re looking into adding some protection and guards for your tests
Whichever strategy you implore, always start by honing in on recent things or core functionality. If you have no tests, add a test to your next PR. Start adding “testing scope” to your user story that you’re about to start. Or, if you’re working on a bug right now, be sure to create a unit test that confirms your change.
Get to Cleaning
No matter what you decide to do, if any of these things, do something to clean up your repository. The worst thing any developer can do is contribute to an ever-growing pile of tech debt that you will never be able to reduce.
I’m sure I missed something that could be added to the list, but look for some easy win tech debt that you or your team can knock out in a sprint and get your repo looking clean and spiffy!
Scrub-a-dub-dub
Join us at ng-conf 2023!
ng-conf | June 14–15, 2023
Workshops | June 12–13, 2023
Location | Salt Lake City, UT
ng-conf 2023 is a two-day single track conference focused on building the Angular community. Come be a part of this amazing event, meet the Angular Team and the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills.
Spring Cleaning! Angular Edition was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.