Angular Performance Optimization using Pure Pipes (2020, Advanced)

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии • 104

  • @DecodedFrontend
    @DecodedFrontend  3 года назад +16

    Thank you all for watching my videos and your comments! If you find my tutorials useful and would like to see more videos from me - please help to share this and other videos with your colleagues!🙏🏻

  • @coldcircuit99
    @coldcircuit99 3 года назад +44

    I would love to hear more about advanced performance optimizations.

  • @hkheyreddine
    @hkheyreddine 3 года назад +7

    Stumbling upon your channel was the best thing to happen to me this week. Please, keep up the good work/content, it is quite rare to find advanced Angular explained as well as you do it. Thank you.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Thank you very much for such a great feedback! I appreciate it and glad the you like it 🙂

  • @adityanarayangantayat7133
    @adityanarayangantayat7133 2 года назад +2

    I regret not having found your channel a year ago when I was new to Angular!
    But better late than never! Your content is a blessing to those looking to upskill their Angular knowledge! Thank you ❤️

  • @AmanPurohit
    @AmanPurohit 3 года назад +6

    Great demo. Really appreciate the clarity of thought while explaining

  • @MikeLike87
    @MikeLike87 3 года назад +4

    Thanks for your video, always something useful for me and something new

  • @anupbista8427
    @anupbista8427 3 года назад +4

    i am always waiting for your videos.

  • @Marko-xt9re
    @Marko-xt9re 3 года назад +3

    Amazing! This kind of videos we all need! Real life use cases and practical advices that we can implement in our work! After watching every of your videos I really have feeling that I am becoming better developer! Just keep going like this! Thank you so much!

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Really happy to hear that!!! Thanks for your feedback!

  • @DuzyKucyk22
    @DuzyKucyk22 2 года назад

    omg, This has been as much entertaining to watch to me as watching... let's say MotoGP. I'm glad I've found your channel and that there is so much more content.
    Instant sub and a message to my colleagues.

  • @aminerhouma
    @aminerhouma 3 года назад

    I never think before to solve this kind of issue using pipes. Thanks for sharing your ideas.

  • @jacksonoppenheim956
    @jacksonoppenheim956 3 года назад +6

    Found this channel about a week ago, love the content here! I’ve already applied so much of what I’ve learned from your channel to my work!
    I have a question about your material theming course: I’m in the process of writing a front end library, that is based on angular material. Does your course talk about how the theming works with a custom angular library, or just how to theme angular material within an application?

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Hi Jackson! I'm glad you found some useful tips on my Channel ;)
      Regarding your question: Unfortunately this Workshop touches only application theming... However, there are a lot of common in theming of apps and libs and ultimately you will be using the same functions/mixins/variables provided by Angular Material library.
      P.s anyway do not forget that you can refund your money without any problem within 14 days after purchase if the course doesn't meat your expectations :)

  • @denisbielishev
    @denisbielishev 3 года назад +3

    It's useful information. Thanks

  • @fatiharkan5163
    @fatiharkan5163 3 года назад +4

    Awesome subject, awesome explanation. Thanks a lot.

  • @sreysambath2146
    @sreysambath2146 3 года назад +1

    Love your flow of explanation. Thank

  • @expertreviews1112
    @expertreviews1112 3 года назад +1

    I did enjoy your bucket loads of informative video!!! Much appreciated

  • @maximermoshin393
    @maximermoshin393 3 года назад +1

    Thank you for sharing your knowledge. I think that it's important to know such small but crucial details about the framework we use.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Glad it was helpful and thanks for your feedback!

  • @JBuchmann
    @JBuchmann 2 года назад

    Oh wow, I thought of this solution the other day but wasn't sure if it was a good practice
    But your video confirmed to me that it's a good idea. 👍
    The result seems to be what you get out of the box with VueJS "computed properties", which is far simpler to do. I hope in the future Angular can make it just as simple.
    I read some blog the other day about a completely different approach... I forget the details but it has to do with the component having a BehaviorSubject which is converted to an observable that pipes on various operators. The result is bound to the template with the async pipe. I haven't tried this yet but it sounds like more work than making a custom pipe!

  • @marudhuraj6709
    @marudhuraj6709 2 года назад

    The way you explained is very Professional, i like it.

  • @shravanvishwakarma3019
    @shravanvishwakarma3019 Год назад

    great video you just opened my mind of pipes power

  • @salarystealer
    @salarystealer 3 года назад

    thanks for the video, i heard the voice a lot in the podcast and found it's the same guy, hope for more in depth video like this, thanks

  • @devvashisht6289
    @devvashisht6289 2 года назад

    This is wonderful learning actually I used to think that pure Pipe and impure Pipe and benefit of pure pipe is like that it doesn't change the value whatever value you input you will always get the same output and but today I came to know the benefit of pipe is that if it is a pure pipe that means angular change detection will not execute the pipe if input value is not change and if it is a impure pipe then it will be executed every time the angular change detection mechanism run on over the component so we should always prefer pure 5 and it will boost the performance of our application

  • @carlosabud
    @carlosabud 3 года назад +1

    Great video. Thanks for taking the time and explain these topics.

  • @JagdeepSing49
    @JagdeepSing49 3 года назад +1

    Thanks for sharing knowledge

  • @Valdemar268
    @Valdemar268 3 года назад +2

    Thank you for a video, clear and useful as usual!

  • @sreerekhatk5872
    @sreerekhatk5872 2 года назад +1

    That was simply awesome ❤

  • @suni_unsuni
    @suni_unsuni Год назад

    This is very good tutorial. This scenario i was thinking how to solve. Most often i use npm library ngGenericPipe. But this looks more better way and here we have more control. Thanks for this short tutorials.

  • @naveenpisher6928
    @naveenpisher6928 3 года назад +2

    Good to know. Thank you

  • @azeemrahman8165
    @azeemrahman8165 3 года назад +1

    Excellent, one of the best channel for angular, can you make videos on optimization topics related to dynamic content and running code outside ngzone angular to avoid Change detection

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Thank you for a feedback! Yes, those topics are on the road map.

  • @KumaravelSekar
    @KumaravelSekar 8 месяцев назад

    Great demo.. Please keep doing it. its helps me a lot :)

  • @AmarSingh-uw1db
    @AmarSingh-uw1db Год назад

    Gratitude for wisdom ❤❤❤

  • @andrewarosario
    @andrewarosario 3 года назад +1

    Great explanation, man. Thanks a lot!

  • @AfifAlfiano
    @AfifAlfiano Год назад

    Awesome explanations, Thank you

  • @joeyvico
    @joeyvico 2 года назад

    Excellent explanation. Thank you so much!

  • @CodeCatalyst
    @CodeCatalyst 2 года назад +1

    Awesome explanation, but I have to ask should I consider always call my services throughout pipes?

    • @DecodedFrontend
      @DecodedFrontend  2 года назад +1

      Not always. It might be useful if the function which you call in the template does some expensive calculations. If it just returns some easy check like somevar !== "something else" then you won't notice any real performance boost

  • @newmagicfilms
    @newmagicfilms 3 года назад +1

    Why would you want to make it observable? What will be the advantage?

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Angular uses observables a lot and sometimes data you get is an observable. As I mentioned in the video you could do a http request and in angular the result of http call will be observable.

  • @hanzofuma
    @hanzofuma 3 года назад +2

    Very very helpful thx man

  • @jofla
    @jofla 3 года назад +1

    very good tip, thanks

  • @bonnes04
    @bonnes04 2 года назад +1

    Great work

  • @_cipriangg_
    @_cipriangg_ 2 года назад

    Such a nice explanation :D

  • @rs4267
    @rs4267 Год назад +1

    Great video thank you very much ❤

  • @LunaExoriens
    @LunaExoriens 5 месяцев назад

    Should we use pipes to filter arrays? I use them that way but I've read somewehere that you should use rxjs filtering instead and that Angular pipes are not for this. What do you think?

  •  3 года назад

    Very useful information, thank you very much!

  • @VipinRawat_Offcial
    @VipinRawat_Offcial 3 года назад +1

    Very good explanation...👌👌👌👌👌

  • @nagendradevara1
    @nagendradevara1 3 года назад

    Waiting for your video on what's new in Angular 12.

  • @gleisonsubzeroKZ
    @gleisonsubzeroKZ 3 года назад +2

    awesome man, what did you do to console.log the userId using a shortcut? is it an extension?

    • @kkteo
      @kkteo 3 года назад

      It's vscode extension
      marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +2

      Hi Gleison!😊 Yes, it is an extension for VS Code, you can check it out here: marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

  • @unknown6535
    @unknown6535 2 года назад +1

    OnPush

  • @hkheyreddine
    @hkheyreddine 3 года назад +1

    Hello, sir
    I'd like to ask what key bindings have you used to generate that console log of user.id in the beginning of the video.

    • @SamipShresthajava
      @SamipShresthajava Год назад

      I am 1 year late but the extension used was Turbo Console Log for this.

  • @oscarjosehernandezcastillo1498
    @oscarjosehernandezcastillo1498 3 года назад

    Can you tell me the extension name, that you use?

  • @zhdanvadim9536
    @zhdanvadim9536 3 года назад +1

    Thanks!

  • @HemantKumar-yk2jk
    @HemantKumar-yk2jk 2 года назад

    i am still not able to understand why it runs 8 times .. what is the logic behind it .. can you explain how cd works ??
    in this context ??

  • @krishnachaitanya2471
    @krishnachaitanya2471 2 года назад

    what do we do, if we want to display both title and userId?

  • @avritseiger6738
    @avritseiger6738 2 года назад

    Can i use a pure pipe that will run whenever there is a change in one of two variables?
    for example i have an object and a list:
    let element = {label: 'someLabel'}
    let list = BehaviorSubject = new BehaviorSubject([])
    I want to create a pipe lets call it somePipe and use it like this:
    {{(element.label && list|async) | somePipe}}
    I would like the pipe to run if there is a change in element *or* when list fires, how can i do that? (Prefereblly only in template)

  • @f1enjoyer440
    @f1enjoyer440 3 года назад

    What if theories in service change? How to handle that?

  • @amnzera
    @amnzera Год назад

    hello @Decoded Frontend , I have a problem with "graphql-tag" the angular build does not minify the code, have you experienced this?

  • @HemantKumar-yk2jk
    @HemantKumar-yk2jk 2 года назад +1

    thanks nice video

  • @microtechie4834
    @microtechie4834 3 года назад +1

    very useful to avoid insane code in real time project

  • @vikasnigam9646
    @vikasnigam9646 3 года назад +1

    Thanks a lot for making this very informative video. I may also request if you can make one for Angular web-push Notification with Java server push. and how I can disable any button on the page once the notification is received by the client ( UI) ? I have a requirement that server API is called and that API process takes 10 mins .Hence upon completion the server pushes notification to UI and UI disables one button on a component page once notification received

  • @hellicobacterpillory6677
    @hellicobacterpillory6677 2 года назад

    Hi, great videos about angular, thanks a lot)
    About optimization, I think it would be great to make a video with routeReuseStrategy ;)

  • @luiscevallos1
    @luiscevallos1 3 года назад

    Pipe with Date ISO please how make it?

  • @innocentmazando3808
    @innocentmazando3808 2 года назад +1

    nice tutorial man

    • @DecodedFrontend
      @DecodedFrontend  2 года назад

      Thanks 😊

    • @innocentmazando3808
      @innocentmazando3808 2 года назад +1

      @@DecodedFrontend I promise you man, your tutorials are advance but they are the best. I will keep on following your updates, they saved my career. :)

    • @DecodedFrontend
      @DecodedFrontend  2 года назад +1

      @@innocentmazando3808 awesome to hear such a great feedback! Thank you and best of luck :) From my side I promise to deliver even more cool content!😉

  • @prashanth0458
    @prashanth0458 3 года назад +1

    I applied this logic today to my project, it works but i am getting 2nd index value from the pipe. .thanks anyways.

  • @YESiryi
    @YESiryi Год назад

    Awesome!

  • @rahulganga3274
    @rahulganga3274 Год назад

    Great bro

  • @pawansahu8605
    @pawansahu8605 3 года назад +1

    very nice 👍

  • @utsavsharma2979
    @utsavsharma2979 2 года назад

    how often do you post videos on this channel?

  • @denns0r
    @denns0r 3 года назад

    wow this was so helpful 👍!!! subbed 🔔

  • @fernandomiras08
    @fernandomiras08 3 года назад

    NIce bro.

  • @mehmetekici8476
    @mehmetekici8476 Месяц назад

    Hey I have emailed you regarding your course registration. Would you pleae have a look ?

  • @jayakumar2927
    @jayakumar2927 2 года назад

    share github

  • @denys_barkhatov
    @denys_barkhatov Год назад

    No... Please, no... args: unknown[], and 'any'... Please, don't do it on your video.

  • @miyasmohammed4342
    @miyasmohammed4342 3 года назад +1

    Very helpful videos.