Тёмный

First look at Signals in Angular 

Decoded Frontend
Подписаться 48 тыс.
Просмотров 44 тыс.
50% 1

💥 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

Наука

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 115   
@DecodedFrontend
@DecodedFrontend Год назад
💥 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
@mukeshm280
@mukeshm280 Год назад
Can I get a coupon code?
@DecodedFrontend
@DecodedFrontend Год назад
@@mukeshm280yes, just write me at dmytro@decodedfrontend.io
@luqeckr
@luqeckr Год назад
is there any certificate (of completition at least) after finishing the course?
@DecodedFrontend
@DecodedFrontend Год назад
@@luqeckr Hi! yes, there is a certificate of completion
@vitaliiploshchynskyi2770
@vitaliiploshchynskyi2770 Год назад
Дякую, Дмитре, саме вирішив познайомитись з новинками 16 версії і тут такий подарунок!!!)😍
@DecodedFrontend
@DecodedFrontend Год назад
Заходьте ще 😉 подарунків ще буде багато 😁
@haroldpepete
@haroldpepete Год назад
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
@AlainBoudard
@AlainBoudard Год назад
Excellent presentation as always ! Thanks for the great content 😎
@julienwickramatunga7338
@julienwickramatunga7338 Год назад
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 🙂
@josephsackeykontor4138
@josephsackeykontor4138 Год назад
I love this change. Thanks for the clear explanation
@magda77850
@magda77850 Год назад
great introduction to signals! Thanks 😄 can't wait to see next video about change detection 😉
@DecodedFrontend
@DecodedFrontend Год назад
Thank you! in 2 weeks ;)
@asifnawazmiani
@asifnawazmiani Год назад
Well, no words than just Love you bro, just damn stuck on your channel hehe, for this kind of detailed videos on Angular ❤️
@mahendranath2504
@mahendranath2504 Год назад
Thank you so much for the amazing content, subscribed and liked🙌🙌👌👌😍😍👍👍
@mouazalkhodari6407
@mouazalkhodari6407 Год назад
very lovely and self explained video thank you keep going
@Hariharan0606
@Hariharan0606 Год назад
Thanks a lot for this video !! waiting for change detection :)
@yuriinadilnyi3029
@yuriinadilnyi3029 Год назад
As always well done 👍
@povezlo46
@povezlo46 Год назад
With each new video the design of your room looks better and better))
@DecodedFrontend
@DecodedFrontend Год назад
Haha, hopefully the content quality as well 😄
@zhdanvadim9536
@zhdanvadim9536 Год назад
Thanks for the new video!
@gagiksimonyan3782
@gagiksimonyan3782 Год назад
thanks for another useful video, Dmytro ;)
@jediampm
@jediampm Год назад
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. ;)
@ivandynysiuk4341
@ivandynysiuk4341 4 месяца назад
Thanks for the clear explanation 😎
@XFuriousGamming
@XFuriousGamming Год назад
This is great content. Keep it up!
@srushtidaware7978
@srushtidaware7978 Год назад
This resembles me towards React's state variable(signal in angular) and useEffect(effect in angular)
@d34d10ck
@d34d10ck 8 месяцев назад
Or the upcoming runes in Svelte 5. It's all the same basically.
@lhargil
@lhargil Год назад
Thank you very much for a very good explanation!
@DecodedFrontend
@DecodedFrontend Год назад
Glad you liked it :)
@nephilimson
@nephilimson Год назад
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
@ommo289
@ommo289 Год назад
thanks Dmytro for nice presentation!
@nelson3391
@nelson3391 Год назад
Thanks! Excellent content!
@darwinwatterson1732
@darwinwatterson1732 Год назад
Finally! I was waiting for this video. Thanks a lot for you dedication!
@DecodedFrontend
@DecodedFrontend Год назад
Thanks a lot for your support! :)
@oleksandrvorovchenko8674
@oleksandrvorovchenko8674 Год назад
Thanks! Well done.
@TravisSomaroo
@TravisSomaroo Год назад
Great content!
@MrKOHKyPEHT
@MrKOHKyPEHT Год назад
Since angular 16 is coming I've decided to watch this video again...and again...and again (just in case) :)
@afsirlaghari3738
@afsirlaghari3738 Год назад
Thank you, dear...Me, watching your videos from Pakistan.
@miroslavjakovcic4585
@miroslavjakovcic4585 4 месяца назад
Nice. Do you have any recommendation on how to employ Signals for input fields in reactive forms, especially with custom validation?
@ivanperun3565
@ivanperun3565 Год назад
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).
@zaktreister1995
@zaktreister1995 9 месяцев назад
Thanks King!
@balajibalamurugan8053
@balajibalamurugan8053 Год назад
I was waiting for this video, Finally 🤩
@DecodedFrontend
@DecodedFrontend Год назад
🎉 Yeeah!!! I hope you'll like it ;)
@yogeshalwani9256
@yogeshalwani9256 Год назад
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.
@mihaioltean6008
@mihaioltean6008 Год назад
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
@genyklemberg
@genyklemberg Год назад
whant to know also
@DecodedFrontend
@DecodedFrontend Год назад
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 :)
@hfspace
@hfspace Год назад
nice questions!
@ihor-pidhornyi
@ihor-pidhornyi Год назад
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)
@DecodedFrontend
@DecodedFrontend Год назад
Yes, you are right 🙌 about @Inputs() and signals there will be information soon 😉
@ihoryanovchyk
@ihoryanovchyk Год назад
Thanks, Kozache!
@DecodedFrontend
@DecodedFrontend Год назад
😉
@beeTechSE
@beeTechSE 7 месяцев назад
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.
@michalwroblewskimobi
@michalwroblewskimobi Год назад
KnockoutJS, we meet again
@DecodedFrontend
@DecodedFrontend Год назад
All new is well forgotten old 😄
@TuHoang-jt8lf
@TuHoang-jt8lf Год назад
It like a new Angular and I have to learn from scratch again
@TheoLeChnow
@TheoLeChnow Год назад
great video thx :)
@MoMoadeli
@MoMoadeli 6 месяцев назад
Thanks!
@yufgyug3735
@yufgyug3735 Год назад
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?
@DecodedFrontend
@DecodedFrontend Год назад
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.
@mehmeh533
@mehmeh533 Год назад
Love it!
@volodymyrusarskyy6987
@volodymyrusarskyy6987 Год назад
This is like a mix of old EmberJs and KnockoutJs
@dennis87ist
@dennis87ist 6 месяцев назад
Hi Dmytro! In my application I declared a lot of variable as Observable. Can signals be used to replace Observable?
@DecodedFrontend
@DecodedFrontend 6 месяцев назад
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.
@moegreen8543
@moegreen8543 4 месяца назад
Are there already any standards (generally accepted rules) for writing variable names for signals?
@DecodedFrontend
@DecodedFrontend 4 месяца назад
Hi! There are no such rules as far as I know :)
@orzohar3483
@orzohar3483 9 месяцев назад
Hey Dmytro, do you think Angular will be relevant in the future? i see a major decrease in 2022 and in 2023.
@atmn_pawel
@atmn_pawel Год назад
do you have ngZone: 'noop" set in this demo ?
@DecodedFrontend
@DecodedFrontend Год назад
No, I didn't do that. Currently, signals work in the context of ZoneJs. A new CD mechanism will come in a bit later.
@AlphaFrog1021
@AlphaFrog1021 Год назад
wouldn’t accessing signal value with function call in template cause problems with cd?
@DecodedFrontend
@DecodedFrontend Год назад
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
@alexandrefaustino2448
@alexandrefaustino2448 Год назад
So what is the actual peformance gain. So Signal do not need a | async pipe in order to be updated. ChangeDetectionStrategy will be remove ?
@DecodedFrontend
@DecodedFrontend Год назад
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.
@YehorKanaiev
@YehorKanaiev Год назад
Це як async в компоненті. Але ось я не сильно розумію, як сигналом можна буде замінити RxJS. Там же так багато операторів. І скажімо observable зараз добре притосований для http запитів, коли можна купу кейсів покрити різними операторами. Скажімо можна було б зробити бібліотеку, яка б при створенні http запиту приймала 2 агрументи: сигнал і error колбек. Ця звязка була б легшою чим rxjs, але менш функціональна.
@hfspace
@hfspace Год назад
signals seem promising for sure, although i like my piped observables :-)
@DecodedFrontend
@DecodedFrontend Год назад
Fortunately, we can use both 😉
@ilyabielov9864
@ilyabielov9864 Год назад
Дякую :)
@medidisukumar5348
@medidisukumar5348 10 месяцев назад
Bro can you please explain about component store?
@SheriffZmroka
@SheriffZmroka Год назад
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.
@DecodedFrontend
@DecodedFrontend Год назад
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.
@SheriffZmroka
@SheriffZmroka Год назад
@@DecodedFrontend Hmm. Maybe then the egghead platform? Because the content is really good, and it needs to be popularized.
@_dinesh
@_dinesh Год назад
Thank you for the great video. I dont like the syntax.. signal, effect and compute it looks a little weird. Very react-ish..
@The14Some1
@The14Some1 7 месяцев назад
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.
@vishwajeetsavandkar7617
@vishwajeetsavandkar7617 Год назад
@indrarajyadav528
@indrarajyadav528 Год назад
It looks similar to knockout binding
@LeungWong
@LeungWong Год назад
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.
@zhandosainabek
@zhandosainabek Год назад
And "computed" thing looks like VueJs :)
@damiankowalski8541
@damiankowalski8541 Год назад
I feel the same way, except I think with signals you do not have to explicitly state the dependencies
@ghkpr
@ghkpr Год назад
tldr, angular is now react?
@josemiguelochoa5372
@josemiguelochoa5372 Год назад
Yo.. When did Luka Doncic become a software developer 🤔
@sergeymois6302
@sergeymois6302 Год назад
Дякую за вашу роботу. Можливо вам буде в нагоді почути як нейтіви вимовляють слова process, mechanism .
@bornathepicek
@bornathepicek Год назад
Why is Luka Doncic teaching me about Angular?
@user-jd2mo5xm3b
@user-jd2mo5xm3b Год назад
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.
@kumarvadivel4328
@kumarvadivel4328 Год назад
this very much unwanted feature in angular. which complicates the understandablity metric of the framework
@DecodedFrontend
@DecodedFrontend Год назад
Thank you for your feedback :) maybe it is just a first impression😉
@stanisawgolinski3244
@stanisawgolinski3244 Год назад
Wait... it's look like Vue component xD
@wenreloz
@wenreloz Год назад
Lol. 😂 You're right!
@DecodedFrontend
@DecodedFrontend Год назад
😬
@skayona
@skayona Год назад
I was searching for this comment 😅
@piotrbrokowski4703
@piotrbrokowski4703 Год назад
like in the blind
@sabasojoodi6344
@sabasojoodi6344 10 месяцев назад
Hello please set Persian subtitles for your videos 🙏
@juraganpisang6982
@juraganpisang6982 Год назад
goodbye subscribe hell observable
@aaronkoller8811
@aaronkoller8811 Год назад
ExpressionChangedAfterItHasBeenChecked -- Ugh. Less of this is better for everyone!
@DecodedFrontend
@DecodedFrontend Год назад
haha, totally agree :)
@genyklemberg
@genyklemberg Год назад
Say bye to newcomers, they are way far away from Angular now)))
@DecodedFrontend
@DecodedFrontend Год назад
Haha! Nah, things are not so bad :)
@ravijsoni2477
@ravijsoni2477 Год назад
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
@unhandledexception1948
@unhandledexception1948 11 месяцев назад
annoying to see that angular is adopting a dumbed down react / vue style paradigms when it already had a superior approach to reactivity
@user-gi9pm8hm9f
@user-gi9pm8hm9f Год назад
Дякую! Слава Україні!
@namename123
@namename123 Год назад
You can update Angular to 16, even if the current latest version is 15? :O :O :O
@DecodedFrontend
@DecodedFrontend Год назад
Angular 15 is the last stable version but you can manually define any “next”,”beta”,”release-candidate” version 😊
Далее
Input Signals in Angular 17.1 - How To Use & Test
14:34
Пробую торты
00:43
Просмотров 240 тыс.
Terms of Service    HTML   CSS Tutorial
10:40
I used Angular's signals to build an actual app
7:36
Git MERGE vs REBASE
16:12
Просмотров 1 млн
Мой странный компьютер 2024
18:33