Understanding Signals

Signals became all the rage in 2023 - SolidJS made them popular, Angular is adopting them, Svelte introduces them ("runes") and Vue actually already had a Signal-like feature called "refs".
But what's the advantage of Signals? And how do they work internally?
🖥️ Official Website & Courses
academind.com/courses/
💬 Academind Community
academind.com/community
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
/ maximilian-schwarzmueller
/ manuel-lorenz-808b5185
/ academind-gmbh
/ academind-pro
/ academind_real

Пікірлер: 49

  • @riongull
    @riongull2 ай бұрын

    Great explanation. It would help to show it with an example of updating the DOM - the environment where most people would use this.

  • @hansschenker

    @hansschenker

    2 ай бұрын

    you can just call a count signal in your html with: count()

  • @aardvarkgroup2300
    @aardvarkgroup230023 күн бұрын

    This was a great, short dive into how Signals operate.I enjoy your courses on Udemy more than any other courses I purchased or watched on KZread. Your explanation of concepts make all the pieces of the "programming puzzle" fit together. It took 4 Java programming books in the 90s to understand the concepts of that language until I got the right one. Thank you for producing these courses. It makes learning new languages easier i.e. Angular, Typescript. I am waiting patiently for the Angular Signals course.....

  • @christianm4906
    @christianm49062 ай бұрын

    This idea of signals reminds me of the observer design pattern, a pattern that has been around since before the web became popular. Other GUI libraries for native applications, such as the Qt framework, have successfully used this pattern. That being said, I still don't understand why this wasn't the original approach from the beginning of React.js. I also don't understand why such a bad library like React has become so popular. 😒

  • @OussemaSahbeni
    @OussemaSahbeni2 ай бұрын

    when are you going to update the angular course to angular v17 ?

  • @choanlpoto

    @choanlpoto

    2 ай бұрын

    Dead tech

  • @OussemaSahbeni

    @OussemaSahbeni

    2 ай бұрын

    @@choanlpotomaybe, but it gets the job done so who cares

  • @gordonfreimann

    @gordonfreimann

    2 ай бұрын

    you wont find a company that fully migrated to v17. you need know the good old angular first. if you know it well enough you dont need a course for v17 anyway. just read the docs

  • @academind

    @academind

    2 ай бұрын

    Working on it, will be a great update. But got no time / release estimate yet and won't rush it.

  • @AngularUniversity
    @AngularUniversity2 ай бұрын

    Qwik also uses them, but we hardly see them, it's all via proxies. Angular already has a Signals API, but they are not yet fully plugged in to change detection. 👍They do already work with OnPush though, if we consume a signal in a template, a new emitted value will mark the component as dirty.

  • @hansschenker
    @hansschenker2 ай бұрын

    React Hooks were a great inspiration for Vue 3 reactivity system (Evan Vue). Vue uses the Javascript Proxy class to track data changes. Unlike React where after each data change the UI rerenders in Vue 3 in the setup the dependencies are set with ref or reactive the Ui renderes only once and the only the html element wich displays the data change will be rerendered.

  • @avwie132

    @avwie132

    2 ай бұрын

    It’s Evan You.

  • @zygas15
    @zygas152 ай бұрын

    Thank you! The topic explained in very easy way :)

  • @woife0705
    @woife07052 ай бұрын

    Such a reimplementation is really helpful in understanding the concept! I still dont get the difference between other "pubish-subscriber" patterns in code (Like Observables).

  • @hansschenker

    @hansschenker

    2 ай бұрын

    Signals are a combination of React hooks (return an array of get and set functio) and the Subject - Observer pattern, where the the Subject is the Signal and the subscribers in the signal are the the observers

  • @woife0705

    @woife0705

    2 ай бұрын

    @@hansschenker I meant "subject-observer" thank you for the clarification! But my question was not directly answered. Since there exist many implementations of this pattern (Max mentioned a few in the video), Signals are simply one of these implementations. But I assume a lightweight one, which is optimized for updating the view. In contrast to RxJS observables. Can we agree on that?

  • @avwie132

    @avwie132

    2 ай бұрын

    Under the hood everything is a subscriber pattern, albeit with some automatic subscription and unsubscribtion based on mounting and unmounting of some composition nodes. Using some observable lib and things like use effect you can easily create something similar. IMHO the signals implementations I see all use some sort of global state. The web dev world might be interested to see how Google managed state with their Compose library. Especially the Snapshot system.

  • @nguyenvietquang2065

    @nguyenvietquang2065

    2 ай бұрын

    @@avwie132 i took a time understanding Jetpack Compose recently how it works under the wood . I come to conclusion that it is same as React. They both compare the virtual DOM or UI tree here in Compose, then efficientcy update nodes that requires re-render(recompose). But, compose optimizing recompose is a major considerable problem, requires us to really understand to be able to optimize it. I really think Signal with observer in FE world is real awesome and why there is not a framework here yet for the Android world

  • @avwie132

    @avwie132

    2 ай бұрын

    @@nguyenvietquang2065 nice reply! However, it is possible to not use recompose. The snapshot system is independent of the recomposer. They use the snapshot system to trigger the recomposition, but way more efficiently then React does. Things like donut hole skipping and the likes.

  • @sanitherayil
    @sanitherayil2 ай бұрын

  • @grafenau_digital_solutions
    @grafenau_digital_solutions2 ай бұрын

    Finally ❤

  • @dmitryi4483
    @dmitryi44832 ай бұрын

    Wouldn’t this infinitely grow subscribers array with every read?

  • @TizzyAPunkt

    @TizzyAPunkt

    2 ай бұрын

    Actually that’s what I also think.

  • @levicoderman

    @levicoderman

    2 ай бұрын

    He's just doing it for simplicity, but the complete implementation includes cleanup logic.

  • @Warrigt
    @Warrigt2 ай бұрын

    every framework just having to re-name an existing system. Runes?? really?

  • @levicoderman

    @levicoderman

    2 ай бұрын

    They are not renaming signals lol. Runes are markers/symbols that indicate to the compiler that something is reactive and that reactivity is powered by signals.

  • @Warrigt

    @Warrigt

    2 ай бұрын

    @@levicoderman "Runes are markers/symbols"... Almost like it's another name for the same thing..

  • @uchennaofoma4624
    @uchennaofoma4624Ай бұрын

    amazing

  • @user-bm6xs6ih5n
    @user-bm6xs6ih5nАй бұрын

    I feel the example could have been better. Kinda confusing. When you first define function read(), you also subscribe... then I would called it readAndSubscribe. Calling it "read" alone is a poor naming choice in context trying to explain the logic, IMO. And I would also not call it signals pattern, but rather classic observer pattern in that case.

  • @hansschenker
    @hansschenker2 ай бұрын

    Signals might become a web standard. Signals are in the web standardization process. That said Rxjs Observables which are also in the web standardization process will probably never become a web standard.

  • @woife0705

    @woife0705

    2 ай бұрын

    Can you give more insight on this statement? I yet dont see why the one is necessarily better than the other. They both seem to have their purpose in the area they are used.

  • @hansschenker

    @hansschenker

    2 ай бұрын

    @@woife0705 It is not a question ob being better than something else, it is just an easy way to track simple data changes. There are multiple ways to do state change tracking , Signals is one way todo it

  • @woife0705

    @woife0705

    2 ай бұрын

    @@hansschenkerok then let be more clear: Why do you think Signals will become a web standard at some point and Observables propably not?

  • @hansschenker

    @hansschenker

    2 ай бұрын

    @@woife0705 I was watching a youtube from Evan Vue (creator of Vue) he said he watches web standards very close and that he learned that Signals are on the way to be standardized, Observables are since about 2018 proposed as a becoming a standard, but nothing moves here anymore.

  • @denisecknauer4627
    @denisecknauer46272 ай бұрын

    I thought that Preact Signals made them popular :D P.S. Are you planning to add Signals section to your React course on Udemy? :)

  • @negenalamjiyn6637

    @negenalamjiyn6637

    2 ай бұрын

    ???? There are signals in react???

  • @denisecknauer4627

    @denisecknauer4627

    2 ай бұрын

    @@negenalamjiyn6637 Preact, not React - it's a lightweight alternative to React :) however their signals can be used in any framework (including React)

  • @FaizanAnwerAli

    @FaizanAnwerAli

    2 ай бұрын

    @@negenalamjiyn6637 signals are everywhere now

  • @hansschenker

    @hansschenker

    2 ай бұрын

    Ract will never have Signals. Signal like behavior in React is realized with Hooks and useEffect!

  • @lucasterable
    @lucasterable2 ай бұрын

    Syntax hideosity and convolution for performance's sake.

  • @hamdiaminehkh
    @hamdiaminehkh2 ай бұрын

    it's useState hook of REACT.

  • @o_glethorpe

    @o_glethorpe

    2 ай бұрын

    Yes, without all that garbage around

  • @codyrap95

    @codyrap95

    Ай бұрын

    yes, but you get 1ms of performance improvement at the cost of having uglier code 😂 how can you not want that? Why have count as a normal variable when you can say `count()+1`?

  • @kiana5066
    @kiana50662 ай бұрын

    so many names for the same concept... they're all just atoms man: we restrict ourselves to atomic operations only so we can has thread-safe mutable variables (aka state management) which opens the way to "subscriptions" and reactive UI design also, wasn't svelte's elevator pitch something like "sure it's the least mature framework, but look, it does away with the whole state management BS, you can treat simple variables like they're atoms..."? now it has the same syntax as the rest, but they're called "incantations" now! and when you de-ref them, you're "casting a spell"!

  • @miro.s
    @miro.s2 ай бұрын

    You should learn how to pause your speech. One sentence is never read throughout several minutes. Really exhausting!

  • @gofudgeyourselves9024
    @gofudgeyourselves90242 ай бұрын

    Red green yellow