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

[@riongull]

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

[@hansschenker]

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

[@aardvarkgroup2300]

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

[@OussemaSahbeni]

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

[@choanlpoto]

Dead tech

[@OussemaSahbeni]

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

[@gordonfreimann]

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]

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

[@christianm4906]

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

[@AngularUniversity]

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]

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]

It’s Evan You.

[@woife0705]

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]

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]

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

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]

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

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

[@zygas15]

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

[@sanitherayil]

❤

[@grafenau_digital_solutions]

Finally ❤

[@dmitryi4483]

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

[@TizzyAPunkt]

Actually that’s what I also think.

[@levicoderman]

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

[@Warrigt]

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

[@levicoderman]

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]

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

[@uchennaofoma4624]

amazing

[@hamdiaminehkh]

it's useState hook of REACT.

[@o_glethorpe]

Yes, without all that garbage around

[@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`?

[@hansschenker]

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]

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]

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

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

[@hansschenker]

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

[@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.

[@lucasterable]

Syntax hideosity and convolution for performance's sake.

[@denisecknauer4627]

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]

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

[@denisecknauer4627]

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

[@FaizanAnwerAli]

@@negenalamjiyn6637 signals are everywhere now

[@hansschenker]

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

[@kiana5066]

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]

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

[@gofudgeyourselves9024]

Red green yellow