First look at Signals in Angular

Поділитися
Вставка
  • Опубліковано 24 вер 2024

КОМЕНТАРІ • 117

  • @DecodedFrontend
    @DecodedFrontend  Рік тому +7

    💥 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 Рік тому +6

    Дякую, Дмитре, саме вирішив познайомитись з новинками 16 версії і тут такий подарунок!!!)😍

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +3

      Заходьте ще 😉 подарунків ще буде багато 😁

  • @haroldpepete
    @haroldpepete Рік тому +2

    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 Рік тому +9

    Excellent presentation as always ! Thanks for the great content 😎

  • @julienwickramatunga7338
    @julienwickramatunga7338 Рік тому +4

    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 🙂

  • @magda77850
    @magda77850 Рік тому +6

    great introduction to signals! Thanks 😄
    can't wait to see next video about change detection 😉

  • @josephsackeykontor4138
    @josephsackeykontor4138 Рік тому +2

    I love this change. Thanks for the clear explanation

  • @mihaioltean6008
    @mihaioltean6008 Рік тому +15

    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 Рік тому +1

      whant to know also

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +3

      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!

  • @srushtidaware7978
    @srushtidaware7978 Рік тому +4

    This resembles me towards React's state variable(signal in angular) and useEffect(effect in angular)

    • @d34d10ck
      @d34d10ck Рік тому

      Or the upcoming runes in Svelte 5. It's all the same basically.

  • @asifnawazmiani
    @asifnawazmiani Рік тому +1

    Well, no words than just Love you bro, just damn stuck on your channel hehe, for this kind of detailed videos on Angular ❤️

  • @povezlo46
    @povezlo46 Рік тому +1

    With each new video the design of your room looks better and better))

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +1

      Haha, hopefully the content quality as well 😄

  • @darwinwatterson1732
    @darwinwatterson1732 Рік тому +3

    Finally! I was waiting for this video. Thanks a lot for you dedication!

  • @jediampm
    @jediampm Рік тому +4

    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. ;)

  • @MrKOHKyPEHT
    @MrKOHKyPEHT Рік тому

    Since angular 16 is coming I've decided to watch this video again...and again...and again (just in case) :)

  • @Aliakbaresmaeiliiii
    @Aliakbaresmaeiliiii 3 місяці тому

    there is no word to say for this good video❤💙

  • @nephilimson
    @nephilimson Рік тому +2

    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

  • @Hariharan0606
    @Hariharan0606 Рік тому +1

    Thanks a lot for this video !! waiting for change detection :)

  • @ihor-pidhornyi
    @ihor-pidhornyi Рік тому +5

    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  Рік тому +3

      Yes, you are right 🙌 about @Inputs() and signals there will be information soon 😉

  • @evtihii
    @evtihii Місяць тому

    Thanks for information. Still I didn't get the real experience of using signals. Long story short why we need it. It looks like a getter actually

  • @michalwroblewskimobi
    @michalwroblewskimobi Рік тому +11

    KnockoutJS, we meet again

  • @volodymyrusarskyy6987
    @volodymyrusarskyy6987 Рік тому +1

    This is like a mix of old EmberJs and KnockoutJs

  • @balajibalamurugan8053
    @balajibalamurugan8053 Рік тому +1

    I was waiting for this video, Finally 🤩

  • @yogeshalwani9256
    @yogeshalwani9256 Рік тому +2

    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.

  • @ilyabielov9864
    @ilyabielov9864 Рік тому +2

    Дякую :)

  • @zhdanvadim9536
    @zhdanvadim9536 Рік тому +1

    Thanks for the new video!

  • @TuHoang-jt8lf
    @TuHoang-jt8lf Рік тому

    It like a new Angular and I have to learn from scratch again

  • @yuriinadilnyi3029
    @yuriinadilnyi3029 Рік тому +2

    As always well done 👍

  • @afsirlaghari3738
    @afsirlaghari3738 Рік тому

    Thank you, dear...Me, watching your videos from Pakistan.

  • @beeTechSE
    @beeTechSE 10 місяців тому

    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.

  • @zaktreister1995
    @zaktreister1995 Рік тому

    Thanks King!

  • @ihoryanovchyk
    @ihoryanovchyk Рік тому +2

    Thanks, Kozache!

  • @ivanperun3565
    @ivanperun3565 Рік тому +1

    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).

  • @miroslavjakovcic4585
    @miroslavjakovcic4585 8 місяців тому

    Nice. Do you have any recommendation on how to employ Signals for input fields in reactive forms, especially with custom validation?

  • @mahendranath2504
    @mahendranath2504 Рік тому +1

    Thank you so much for the amazing content, subscribed and liked🙌🙌👌👌😍😍👍👍

  • @ivandynysiuk4341
    @ivandynysiuk4341 8 місяців тому

    Thanks for the clear explanation 😎

  • @gagiksimonyan3782
    @gagiksimonyan3782 Рік тому +1

    thanks for another useful video, Dmytro ;)

  • @lhargil
    @lhargil Рік тому +1

    Thank you very much for a very good explanation!

  • @mouazalkhodari6407
    @mouazalkhodari6407 Рік тому

    very lovely and self explained video
    thank you keep going

  • @ommo289
    @ommo289 Рік тому

    thanks Dmytro for nice presentation!

  • @XFuriousGamming
    @XFuriousGamming Рік тому

    This is great content. Keep it up!

  • @oleksandrvorovchenko8674
    @oleksandrvorovchenko8674 Рік тому +1

    Thanks! Well done.

  • @musoverda
    @musoverda 7 місяців тому +1

    Are there already any standards (generally accepted rules) for writing variable names for signals?

    • @DecodedFrontend
      @DecodedFrontend  7 місяців тому

      Hi! There are no such rules as far as I know :)

  • @nelson3391
    @nelson3391 Рік тому

    Thanks! Excellent content!

  • @MoMoadeli
    @MoMoadeli 10 місяців тому

    Thanks!

  • @dennis87ist
    @dennis87ist 10 місяців тому +1

    Hi Dmytro! In my application I declared a lot of variable as Observable. Can signals be used to replace Observable?

    • @DecodedFrontend
      @DecodedFrontend  10 місяців тому +1

      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.

  • @orzohar3483
    @orzohar3483 Рік тому

    Hey Dmytro, do you think Angular will be relevant in the future? i see a major decrease in 2022 and in 2023.

  • @yufgyug3735
    @yufgyug3735 Рік тому +2

    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  Рік тому +1

      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.

  • @TravisSomaroo
    @TravisSomaroo Рік тому

    Great content!

  • @atmn_pawel
    @atmn_pawel Рік тому +3

    do you have ngZone: 'noop" set in this demo ?

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +3

      No, I didn't do that. Currently, signals work in the context of ZoneJs. A new CD mechanism will come in a bit later.

  • @SheriffZmroka
    @SheriffZmroka Рік тому +1

    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  Рік тому +2

      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.

  • @alexandrefaustino2448
    @alexandrefaustino2448 Рік тому +1

    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.

  • @Chantimedidi
    @Chantimedidi Рік тому

    Bro can you please explain about component store?

  • @mehmeh533
    @mehmeh533 Рік тому

    Love it!

  • @AlphaFrog1021
    @AlphaFrog1021 Рік тому +1

    wouldn’t accessing signal value with function call in template cause problems with cd?

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +1

      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

  • @hfspace
    @hfspace Рік тому +1

    signals seem promising for sure, although i like my piped observables :-)

  • @The14Some1
    @The14Some1 10 місяців тому

    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.

  • @ValeriiPetrenko-z6j
    @ValeriiPetrenko-z6j Рік тому +2

    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.

  • @YehorKanaiev
    @YehorKanaiev Рік тому

    Це як async в компоненті.
    Але ось я не сильно розумію, як сигналом можна буде замінити RxJS. Там же так багато операторів. І скажімо observable зараз добре притосований для http запитів, коли можна купу кейсів покрити різними операторами.
    Скажімо можна було б зробити бібліотеку, яка б при створенні http запиту приймала 2 агрументи: сигнал і error колбек.
    Ця звязка була б легшою чим rxjs, але менш функціональна.

  • @_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..

  • @TheoLeChnow
    @TheoLeChnow Рік тому +1

    great video thx :)

  • @rikizy528
    @rikizy528 Рік тому +2

    It looks similar to knockout binding

  • @vishwajeetsavandkar7617
    @vishwajeetsavandkar7617 Рік тому

  • @bornathepicek
    @bornathepicek Рік тому

    Why is Luka Doncic teaching me about Angular?

  • @josemiguelochoa5372
    @josemiguelochoa5372 Рік тому +1

    Yo.. When did Luka Doncic become a software developer 🤔

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

  • @kumarvadivel4328
    @kumarvadivel4328 Рік тому +2

    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😉

  • @sergeymois6302
    @sergeymois6302 Рік тому

    Дякую за вашу роботу. Можливо вам буде в нагоді почути як нейтіви вимовляють слова process, mechanism .

  • @sabasojoodi6344
    @sabasojoodi6344 Рік тому

    Hello please set Persian subtitles for your videos 🙏

  • @stanisawgolinski3244
    @stanisawgolinski3244 Рік тому +1

    Wait... it's look like Vue component xD

  • @piotrbrokowski4703
    @piotrbrokowski4703 Рік тому +1

    like in the blind

  • @juraganpisang6982
    @juraganpisang6982 Рік тому

    goodbye subscribe hell observable

  • @unhandledexception1948
    @unhandledexception1948 Рік тому

    annoying to see that angular is adopting a dumbed down react / vue style paradigms when it already had a superior approach to reactivity

  • @aaronkoller8811
    @aaronkoller8811 Рік тому +2

    ExpressionChangedAfterItHasBeenChecked -- Ugh. Less of this is better for everyone!

  • @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

  • @genyklemberg
    @genyklemberg Рік тому +2

    Say bye to newcomers, they are way far away from Angular now)))

  • @МаксимКобєлєв-у1р

    Дякую! Слава Україні!

  • @namename123
    @namename123 Рік тому +1

    You can update Angular to 16, even if the current latest version is 15? :O :O :O

    • @DecodedFrontend
      @DecodedFrontend  Рік тому +1

      Angular 15 is the last stable version but you can manually define any “next”,”beta”,”release-candidate” version 😊