12 questions to Angular developer test experience (not only knowledge)

Alexander — Thu, 11 Mar 2021 09:52:21 +0000

Pay attention: all these questions don't assume accurate answers, which means the most important part to hear how the candidate did it or will do it if didn't have experience with it.

1. How to create an Angular project from scratch?

There are two suitable answers, first CLI and how to use it and second more interesting how to do it manually: root module, AppComponent, bootstrap (what usually it is in main.ts file), WebPack and etc.

2. How to pass data from one component to another (parent to child, child to parent, parent to twice nested child)?

Here is quite simply, something about @Input @Output, through the service and state management

3. How to manipulate DOM inside template from component class?

First of all, I want to hear about ViewChild/ViewChildren, but there is more than one method like Render2, inject link to "document"

4. You need to create a form with dynamic validation, two text fields "first" and "second" if you put in "first" number "second" should be validated by number, if you put in "first" string "second" should validate by a string, how will you do it?

Just explaining how to use ReactiveForms, for example:

take the links to inputs
update validation rules use the setValidators/setAsyncValidators
and call updateValueAndValidity

5. Can you tell at least three approaches to optimize the Angular app?

Something about trackBy, LazyLoading, PreloadingStrategy, ChangeDetectionStrategy

6. You need to change CSS styles according to the CSS class on the component. How you will do it?

for example:

<my-component class="red"></my-component> // text inside should be red
<my-component class="green"></my-component> // text inside should be green

:host(.red) {
  color: red;
}

:host(.green) {
  color: green;
}

7. You need to assign the browser event to the whole component but work with this event inside a component, how will you do it?

This's all about HostListener, of course, we can come up with a couple more variants, but a good way for that is HostListener.

@HostListener('click', ['$event.target'])
  onClick(e) {
   // code ...
 }

8. Can you describe the pros and cons of the OnPush strategy?

Сons: need to keep in mind 'markForCheck' function, or use streams as much as possible also changes inside objects which we get as inputs don't detect

Pros: performance

9. Can you describe two situations, you need a global scope for service and you need a local scope for service?

@Injectable({providedIn: 'root'}) // global for app

---------------------------------------------------
@Injectable()

and 
@Component({
    providers: [...here inject the service with local scope]
})

10. You need to preload some data before loading the route, how to solve this issue?

It is about Resolve

11. You need to add the token to all requests to a server, how to solve it?

It's about HttpInterceptor

12. Can you describe the cases when you need to create your own directives?

Here the candidate should explain and give some examples what for we need to create directives

to change/add behaviors of html element
patch some functionality in third part lib through the directive

Conclusion

These questions push candidates to think through the experience and allow us to get more information about their experience.

Who are you "Strong Senior Frontend Developer" (My point of view)?

Alexander — Sun, 10 Jan 2021 18:56:40 +0000

First of all, here I want to share with my point of view on job position, it can be called different ways "Senior Frontend Developer, "Strong Senior Frontend Developer", "Frontend ninja", "Frontend Jedi" and etc but this one means - a person with huge experience and knowledge in frontend development.
I'm going to share the topics list which I think this person should know, I'll also mark how deep this person needs to know this topic. It looks like "deep: 100%" and it is just my point of view on section knowledge. Sure, it does not mean that it is a constant, there are many things which will impact on it, for example: your company can produce web sites or online games and potentially you will have a different level of many sections but on average I see it this way.

Base of everything JavaScript, HTML, CSS

deep: 100%
This is foundation of everything in frontend world. So, I guess, everyone understand how important they are, without it you cannot understand many of frontend technologies.

Your favourite framework (React, Angular, Vue, Svelte and etc)

deep: 100%
Every developer has a favourite framework and every developer has to know it well, not only framework but ecosystem as well, the most popular libs, cli, the best patterns and approaches, and even time to time look into source code of it (I heard opinion from guys "if you didn't read the source code of framework you don't really know it" but, as for me, I don't follow that rule).

Your second favourite framework

deep: 70%
The frontend world is too big and to know only one framework means to build walls around yourself. If you know one more framework on a good level, this is a big plus to you. When I say "good level" I mean you can take a part in project with this framework without problem. Yes, maybe you don't know some aspects about it, that's ok.
New framework is a new vision of resolution for the issues. It's useful to know two frameworks on good level and several on idea level (when you know ideas which stay behind the frameworks, for example virtual DOM, two way data binding).

Common architecture approaches and design patterns

deep: 80%
This is another base of everything. If you know how to write a code but don't know how to design it for the best using, your knowledge is not very valuable. I understand there are many patterns and design approaches but we really need to know main of them.

Security Approaches and Security Risks

deep: 50%
Ok, guys, some frontend developers think they don't need to know anything about security because all security should be on backend side.
But no, we can do a lot of security on frontend side. And if you know top 10 of OWASP you are good and if you know how to protect from them you are the best.

Common Computer Science

deep: 50%
Computer science is a language for all developers and it is a basic of our profession. It can be seems that frontend work is not about difficult algorithms and data structures but it's totally depends where do you work and what do you code. Frontend side becomes more and more complicated, we work with games in browser, graphics, complicated data from backend also we shouldn't forget that top of IT companies demand knowledge of algorithms and data structures on interview.

Animations

deep: 80%
Hey, it is very simple, animation is our daily work part. People admire the awesome animation in their devices. Even harsh enterprise projects start to include more and more animations to their interfaces.

Accessibility

deep: 100%
Every time when you do accessibility in your website you get one point to your karma. All jokes aside the accessibility very important thing, because it's about people. Imagine the situation, you go to the shop to buy some food but you can't because you are too big and door is too small and you can't go inside, it's insulting, isn't it? Keep this feeling in your mind every time when you don't want to spend time for
accessibility.
Besides a lot of countries have a law about web sites accessibility.

UI/UX

deep: 25%
First of all you, as developer, need to speak with UI/UX specialist and you both have to understand each other, secondly you, as developer, work with design and you can see some details and advise how to make it better.

TypeScript

deep: 80%
So, TypeScript becomes popular and the case that you will get next project with typescript inside highly likely. Or you will be a person who inject it to the next project.

Conclusion

All this is exclusively my point of view according my experience and acquired knowledge. I work in a service (outsourcing and outstaffing) company and, of course, my experience connected this direction, your point of view may differ if you work in product company or some where else.

DEV Community: Alexander

12 questions to Angular developer test experience (not only knowledge)

1. How to create an Angular project from scratch?

2. How to pass data from one component to another (parent to child, child to parent, parent to twice nested child)?

3. How to manipulate DOM inside template from component class?

4. You need to create a form with dynamic validation, two text fields "first" and "second" if you put in "first" number "second" should be validated by number, if you put in "first" string "second" should validate by a string, how will you do it?

5. Can you tell at least three approaches to optimize the Angular app?

6. You need to change CSS styles according to the CSS class on the component. How you will do it?

7. You need to assign the browser event to the whole component but work with this event inside a component, how will you do it?

8. Can you describe the pros and cons of the OnPush strategy?

9. Can you describe two situations, you need a global scope for service and you need a local scope for service?

10. You need to preload some data before loading the route, how to solve this issue?

11. You need to add the token to all requests to a server, how to solve it?

12. Can you describe the cases when you need to create your own directives?

Conclusion

Who are you "Strong Senior Frontend Developer" (My point of view)?

Base of everything JavaScript, HTML, CSS

Your favourite framework (React, Angular, Vue, Svelte and etc)

Your second favourite framework

Common architecture approaches and design patterns

Security Approaches and Security Risks

Common Computer Science

Animations

Accessibility

UI/UX

TypeScript

Conclusion