10 Tips for Faster Angular Development

I’ve been writing Angular code since the early alphas of version 2. I’ve picked up a few things that make development faster for me. I hope they help you too!

Extensions

Everybody has their favorite extensions. And it seems like if it’s good enough, it’ll eventually get adopted into the core of Visual Studio Code. I’m not going to turn this into an article on extensions. I’ll just mention the ones that will help speed up your day-to-day development.

• Angular Snippets by John Papa are very helpful for common things like ngIf, ngFor, or even whole classes!
• Auto Rename Tag helps when template editing to make sure your closing tag matches your opening tag automatically!
• Using GitHub? GitHub Pull Requests and Issues allows you to create and manage pull requests right from your IDE rather than having to go to the web.
• Version Lens lets you see how your package.json file stacks up against the latest versions of packages on npm. Saves a lot of back and forth, especially during upgrades. One click can bring you right up to the latest!

Snippets

If you’re using Visual Studio Code then you’ll want to configure snippets for common things in Angular. Now, there are some good libraries for these out there, like Angular Snippets by John Papa. But they don’t cover everything.

Do you often generate service methods like this?

myMethod$(): Observable<SomeType> {
  return this.http.get<SomeType[]>(`api/something`).pipe(
    catchError((error: HttpErrorResponse) => {
      Logger.error('MyClass', 'myMethod$', error.message);
      return throwError(() => error);
    })
  );
}

In VSCode go to Preferences/User Snippets and select TypeScript and add this to the JSON:

"Http Service Method": {
  "prefix": "httpmethod", // this is your shortcut to type in VSCode
  "body": [
    "$1($2): Observable<$3> {",
    "  return this.http.get<$3>(`$4`).pipe(",
    "    catchError((e: HttpErrorResponse) => {",
    "      Logger.error('$5', '$1', e.message);",
    "      return throwError(() => e.message);",
    "    })",
    "  );",
    "}"
  ]
},

Now, just type httpm and autocomplete is going to suggest your Http Service Method snippet. Hit enter and it will let you fill in the blanks in the order of the $#'s.

I prefix all of my snippets with j- so that I distinguish them from other extensions’ snippets. I use snippets for import statements, it's in spec files, logging, etc… Lots of little things you do every day become much faster!

Always ng serve --hmr

Why are you NOT using Hot Module Replacement? Only compile what changed and re-serve that module. The more granular your NgModules are, the more likely this is to speed up your code/validate/code/validate/… cycle.

And, while you’re at it…

ng serve --hmr -o

-o will automatically open your browser for you!

Use Multiple Terminals in VSCode

I like to use the built-in terminal in VSCode. I can use the shell I want, and I can open and name each one. Use the + to add a new terminal instance, and then you can click to switch between them. You can right click to rename and do other cool things:

I always have four open at once, to cover our Pre-PR checklist.

ng serve --hmr is always first

Then I have three for our checklist:

• Production build step
• Production test step
• Production lint step

I love that I can quickly switch between each terminal quickly (I’ve configured a keyboard shortcut for doing this), hit the up arrow to get my last command, hit enter, and run my build steps concurrently in separate terminals, all within VSCode!

Configure Your Terminal Shell For Git

I won’t give you instructions on how to do this since it’s going to be different depending on your shell of choice. I personally use OhMyZsh on Mac. But, PC or Mac, you can configure your shell to inform you when you’re in a folder that is attached to Git.

Here, in yellow, you can see that I have pending changes to my branch. In green, after I’ve synced my changes. I know which branch I’m on and get details about the status of my branch.

Usually, this setup is a little involved. Here is a good guide for getting started with zsh (and more advanced command line mastery) and then you’ll need to add the GitHub CLI to your environment to get the git info integrated.

https://commandlinepoweruser.com/

Learn Keyboard Shortcuts

No matter which IDE you use, an efficient keyboard user will always trounce a mouse user in a speed competition. Learn to switch tabs, open files, run command from your keyboard and you’ll be moving much faster soon.

In VSCode go to Preferences, Keyboard Shortcuts to learn what’s available and even create your own shortcuts for common tasks.

And learn to use your keyboard for basic text navigation. Learn how to move one word and line at a time. Learn how to do quick selections.

In VSCode use Alt+Click to put your cursor in multiple places to make repetitive changes all at once.

Here are some favorites of mine in VSCode:

• Cmd+P : start typing to find files in your code, enter to open.
• Cmd+Shift+F : Find in files
• Cmd+Shift+P : Open VSCode commands panel
• Cmd + B : Toggle the Explorer panel

Learn Git

I cannot overstate this enough. If you’re using Git, LEARN it. Here is the best course I know of for learning how and why Git works so that you won’t be afraid of all of the things you can do with it:

How Git Works

Knowing how to revert a commit, move a commit to a new branch, cherry pick a commit, change branch names, etc. will make you a much faster and safer developer.

Then…

Learn to use Git from the Command Line

GUIs might be good for sorting out what happened in the past with branches and commits. But compared to what you can do from the command line when you really know Git, you’ll handle even the toughest situations much quicker and with higher confidence when you know exactly which commands you’re executing.

Use WallabyJS

This one is a little controversial. WallabyJS is a paid, expensive, extension to VSCode (and other IDEs) for multi-threaded, concurrent running of unit tests while you code. It only runs changed tests. It allows you to debug your tests directly in the IDE. It marks passing/failing tests and lines of code in the IDE so it’s easy to tell what you have/haven’t tested, and which tests are failing or passing. It has powerful code-coverage reporting, debugging tools, and is very well supported and maintained. Updates almost daily.

I’m pretty sure I save the cost of WallabyJS’s license EVERY SINGLE WEEK. Expensive? Not really. Game changer. If my company would not pay for it, I would personally.

Bonus!

11 for good measure!

The only way to go fast is to go well.
Quality is the only way to go fast.

This sentiment is from Uncle Bob, Clean Code author. Slow down. Write clean, quality code that is understandable and maintainable. Fast isn’t just about today. It’s about six months from now when you have to add something to the code you’re writing today. Write it well now, and updating it will be faster, easier, and less prone to breakage then.

Keep learning. Keep experimenting. Keep growing!

Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!

Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:

• Expert panels and Q&A sessions with the speakers
• A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
• Hands-on workshops
• Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget

We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.

https://2022.ng-conf.org/