Angular Performance Optimization using Pure Pipes (2020, Advanced)

Sdílet
Vložit

Komentáře • 103

  • @DecodedFrontend
    @DecodedFrontend  Před 3 lety +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!🙏🏻

  • @filipslezak5152
    @filipslezak5152 Před 3 lety +45

    I would love to hear more about advanced performance optimizations.

  • @adityanarayangantayat7133

    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 ❤️

  • @expertreviews1112
    @expertreviews1112 Před 2 lety +1

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

  • @AmanPurohit
    @AmanPurohit Před 3 lety +6

    Great demo. Really appreciate the clarity of thought while explaining

  • @sreysambath2146
    @sreysambath2146 Před 2 lety +1

    Love your flow of explanation. Thank

  • @hkheyreddine
    @hkheyreddine Před 3 lety +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  Před 3 lety +1

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

  • @aminerhouma
    @aminerhouma Před 2 lety

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

  • @MikeLike87
    @MikeLike87 Před 3 lety +4

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

  • @DuzyKucyk22
    @DuzyKucyk22 Před 2 lety

    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.

  • @shravanvishwakarma3019

    great video you just opened my mind of pipes power

  • @KumaravelSekar
    @KumaravelSekar Před 4 měsíci

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

  • @JagdeepSing49
    @JagdeepSing49 Před 3 lety +1

    Thanks for sharing knowledge

  • @sreerekhatk5872
    @sreerekhatk5872 Před 2 lety +1

    That was simply awesome ❤

  • @fatiharkan5163
    @fatiharkan5163 Před 3 lety +4

    Awesome subject, awesome explanation. Thanks a lot.

  • @carlosabud
    @carlosabud Před 3 lety +1

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

  • @AfifAlfiano
    @AfifAlfiano Před rokem

    Awesome explanations, Thank you

  • @andrewarosario
    @andrewarosario Před 3 lety +1

    Great explanation, man. Thanks a lot!

  • @Valdemar268
    @Valdemar268 Před 3 lety +2

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

  • @Marko-xt9re
    @Marko-xt9re Před 2 lety +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  Před 2 lety

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

  • @joeyvico
    @joeyvico Před rokem

    Excellent explanation. Thank you so much!

  • @marudhuraj6709
    @marudhuraj6709 Před 2 lety

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

  • @anupbista8427
    @anupbista8427 Před 3 lety +4

    i am always waiting for your videos.

  •  Před 2 lety

    Very useful information, thank you very much!

  • @_cipriangg_
    @_cipriangg_ Před 2 lety

    Such a nice explanation :D

  • @denisbielishev
    @denisbielishev Před 3 lety +3

    It's useful information. Thanks

  • @maximermoshin393
    @maximermoshin393 Před 3 lety +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.

  • @salarystealer
    @salarystealer Před 2 lety

    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

  • @bonnes04
    @bonnes04 Před 2 lety +1

    Great work

  • @jofla
    @jofla Před 3 lety +1

    very good tip, thanks

  • @naveenpisher6928
    @naveenpisher6928 Před 3 lety +2

    Good to know. Thank you

  • @AmarSingh-uw1db
    @AmarSingh-uw1db Před 9 měsíci

    Gratitude for wisdom ❤❤❤

  • @hanzofuma
    @hanzofuma Před 3 lety +2

    Very very helpful thx man

  • @rs4267
    @rs4267 Před 8 měsíci +1

    Great video thank you very much ❤

  • @rahulshaw264
    @rahulshaw264 Před rokem

    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.

  • @JBuchmann
    @JBuchmann Před rokem

    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!

  • @VipinRawat_Offcial
    @VipinRawat_Offcial Před 3 lety +1

    Very good explanation...👌👌👌👌👌

  • @zhdanvadim9536
    @zhdanvadim9536 Před 3 lety +1

    Thanks!

  • @rahulganga3274
    @rahulganga3274 Před rokem

    Great bro

  • @miyasmohammed4342
    @miyasmohammed4342 Před 2 lety +1

    Very helpful videos.

  • @jacksonoppenheim956
    @jacksonoppenheim956 Před 3 lety +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  Před 3 lety +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 :)

  • @YESiryi
    @YESiryi Před rokem

    Awesome!

  • @HemantKumar-yk2jk
    @HemantKumar-yk2jk Před 2 lety +1

    thanks nice video

  • @azeemrahman8165
    @azeemrahman8165 Před 3 lety +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  Před 3 lety

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

  • @nagendradevara1
    @nagendradevara1 Před 3 lety

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

  • @devvashisht6289
    @devvashisht6289 Před 2 lety

    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

  • @denns0r
    @denns0r Před 3 lety

    wow this was so helpful 👍!!! subbed 🔔

  • @hellicobacterpillory6677

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

  • @pawansahu8605
    @pawansahu8605 Před 3 lety +1

    very nice 👍

  • @fernandomiras08
    @fernandomiras08 Před 3 lety

    NIce bro.

  • @innocentmazando3808
    @innocentmazando3808 Před 2 lety +1

    nice tutorial man

    • @DecodedFrontend
      @DecodedFrontend  Před 2 lety

      Thanks 😊

    • @innocentmazando3808
      @innocentmazando3808 Před 2 lety +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  Před 2 lety +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!😉

  • @amnzera
    @amnzera Před rokem

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

  • @LunaExoriens
    @LunaExoriens Před měsícem

    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?

  • @microtechie4834
    @microtechie4834 Před 3 lety +1

    very useful to avoid insane code in real time project

  • @krishnachaitanya2471
    @krishnachaitanya2471 Před 2 lety

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

  • @gleisonsubzeroKZ
    @gleisonsubzeroKZ Před 3 lety +2

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

    • @kkteo
      @kkteo Před 3 lety

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

    • @DecodedFrontend
      @DecodedFrontend  Před 3 lety +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

  • @oscarjosehernandezcastillo1498

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

  • @hkheyreddine
    @hkheyreddine Před 2 lety +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 Před rokem

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

  • @avritseiger6738
    @avritseiger6738 Před rokem

    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 Před 2 lety

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

  • @CodeCatalyst
    @CodeCatalyst Před 2 lety +1

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

    • @DecodedFrontend
      @DecodedFrontend  Před 2 lety +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

  • @luiscevallos1
    @luiscevallos1 Před 3 lety

    Pipe with Date ISO please how make it?

  • @HemantKumar-yk2jk
    @HemantKumar-yk2jk Před 2 lety

    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 ??

  • @prashanth0458
    @prashanth0458 Před 3 lety +1

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

  • @unknown6535
    @unknown6535 Před rokem +1

    OnPush

  • @vikasnigam9646
    @vikasnigam9646 Před 3 lety +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

  • @newmagicfilms
    @newmagicfilms Před 3 lety +1

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

    • @DecodedFrontend
      @DecodedFrontend  Před 3 lety

      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.

  • @utsavsharma2979
    @utsavsharma2979 Před 2 lety

    how often do you post videos on this channel?

  • @jayakumar2927
    @jayakumar2927 Před rokem

    share github

  • @denys_barkhatov
    @denys_barkhatov Před rokem

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