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

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.พ. 2025

ความคิดเห็น • 62

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  5 หลายเดือนก่อน

    WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - th-cam.com/video/5A_YKlVWMPo/w-d-xo.htmlsi=2DCn7yspEAAJ2H6l

  • @oqynx
    @oqynx 11 หลายเดือนก่อน +8

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

  • @luischavez190
    @luischavez190 11 หลายเดือนก่อน +2

    This is pure gold!! Thanks

  • @changcnchang8174
    @changcnchang8174 11 หลายเดือนก่อน +2

    This is very helpful thank you for sharing!

  • @x0z59
    @x0z59 11 หลายเดือนก่อน

    You are my most favorite Angular teacher.

  • @harisali104
    @harisali104 7 หลายเดือนก่อน

    Signals are so awesome. Thanks for the this informative video, will definitely be using signals more often now.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  7 หลายเดือนก่อน

      Glad it was helpful!

    • @harisali104
      @harisali104 7 หลายเดือนก่อน

      @@MonsterlessonsAcademy Just one thing I wanted to ask. In the video you converted the @Input() to signal. Is it also possible to have the issues property be a signal, eliminating the need for converting from @Input to signal?

  • @LuizFMPaiva
    @LuizFMPaiva 11 หลายเดือนก่อน +3

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

  • @izacaqsha3480
    @izacaqsha3480 11 หลายเดือนก่อน

    Awesome as always

  • @NiGhTm4r389
    @NiGhTm4r389 11 หลายเดือนก่อน +2

    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
      @NathanRLaing 11 หลายเดือนก่อน

      Was also wondering this

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  11 หลายเดือนก่อน +1

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

    • @NiGhTm4r389
      @NiGhTm4r389 11 หลายเดือนก่อน +1

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

  • @robsonxavier5366
    @robsonxavier5366 11 หลายเดือนก่อน +1

    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
      @MonsterlessonsAcademy  11 หลายเดือนก่อน +1

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

  • @MrKOHKyPEHT
    @MrKOHKyPEHT 11 หลายเดือนก่อน

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

  • @ayushmankd
    @ayushmankd 11 หลายเดือนก่อน

    Great one!

  • @kuhaniresti
    @kuhaniresti 3 หลายเดือนก่อน

    good video, meanwhile, in fragment.js this attribute becomes type safe and reactive, no getter, no setter, track its own dependencies, and update them with using events or signals. hackers can modify the attribute value in the dom but have no effect because the expressions that uses the variable are compiled by default before the fragment is even available in the dom. No virtual DOM, No build Steps, just HTML as programming language
    f:int-count="0"
    to debug just use and watch it change.

  • @olehandershevchuk3491
    @olehandershevchuk3491 11 หลายเดือนก่อน

    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
      @MonsterlessonsAcademy  11 หลายเดือนก่อน

      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.

  • @ngathanh8438
    @ngathanh8438 11 หลายเดือนก่อน

    Amazing, thanks

  • @ngathanh8438
    @ngathanh8438 11 หลายเดือนก่อน

    this video is so helpful

  • @sergeypodgaysky8551
    @sergeypodgaysky8551 9 หลายเดือนก่อน +1

    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
      @MonsterlessonsAcademy  9 หลายเดือนก่อน

      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 ?

  • @Infa35
    @Infa35 5 หลายเดือนก่อน

    What I would also do is place open and resolved statuses to enum

  • @D9ID9I
    @D9ID9I 9 หลายเดือนก่อน +1

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

  • @ARShindouAR
    @ARShindouAR 11 หลายเดือนก่อน

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

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  11 หลายเดือนก่อน

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

    • @ARShindouAR
      @ARShindouAR 11 หลายเดือนก่อน

      @@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
      @MonsterlessonsAcademy  11 หลายเดือนก่อน

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

  • @VinitNeogi
    @VinitNeogi 11 หลายเดือนก่อน

    Signals make everything so easy :D

  • @adarshsingh3012
    @adarshsingh3012 11 หลายเดือนก่อน

    Thanks

  • @alaskaricode989
    @alaskaricode989 11 หลายเดือนก่อน

    Can you Videos zu best structure folder files for big project

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  11 หลายเดือนก่อน

      I covered the folder structure for React. It is the same for any framework
      th-cam.com/video/IFTqfO_evlc/w-d-xo.htmlsi=1-QaWl1AdMq1fjts

  • @ukasza.7836
    @ukasza.7836 11 หลายเดือนก่อน +1

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

  • @carlosrenancps
    @carlosrenancps 2 หลายเดือนก่อน

    what software is he using to code?

  • @Han124
    @Han124 หลายเดือนก่อน

    This was neither junior code before nor senior code after.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  หลายเดือนก่อน

      So what was that?

    • @Han124
      @Han124 หลายเดือนก่อน

      @MonsterlessonsAcademy
      Before: a late intern / early junior who has never seen Angular before .
      After: mid

  • @lucasgiunta8874
    @lucasgiunta8874 11 หลายเดือนก่อน

    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
      @MonsterlessonsAcademy  11 หลายเดือนก่อน

      What do you mean?

    • @lucasgiunta8874
      @lucasgiunta8874 11 หลายเดือนก่อน +1

      @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.

  • @martapfahl940
    @martapfahl940 11 หลายเดือนก่อน +1

    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.

  • @Dajuhf
    @Dajuhf 11 หลายเดือนก่อน +1

    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
      @MonsterlessonsAcademy  11 หลายเดือนก่อน +2

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