From Good to Great: Optimizing Angular Performance

Поділитися
Вставка
  • Опубліковано 11 січ 2025

КОМЕНТАРІ • 38

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  6 місяців тому +3

    WATCH NEXT: Angular Unit Testing Course - All That You Need to Know About Testing - ua-cam.com/video/bv9z_UfSqgM/v-deo.htmlsi=WVzOWtdQUZWEbqsz

  • @louangemusic
    @louangemusic 5 місяців тому +1

    Really helpful. I was struggling with the a complex for loop and performance issue, this one helped me fix that by understanding what I am doing wrong.

  • @Manoeuver
    @Manoeuver 6 місяців тому +1

    great video and tips, thank you! quick question about the example you said at the end for an object with like 20 properties, how would you tackle that? Pass each property as an input so it doesn't trigger many re-renders?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  6 місяців тому +1

      In real project I won't optimize until I have performance problems. Not each project will have a bottle neck. Passing 20 props is not fun, I would split it in several comps and try to have 5 or less.
      Additionally it doesn't make sense to optimize rerendering of a single component on the page. You would focus on optimizing comps which are rendered and re-rendering 1000 times on the page.

    • @Manoeuver
      @Manoeuver 6 місяців тому

      @@MonsterlessonsAcademy thanks for the reply, great insights!

  • @izacaqsha3480
    @izacaqsha3480 6 місяців тому +2

    How about the new "for" In angular v18, do we need to optimize it too in some kind of way like trackby?

    • @Brendan2Alexander
      @Brendan2Alexander 6 місяців тому +3

      Trackby is required in v18

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  6 місяців тому +1

      You mean @for control flow in html? It is there starting from Angular 17 and all same rules are applied there as well as trackby.

    • @izacaqsha3480
      @izacaqsha3480 6 місяців тому

      @@MonsterlessonsAcademy yes sir, I see, thanks

  • @Edgars82
    @Edgars82 6 місяців тому

    using new @for syntax flow Angular enforces to use trackBy as it is required and if someone starts learning Angular it should do it with latest version so this should not be an issue.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  6 місяців тому

      It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

  • @ChessPuzzlesVideo
    @ChessPuzzlesVideo 6 місяців тому +3

    Well explained. But in real-time application, we pass object to child component because we need to access multiple properties of that object.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  6 місяців тому +1

      Sure. Which works just fine until you get to the point where performance is really important and you want to avoid renders.

    • @Marshall86MT
      @Marshall86MT 6 місяців тому +2

      Which strategy would you use in this case? ​@@MonsterlessonsAcademy

    • @justincantley9705
      @justincantley9705 6 місяців тому

      You could create an input on the child for each property of the parent object that you need in some cases. This doesn't scale well, but could work for smaller objects.

  • @3boodon
    @3boodon 4 місяці тому

    Great video as always, Thank you !
    can you please tell me what theme are you using ? I really love the colors.

  • @yufgyug3735
    @yufgyug3735 6 місяців тому +1

    important tips, however worth noting that angular 17 (i think) introduced new template syntax with required track by, which makes this obsolete

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  6 місяців тому

      It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

  • @enverusta7811
    @enverusta7811 6 місяців тому

    Thank you so much, it was really helpful

  • @IvanBanifatsyeu
    @IvanBanifatsyeu 10 днів тому

    Thanks for the video. Where can I find the source code of this episode?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  9 днів тому +1

      The source code is always in the description

    • @IvanBanifatsyeu
      @IvanBanifatsyeu 9 днів тому

      @@MonsterlessonsAcademy Yes, I saw it. maybe I'm a bit dumb, but I couldn't find a corresponding branch to this episode in the repository.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  9 днів тому

      @@IvanBanifatsyeu It opens already the correct branch for this video

    • @IvanBanifatsyeu
      @IvanBanifatsyeu 9 днів тому

      @@MonsterlessonsAcademy Well, obviously I'm dumb. 💯 thank you! I'm glad I found your channel. very high-quality content, cool presentation, clear English and there is always prompt feedback. 🔥

  • @07bakabaka
    @07bakabaka 6 місяців тому

    Amazing, good job.

  • @adriantworek1057
    @adriantworek1057 6 місяців тому

    Great stuff as always! Any chance you will drop Analog.js crash course in the future?

  • @Doktornikita
    @Doktornikita 6 місяців тому

    THX BRO!

  • @oleksiipopov5143
    @oleksiipopov5143 6 місяців тому

    thank you

  • @Brendan2Alexander
    @Brendan2Alexander 6 місяців тому

    Really helpful thank u! Please don’t start a channel about making ice cream, because I will become so fat!😂