Angular Code Review Best Practices - Refactoring From Junior Level to Senior

Рет қаралды 7,724

Күн бұрын

Let's do an Angular code review together and refactor it to a senior level. I prepared real junior code that is not written in a best way and we need to improve it.
TIMESTAMPS
0:00 Introduction
0:12 What we have
3:19 Refactoring state
10:02 Refactoring list
14:13 Refactoring state change
18:58 Refactoring totals
20:43 Refactoring toggle all
24:03 Refactoring indeterminate
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Javascript interview questions - monsterlessons-academy.com/co...
► Typescript interview questions - monsterlessons-academy.com/co...
► React interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

Пікірлер: 51

@LunarWaffle 3 ай бұрын

Absolutely amazing man , been following since 2021 , still the same humble teacher!

@MonsterlessonsAcademy 3 ай бұрын

Glad to hear that!

@luischavez190 3 ай бұрын

This is pure gold!! Thanks

@MonsterlessonsAcademy 3 ай бұрын

Thank you!

@izacaqsha3480 3 ай бұрын

Awesome as always

@MonsterlessonsAcademy 3 ай бұрын

Thank you so much 😀

@changcnchang8174 3 ай бұрын

This is very helpful thank you for sharing!

@MonsterlessonsAcademy 3 ай бұрын

Glad it was helpful!

@x0z59 3 ай бұрын

You are my most favorite Angular teacher.

@MonsterlessonsAcademy 3 ай бұрын

Wow, thanks!

@ayushmankishoredash8585 3 ай бұрын

Great one!

@MonsterlessonsAcademy 3 ай бұрын

Thanks!

@LuizFMPaiva 3 ай бұрын

amazing! U r awesome! I always learn with u. Thank you

@MonsterlessonsAcademy 3 ай бұрын

My pleasure 😊

@ngathanh8438 3 ай бұрын

Amazing, thanks

@MonsterlessonsAcademy 3 ай бұрын

Thank you too!

@ngathanh8438 3 ай бұрын

this video is so helpful

@MonsterlessonsAcademy 3 ай бұрын

Glad you like it!

@robsonxavier5366 3 ай бұрын

Hello, When you create a ngclass to control if is selected or not (minute 12), would be better to use ngclass (something like 'issue.id.isSelected: selected') and create a css class to change color? Great video as always, keep the good work. Thanks

@MonsterlessonsAcademy 3 ай бұрын

It's more a matter of taste. This is just 1 line of code. If we had more styles than sure.

@sergeypodgaysky8551 Ай бұрын

Why do you add an 'interface' postfix in interface? You don't add a 'number' postfix when creating a variable with type number for example, so what's the reason to do this with interfaces and types?

@MonsterlessonsAcademy Ай бұрын

It is easier to separate a class from the interface or type in a big project. What's the reason to name a component in Angular FooComponent ?

@MrKOHKyPEHT 3 ай бұрын

If our version of angular less than 16 we can initialize input array like empty array in order to avoid non-null assertion

@MonsterlessonsAcademy 3 ай бұрын

Yeah, or think about project upgrading -_-

@VinitNeogi 3 ай бұрын

Signals make everything so easy :D

@MonsterlessonsAcademy 3 ай бұрын

Yeap

@adarshsingh3012 3 ай бұрын

Thanks

@MonsterlessonsAcademy 3 ай бұрын

You are welcome!

@olehandershevchuk3491 3 ай бұрын

Why you do not create an IssueClass that implements the IssueInterface and extends it with a "selected" property? Then, in the view, simply change item.selected to true without requiring an additional array for selected elements. To obtain the count of selected elements, you can filter the array of IssueClass elements by the selected field and count the results.

@MonsterlessonsAcademy 3 ай бұрын

I don't like to mix view logic and entity. As we don't get isSelected through input we must say that we got IssueInterface and not extended version. Then anyway you need to transform your data type to data type with isSelected.

@NiGhTm4r389 3 ай бұрын

You can compute signals from inputs if you provide them as input signals. This is quite the new feature though, is that the reason you're not covering it here?

@NathanRLaing 3 ай бұрын

Was also wondering this

@MonsterlessonsAcademy 3 ай бұрын

I didn't use them in the video as they are in developer preview. Sure you can do that.

@NiGhTm4r389 3 ай бұрын

@@MonsterlessonsAcademy Ah I see. We already use them heavily in our project and they work flawlessly :)

@ARShindouAR 3 ай бұрын

Do you have plans for creating a series of Angular CDK tutorial?

@MonsterlessonsAcademy 3 ай бұрын

Not really but I will add it to the list of ideas. You mean Angular Material CDK?

@ARShindouAR 3 ай бұрын

@@MonsterlessonsAcademy Exactly. Since I have watched your videos about implementing components without libs. So maybe you can create sth about using CDK to create compoents?

@MonsterlessonsAcademy 3 ай бұрын

@@ARShindouAR I will add it to the list of ideas

@alaskaricode989 3 ай бұрын

Can you Videos zu best structure folder files for big project

@MonsterlessonsAcademy 3 ай бұрын

I covered the folder structure for React. It is the same for any framework kzfaq.info/get/bejne/f6yEpMmAxMvanJc.htmlsi=1-QaWl1AdMq1fjts

@D9ID9I Ай бұрын

So junior code turned into "senior junior" one. Now need to call middle guy to upgrade this.

@ukasza.7836 3 ай бұрын

When I see suffix *Interface in an interface name I'm thinking that it is a beginner code

@MonsterlessonsAcademy 3 ай бұрын

Sounds like a good indicator of junior code.

@lucasgiunta8874 3 ай бұрын

Good. But you are still writing angular code with a react background. You refactor can be easly refactor in an half of code by an angular senior developer who realy knows the angular api.

@MonsterlessonsAcademy 3 ай бұрын

What do you mean?

@lucasgiunta8874 3 ай бұрын

@MonsterlessonsAcademy use a set input to set a signal to cover the ngOnChange. Try to use only computed signal as much as possible to leep one sources of data. Use the formControl api instead of your change event from your checkbox. Utilise the power of rxjs to handle your event logic and convert it to signal in your constructor if you need a signal output (to display the result in your view in a prevision of signal baswd component). Don't use ngClass if you only have one condition. [Class.myClass]="condition" is a nicer way to handle it. Don't use *ngFor/*ngIf which is the "old" syntaxes. If you are in 17.* you should have access to the new template syntaxes.

@Shadow-pn5qw 3 ай бұрын

Random comment

@martapfahl940 3 ай бұрын

When I hear this is Junior level Code I feel offended being considered Junior after now 7 months into the job. I agree that this code is really super bad.

@MonsterlessonsAcademy 3 ай бұрын

Yeap

@Dajuhf 3 ай бұрын

At GoodTableComponent, won't be better to set the issueSig with a @Input() set instead of doing it inside the OnInit? @Input({ required: true }) set issues(issues: IssueInterface[]) { this.issuesSig.set(issues); }

@MonsterlessonsAcademy 3 ай бұрын

Yeap or we could use input signal. I always forget about new Angular features while coding.