First look at Signals in Angular
Vložit
- čas přidán 9. 07. 2024
- 💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
The very first prototype of Signals was recently merged into the main Angular branch and available in Developer Preview Mode since Angular version 16.next.1. In this video, I will talk a little bit about the motivation to have reactive primitives in the core of the framework and how we as developers can benefit from it. I hope it will be interesting for you. Please share this video if you like it.
🕒 Time Codes:
00:00:00 - Intro;
00:00:41 - Ad Integration - How to become an Expert in Angular Forms;
00:01:55 - Motivation to have Signals;
00:07:04 - Signals in Action;
00:16:00 - Recap;
00:18:00 - Outro;
🙌 Join the discussion about Signals you can on Angular GitHub
github.com/angular/angular/di...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi - Věda a technologie
💥 Start to develop Angular Forms like a PRO with my in-depth Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-10
Can I get a coupon code?
@@mukeshm280yes, just write me at dmytro@decodedfrontend.io
is there any certificate (of completition at least) after finishing the course?
@@luqeckr Hi! yes, there is a certificate of completion
Дякую, Дмитре, саме вирішив познайомитись з новинками 16 версії і тут такий подарунок!!!)😍
Заходьте ще 😉 подарунків ще буде багато 😁
Excellent presentation as always ! Thanks for the great content 😎
when the master talk about something new about angular, students just listen and learn, you're in a point where i only believe in your videos and all that things you show me in angular, keep it real
Thank you for the clear explanations and code samples!
Can't wait for this feature to be released as stable, as you said, it will be a nice way for Angular to become more attractive to newcomers 🙂
I love this change. Thanks for the clear explanation
As always well done 👍
Thanks for the new video!
Well, no words than just Love you bro, just damn stuck on your channel hehe, for this kind of detailed videos on Angular ❤️
thanks for another useful video, Dmytro ;)
great introduction to signals! Thanks 😄
can't wait to see next video about change detection 😉
Thank you! in 2 weeks ;)
Thank you so much for the amazing content, subscribed and liked🙌🙌👌👌😍😍👍👍
This is great content. Keep it up!
I was waiting for this video, Finally 🤩
🎉 Yeeah!!! I hope you'll like it ;)
Love it!
Thanks! Well done.
Thanks! Excellent content!
Thanks a lot for this video !! waiting for change detection :)
very lovely and self explained video
thank you keep going
With each new video the design of your room looks better and better))
Haha, hopefully the content quality as well 😄
Thanks King!
Great content!
Thank you very much for a very good explanation!
Glad you liked it :)
Thanks for the clear explanation 😎
there is no word to say for this good video❤💙
thanks Dmytro for nice presentation!
Finally! I was waiting for this video. Thanks a lot for you dedication!
Thanks a lot for your support! :)
This resembles me towards React's state variable(signal in angular) and useEffect(effect in angular)
Or the upcoming runes in Svelte 5. It's all the same basically.
Дякую :)
great video thx :)
Thanks!
Since angular 16 is coming I've decided to watch this video again...and again...and again (just in case) :)
Thanks, Kozache!
😉
It like a new Angular and I have to learn from scratch again
This is like a mix of old EmberJs and KnockoutJs
Great presentation
but I'm still curious how the compute and effect know the signals have changed in their callbacks. Appreciate it if you could make a video of how the signal and hooks work under the hood
Thanks
Thank you, dear...Me, watching your videos from Pakistan.
Thank you for video ). What about template rendering ? If I use onPush strategy and ngZone: noop (zoneless), signals don't update in template, I should use cdRef.detectChanges() for rerender compnent template. Maybe I didn't fully understand, but how does the template know if the signal has been updated without using zones. I do not want overendering , need to render only specific component or some scope of component (also used rx-angular/template).
Hi, thanks for the video.
As Angular dev since version 2+ used in professional projects , for me is a big BREAKING CHANGES and BS.
They should choose the svelte way, which in terms of DX is better as much close to what exist now.
They choose the solidjs / vue way, in my opinion wrong. if this is accepted and moved to stable, i will have to make a choice, which will be to find another job and choose another framework. Because i will not waste my time to learn this and to update the company app to use this hell verbose BS syntax. this will be the real end of this framework because they didnt learn what happen with angularjs to angular 2.. A lot dev switch from angularjs to react or vue. Good luck to all still Angular devs. ;)
like observable, does signal need to be destroyed or unsubscribed when view destroyed ?
are angular teams sure about no consequences like an observable leak will occur while using the signal over than rxjs ?
I am very excited to use this on behalf of the component store of ngrx.
KnockoutJS, we meet again
All new is well forgotten old 😄
Nice. Do you have any recommendation on how to employ Signals for input fields in reactive forms, especially with custom validation?
Hey Dymtro, this one came exactly on time. I was trying to understand what's with the hype and you provided a clear explanation to me. Thanks!
Got two questions:
1.) Usually, when we transform a value in the template we usually do it through pure pipes in order to avoid unnecessary change detection. Do you think that signals will make pipes obsolete?
2.) Isn't there a chance of circular dependency between computed signals? I wonder if it will be marked in a way at build time or through lint
whant to know also
Hi :) Thanks for your questions.
1) Well, I don't think that pipes will become obsolete. Optimization of CD isn't their direct responsibility, they are being used in order to transform data in a template and the pipe doesn't care if the value comes from Signal, class property, or from another pipe (e.g async pipe).
2) Good question. I think this question is better to ask maybe here github.com/angular/angular/discussions/49090 because frankly speaking, the topic is very new and I don't have enough knowledge yet to answer this question :)
nice questions!
Great overview, thank you! It could be great to see how signals will look with different components comunications on different levels. For istance, via services or how it'll look with @Input ? Do we need to write setter in case to set signal from parent to child? And it seems great this will reduce amount of async pipes in templates and takeUntils in component code. As I see, it'll also reduce amount of rxjs code, for example we can all forget about combineLatest, and just use signals in the effect and in the computed. Correct me if I'm wrong)
Yes, you are right 🙌 about @Inputs() and signals there will be information soon 😉
Hi, dear Dmytro.
Would you please create another video about signals and describe the new APIs that have been added to it?
I cannot wait until you create that video.
does angular 16 still contain zonejs? if yes, what happens if we use this predicted api to convert signal to observable - does it trigger old change detection based on zonejs, or are we staying on signal based system, since underlaying values are emitted by a signal?
I can say for sure that zonejs will stay in the next major releases because migration and adoption of signals will take a decent amount of time. Regarding how it will work exactly I can't say now because this feature wasn't even pushed to the Angular repo yet :) I think things will become a bit clearer when the angular core team will publish the first RFC.
Are there already any standards (generally accepted rules) for writing variable names for signals?
Hi! There are no such rules as far as I know :)
Hi Dmytro! In my application I declared a lot of variable as Observable. Can signals be used to replace Observable?
it depends :) Currently, there is a consensus that Signals are good for synchronous reactivity and observables are good for scenarios when you have to deal with async stuff e.g. events, http calls, etc. So I would say that it is better to use both.
Bro can you please explain about component store?
Hey Dmytro, do you think Angular will be relevant in the future? i see a major decrease in 2022 and in 2023.
wouldn’t accessing signal value with function call in template cause problems with cd?
No, it is fine to use signals like that. By the way, functions in the template are also safe to use unless those functions do some expensive computations, loops, etc
do you have ngZone: 'noop" set in this demo ?
No, I didn't do that. Currently, signals work in the context of ZoneJs. A new CD mechanism will come in a bit later.
signals seem promising for sure, although i like my piped observables :-)
Fortunately, we can use both 😉
❤
So what is the actual peformance gain. So Signal do not need a | async pipe in order to be updated. ChangeDetectionStrategy will be remove ?
Yes. No need for an async pipe. ChangeDetectionStrategy flag will (most probably) become obsolete in the future. One of the reasons for performance gain will be that Angular will do Change Detection only for components where their data model has changed.
13:34 the way you wrote this effect was very misleading and confusing. I was forced to check if it makes sense on preactjs myself.
There are some really cool things in your videos. Have you thought about running courses on global platforms like Udemy? I found out about your channel by accident and I think they will be popular on Udemy.
Hi :) I actually hosted my courses on Udemy some time ago but I intentionally moved from there because Udemy has terrible conditions for course authors.
@@DecodedFrontend Hmm. Maybe then the egghead platform? Because the content is really good, and it needs to be popularized.
It looks similar to knockout binding
Це як async в компоненті.
Але ось я не сильно розумію, як сигналом можна буде замінити RxJS. Там же так багато операторів. І скажімо observable зараз добре притосований для http запитів, коли можна купу кейсів покрити різними операторами.
Скажімо можна було б зробити бібліотеку, яка б при створенні http запиту приймала 2 агрументи: сигнал і error колбек.
Ця звязка була б легшою чим rxjs, але менш функціональна.
Thank you for the great video. I dont like the syntax.. signal, effect and compute it looks a little weird. Very react-ish..
tldr, angular is now react?
The style of signal make Angular look kind of similar to React. signal would be similar to useState, and effect would be similar to useEffect. Technically maybe they are different thing, at least for signal. But the way of writing the code feels a bit React.
And "computed" thing looks like VueJs :)
I feel the same way, except I think with signals you do not have to explicitly state the dependencies
Yo.. When did Luka Doncic become a software developer 🤔
Have been using Angular since v4 and Zone js was never been a real pain in terms of cd, I just turn it off by default with noop bootstrap option, thats it.
The main flaw of using zone js in Angular is much wider and no one really talking about it, it is the fact that zone js initializing in browser swaps some native code functions with its wrappers and if Angular is the only app on the page it is not noticeable, but if there are more apps on the page with different technologies, plugins or microfrontends, then they all become using those patched functions, because they are share the same window api, even worse in scenario when some another app initialized its things with native code, then zone js appears and in the middle swaps window api and ZoneAwarePromise error could appear in sibling apps, etc. Even the fact that you developing some code modules relying on native api, testing it, then realize it is swapped in runtime with something different, somehow magically working indeed but it is not something what you expecting.
Дякую за вашу роботу. Можливо вам буде в нагоді почути як нейтіви вимовляють слова process, mechanism .
Why is Luka Doncic teaching me about Angular?
this very much unwanted feature in angular. which complicates the understandablity metric of the framework
Thank you for your feedback :) maybe it is just a first impression😉
Hello please set Persian subtitles for your videos 🙏
Wait... it's look like Vue component xD
Lol. 😂 You're right!
😬
I was searching for this comment 😅
like in the blind
goodbye subscribe hell observable
Say bye to newcomers, they are way far away from Angular now)))
Haha! Nah, things are not so bad :)
It's not a big thing. It's built on top of Reactive Extensions Library for Js. Anyone can create their own custom signals. LOL
ExpressionChangedAfterItHasBeenChecked -- Ugh. Less of this is better for everyone!
haha, totally agree :)
annoying to see that angular is adopting a dumbed down react / vue style paradigms when it already had a superior approach to reactivity
Дякую! Слава Україні!
You can update Angular to 16, even if the current latest version is 15? :O :O :O
Angular 15 is the last stable version but you can manually define any “next”,”beta”,”release-candidate” version 😊