No video

Angular Performance Optimization using Pure Pipes (2020, Advanced)

  Рет қаралды 30,575

Decoded Frontend

Decoded Frontend

Күн бұрын

Пікірлер: 103
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
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 3 жыл бұрын
I would love to hear more about advanced performance optimizations.
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thank you 🙏🏻 there will be in the future 😉
@bidfca5980
@bidfca5980 2 жыл бұрын
up
@hkheyreddine
@hkheyreddine 3 жыл бұрын
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 жыл бұрын
Thank you very much for such a great feedback! I appreciate it and glad the you like it 🙂
@adityanarayangantayat7133
@adityanarayangantayat7133 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 ❤️
@anupbista8427
@anupbista8427 3 жыл бұрын
i am always waiting for your videos.
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Glad you like it :)
@AmanPurohit
@AmanPurohit 3 жыл бұрын
Great demo. Really appreciate the clarity of thought while explaining
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thank you very much! Glad you liked it 😉
@MikeLike87
@MikeLike87 3 жыл бұрын
Thanks for your video, always something useful for me and something new
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
You are welcome!😉
@denisbielishev
@denisbielishev 3 жыл бұрын
It's useful information. Thanks
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thank you 🙏🏻
@Marko-xt9re
@Marko-xt9re 2 жыл бұрын
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 2 жыл бұрын
Really happy to hear that!!! Thanks for your feedback!
@shravanvishwakarma3019
@shravanvishwakarma3019 Жыл бұрын
great video you just opened my mind of pipes power
@fatiharkan5163
@fatiharkan5163 3 жыл бұрын
Awesome subject, awesome explanation. Thanks a lot.
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thanks for feedback ☺️
@KumaravelSekar
@KumaravelSekar 5 ай бұрын
Great demo.. Please keep doing it. its helps me a lot :)
@JagdeepSing49
@JagdeepSing49 3 жыл бұрын
Thanks for sharing knowledge
@aminerhouma
@aminerhouma 3 жыл бұрын
I never think before to solve this kind of issue using pipes. Thanks for sharing your ideas.
@jacksonoppenheim956
@jacksonoppenheim956 3 жыл бұрын
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 жыл бұрын
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 :)
@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.
@AmarSingh-uw1db
@AmarSingh-uw1db 10 ай бұрын
Gratitude for wisdom ❤❤❤
@naveenpisher6928
@naveenpisher6928 3 жыл бұрын
Good to know. Thank you
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
You are welcome 😊
@AfifAlfiano
@AfifAlfiano Жыл бұрын
Awesome explanations, Thank you
@expertreviews1112
@expertreviews1112 2 жыл бұрын
I did enjoy your bucket loads of informative video!!! Much appreciated
@rs4267
@rs4267 9 ай бұрын
Great video thank you very much ❤
@DecodedFrontend
@DecodedFrontend 9 ай бұрын
Thank you for the comment!
@maximermoshin393
@maximermoshin393 3 жыл бұрын
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!
@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
@bonnes04
@bonnes04 2 жыл бұрын
Great work
@sreysambath2146
@sreysambath2146 2 жыл бұрын
Love your flow of explanation. Thank
@marudhuraj6709
@marudhuraj6709 2 жыл бұрын
The way you explained is very Professional, i like it.
@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
@hanzofuma
@hanzofuma 3 жыл бұрын
Very very helpful thx man
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
You are welcome!
@JBuchmann
@JBuchmann Жыл бұрын
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!
@rahulshaw264
@rahulshaw264 Жыл бұрын
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.
@_cipriangg_
@_cipriangg_ 2 жыл бұрын
Such a nice explanation :D
@Valdemar268
@Valdemar268 3 жыл бұрын
Thank you for a video, clear and useful as usual!
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thank you! Glad to hear that 🙏🏻
@zhdanvadim9536
@zhdanvadim9536 3 жыл бұрын
Thanks!
@miyasmohammed4342
@miyasmohammed4342 2 жыл бұрын
Very helpful videos.
@DecodedFrontend
@DecodedFrontend 2 жыл бұрын
Glad it was so😊
@carlosabud
@carlosabud 3 жыл бұрын
Great video. Thanks for taking the time and explain these topics.
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Glad you enjoyed it!
@sreerekhatk5872
@sreerekhatk5872 2 жыл бұрын
That was simply awesome ❤
@azeemrahman8165
@azeemrahman8165 3 жыл бұрын
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.
@HemantKumar-yk2jk
@HemantKumar-yk2jk 2 жыл бұрын
thanks nice video
@andrewarosario
@andrewarosario 3 жыл бұрын
Great explanation, man. Thanks a lot!
@joeyvico
@joeyvico Жыл бұрын
Excellent explanation. Thank you so much!
3 жыл бұрын
Very useful information, thank you very much!
@VipinRawat_Offcial
@VipinRawat_Offcial 3 жыл бұрын
Very good explanation...👌👌👌👌👌
@jofla
@jofla 3 жыл бұрын
very good tip, thanks
@nagendradevara1
@nagendradevara1 3 жыл бұрын
Waiting for your video on what's new in Angular 12.
@innocentmazando3808
@innocentmazando3808 2 жыл бұрын
nice tutorial man
@DecodedFrontend
@DecodedFrontend 2 жыл бұрын
Thanks 😊
@innocentmazando3808
@innocentmazando3808 2 жыл бұрын
@@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 жыл бұрын
@@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!😉
@gleisonsubzeroKZ
@gleisonsubzeroKZ 3 жыл бұрын
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 жыл бұрын
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
@YESiryi
@YESiryi Жыл бұрын
Awesome!
@rahulganga3274
@rahulganga3274 Жыл бұрын
Great bro
@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 ;)
@newmagicfilms
@newmagicfilms 3 жыл бұрын
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.
@microtechie4834
@microtechie4834 3 жыл бұрын
very useful to avoid insane code in real time project
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Yes, definitely
@hkheyreddine
@hkheyreddine 2 жыл бұрын
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.
@LunaExoriens
@LunaExoriens 2 ай бұрын
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?
@prashanth0458
@prashanth0458 3 жыл бұрын
I applied this logic today to my project, it works but i am getting 2nd index value from the pipe. .thanks anyways.
@unknown6535
@unknown6535 Жыл бұрын
OnPush
@CodeCatalyst
@CodeCatalyst 2 жыл бұрын
Awesome explanation, but I have to ask should I consider always call my services throughout pipes?
@DecodedFrontend
@DecodedFrontend 2 жыл бұрын
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
@denns0r
@denns0r 3 жыл бұрын
wow this was so helpful 👍!!! subbed 🔔
@vikasnigam9646
@vikasnigam9646 3 жыл бұрын
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
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Sorry I am not a Java dev :)
@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 ??
@amnzera
@amnzera Жыл бұрын
hello @Decoded Frontend , I have a problem with "graphql-tag" the angular build does not minify the code, have you experienced this?
@f1enjoyer440
@f1enjoyer440 2 жыл бұрын
What if theories in service change? How to handle that?
@krishnachaitanya2471
@krishnachaitanya2471 2 жыл бұрын
what do we do, if we want to display both title and userId?
@fernandomiras08
@fernandomiras08 3 жыл бұрын
NIce bro.
@pawansahu8605
@pawansahu8605 3 жыл бұрын
very nice 👍
@DecodedFrontend
@DecodedFrontend 3 жыл бұрын
Thanks! You’re welcome:)
@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)
@oscarjosehernandezcastillo1498
@oscarjosehernandezcastillo1498 3 жыл бұрын
Can you tell me the extension name, that you use?
@luiscevallos1
@luiscevallos1 3 жыл бұрын
Pipe with Date ISO please how make it?
@utsavsharma2979
@utsavsharma2979 2 жыл бұрын
how often do you post videos on this channel?
@DecodedFrontend
@DecodedFrontend 2 жыл бұрын
Hi! Every second week on Tuesday:)
@jayakumar2927
@jayakumar2927 Жыл бұрын
share github
@denys_barkhatov
@denys_barkhatov Жыл бұрын
No... Please, no... args: unknown[], and 'any'... Please, don't do it on your video.
SOLID Design Principles in #Angular (Advanced, 2021)
41:49
Decoded Frontend
Рет қаралды 144 М.
Change Detection in Angular - You Project Is 20x Slower!
15:16
Monsterlessons Academy
Рет қаралды 70 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
Zombie Boy Saved My Life 💚
00:29
Alan Chikin Chow
Рет қаралды 28 МЛН
女孩妒忌小丑女? #小丑#shorts
00:34
好人小丑
Рет қаралды 86 МЛН
The Joker kisses Harley Quinn underwater!#Harley Quinn #joker
00:49
Harley Quinn with the Joker
Рет қаралды 19 МЛН
APP_INITIALIZER Token in Angular (Advanced, 2022)
23:56
Decoded Frontend
Рет қаралды 21 М.
Deferrable Views - New Feature in Angular 17
15:31
Decoded Frontend
Рет қаралды 20 М.
RxJs switchMap vs mergeMap - Intro to Flattening Operators (2021)
25:44
Decoded Frontend
Рет қаралды 28 М.
Angular Json File - My Top 8 Settings (2022)
29:30
Decoded Frontend
Рет қаралды 26 М.
Control Value Accessor in Angular [Advanced, 2020]
18:46
Decoded Frontend
Рет қаралды 57 М.
NgTemplateOutlet in Angular - Everything You Have to Know (2022)
35:15
Decoded Frontend
Рет қаралды 49 М.
Generics: The most intimidating TypeScript feature
18:19
Matt Pocock
Рет қаралды 172 М.
DHH discusses SQLite (and Stoicism)
54:00
Aaron Francis
Рет қаралды 60 М.
Angular Dependency Injection in Depth - Resolution modifiers (2021)
14:39
Кадр сыртындағы қызықтар | Келінжан
00:16