How to Find Out If Someone Really Knows Angular

As a technical lead on an enterprise Angular project, one of my responsibilities is to sit in on interviews for potential candidates. The recruiters mainly target resumes that have any mention of the word Angular. My team and I, however, look for experienced developers who are already well versed with the popular Google framework. These are five questions I use to help reveal if a developer is as senior as they claim to be in Angular.

1) What are the different Change Detection Strategies in Angular?

A common problem with Angular's predecessor, AngularJS, was its strategy for change detection via a digest loop and watchers. This worked fine for smaller apps but as the number of directives and watchers grew, improper management of those watchers would lead to memory leaks and would bring browsers to their knees. Angular was a complete overhaul of the framework and moved away from these concepts as well as introducing two different change detection strategies for components: Default and OnPush.

OnPush is the preferred approach for large applications since it is more explicit on what types of events will trigger a change detection.

• A component Input has changed
• A DOM event that the component is listening to was triggered
• An AsyncPipe received a new value
• Change detection has been explicitly triggered (detectChanges, markForCheck)

Angular OnPush Change Detection - Avoid Common Pitfalls

Angular Change Detection and the OnPush strategy

This is one of the fundamental topics that Angular developers should be aware of to prevent their apps from doing more work than necessary. Performance is key for enterprise applications so if this isn't at the forefront of their minds it probably means they haven't had much experience with complex apps.

2) What RxJS transformation operators do you know and how have you used them?

At the core of Angular is RxJS. A candidate should have ample experience with its observables and pipeable operators. The more common ones like tap and map should be a given but skilled developers should have some knowledge of the more challenging transformation operators like concatMap, mergeMap, switchMap, or exhaustMap. There are several tutorials and blog entries on their differences.

RxJs Mapping: switchMap vs mergeMap vs concatMap vs exhaustMap

mergeMap vs exhaustMap vs switchMap vs concatMap

If a candidate can describe a real-world situation with one or more of the transformation operators - unlike the basic interval timer examples - then they have potential.

3) Have you used AsyncPipe and what is its main advantage?

An important aspect of Angular is dealing with RxJS subscriptions. Developers usually don't have any problems subscribing to the observable counterparts but not as many are proficient with properly removing them when no longer needed. Several approaches have been suggested to handle this pattern:

• Adding subscriptions to a subscriptions array and unsubscribing to each of them on component destroy
• Using a single subscription object and adding child subscriptions to it. When the component is destroyed, only a single unsubscribe is needed on the parent subscription.
• Using a pipe operator with a take(1) to only subscribe once

All of these are effective but another option that Angular provides is the AsyncPipe. The gist of the AsyncPipe is that it can be used to subscribe to an observable and will automatically unsubscribe when the component is destroyed. This is a more graceful approach and will prevent having to manage subscriptions as much on your own. With that said, candidates tend to be unaware of this technique since it usually is not included in basic tutorials.

4) Have you used any State Management and if not, what other ways have you shared data between components?

A state management framework is not essential to Angular but it should at least be part of the conversation when developing an Angular application. We currently use NGXS, which is similar to the more popular framework called NGRX but has significantly less boilerplate code. If a developer has experience in any state management, they should be able to speak to its primary advantage of having a single source of truth for components to share data.

The more common way in Angular for components to share data is via component Inputs/Outputs or through a service class using RxJS Subject or BehaviorSubject classes. These are acceptable approaches but between the two the service implementation is more elegant and makes use of the ever-useful RxJS observables. An experienced Angular developer should have no problem discussing these strategies but if they can speak to a state management framework, that's even better.

5) Have you done Unit Testing and are you familiar with Jest?

When utilizing the Angular CLI to generate Angular classes, a corresponding spec test file is always created. These are meant to be elaborated upon and become essential for code quality and regression testing. Out of the box, Angular uses Jasmine and the Karma test runner and they are sufficient in stress testing your codebase. Experience with these should be the norm for any Angular developer.

Jasmine Documentation

Karma - Spectacular Test Runner for Javascript

On our project we use Jest and it is excellent. As noted in their documentation, "Jest ships with jsdom which simulates a DOM environment as if you were in the browser."

Jest - Delightful JavaScript Testing

This caters to testing scenarios where Angular code manipulates the DOM dynamically. Jest became more popular with React so it isn't as well known amongst Angular developers. It is an incredibly useful tool though and should be on the radar for candidates that understand the importance of code quality.

Conclusion

I have yet to find a candidate that can answer all of these questions but I wouldn't say it's a hard set requirement either. My recommendation would be to use them more as a gauge to help determine what experience they do have with Angular. If a developer can speak to two or three of the questions with real work experience examples then they have potential. If they can answer all five, then you've hit the jackpot - please send them my way.