Learn Why JavaScript Frameworks Love Signals By Implementing Them

[@zachariahtatman7381]

So you are telling me that the virtual dom and react way of doing things has been usurped by... plain old simple javascript?

[@user-u64g7p]

Yes, except that maybe it's still convoluted. Maybe we need this reactivity concept built in right into the Javascript compiler/parser/interpreter or whatever that really is. We need a new syntax for signals.

[@JoyofCodeDev]

there is a proposal for signals

[@user-u64g7p]

@@JoyofCodeDev It would be awesome if they did that. I came to this realization in 2022, and only 2 years after getting into programming for the first time in 2020, because I was so keen to understand how the computer understands Spreadsheet formulas (while I was working in Finance). After learning about parsers I quickly came to realize that not a single language (or even framework) is a good enough at (what later I learned is called) 'reactivity'. Currently I have managed to write a little interpreter that is capable to efficiently self-update spreadsheet references, though :D So I am kind of proud of myself that being an amateur (in programming) I was capable to see this problem so early on (and mostly because I understood that reacitivity is basically a bunch of mathematical equations that should preserve their truth state at all times which no programming language does when reassigning values). Anyways, I would love to see how they would implement this;

[@JoyofCodeDev]

@@user-u64g7p yeah that's what most reactivity systems aspire to

[@MrEnsiferum77]

pub sub is the only pattern that make sense on the frontend

[@torickjdavis]

Awesome video demonstrating the fundamental core of how signals work, and a great contrast-focused comparison with observables.

[@bmehder]

This has been one of my favorite videos you've made.

[@JoyofCodeDev]

I spent a lot of time thinking about it 😄

[@bmehder]

@@JoyofCodeDev ...and it shows. Hvala lepa!

[@cubondemais]

There's some optimization that the proposed signals have baked in, which is not re-running a subscriber if the input hasn't changed in value, for example you updated some signal to the exact same, just don't execute effects and derived. The proposal also tries to avoid as much computation as possible, so even subscribers won't run until needed. This way we could reduce rendering and DOM changes to the smallest possible

[@justingolden21]

Amazing video man... Your super simple observable script is AWESOME. I knew it was how this worked (from using svelte) but I didn't think it would be so simple and elegant to implement.

[@tithos]

What an amazing video!! Thank you so much for your dedication.

[@denisecknauer4627]

Great video - thank you a lot. I have recently started to experiment with Preact Signals in a small App and this video explains everything so clear! :)

[@timmeehan2365]

Amazing video, super clear !

[@oussamasadiki7377]

Thanks man very nice video, i now have a clear idea on how signals are implemented

[@diegoavendanohernandez9908]

You're amazing thank you for teaching us how things work under the hood

[@ckafrouni]

This is an amazing tutorial ! What a great way to learn a new concept.

[@JoyofCodeDev]

thank you! 😄

[@oPatrickVico]

Great video! Is it possible to make another one covering async signals?

[@sazaraki]

Thanks for the vids, excellent content. I would like to say, however, that the current recorded audio has a lot of low-end and much less high end that previously and it sounds kind of muffled. Combined with your accent it makes it noticeably harder to understand.

[@VolodymyrShamieiev]

How beautiful it is, friends!

[@JoyofCodeDev]

🙌

[@u2bist]

This one video is so cool I'm convinced to subscribe.

[@Mexad0n]

Nice & clear explanation

[@JoyofCodeDev]

thank you! 😄

[@ba8e]

Excellent video! Thank you.

[@leulfanuel3550]

Amazing video thanks.

[@KamelJabber1]

Great video!

[@armaandhanji2112]

Amazing video! How does this approach compare with how React does things? Does react still use some variation of the Observer pattern?

[@AB-gx5zj]

Nice explanation!

[@phoenixshell3772]

This is super cool, however what is the lifecycle of the subscribers, is there any way to unsubscribe if the function/context needs to go out of scope? Is it possible for effect to return a lamda to delete?

[@helsingking281]

Sometimes I randomly listen to a video and then realize which channel i'm on, because "how beautiful is this friends" LMAO

[@luxluth]

I'm gonna make a new js framework now

[@JoyofCodeDev]

I kind of want to explore that

[@ckafrouni]

@@JoyofCodeDev Please do 🙏, I tried a while back, but I couldn't get far enough...

[@Sammi84]

I feel like the only additional thing you need when you have signals is a render html template function. Your "components" are then just wrapper functions like in Solid.

[@fengli5833]

Nice explantion, It looks like a variant of rxjs.

[@thantko20]

Amazing video!

[@glebkresh]

Nice video, thanks for explaining Signals. I still have few questions, as and an approach Signals has long story(from 60s) why implementation popped only nowadays? What feature of JS making Signals to become so popular? And about effects functions, it looks to me that they might have a pitfall of overwriting each other. Is there any way to combine them together and monitor changes done with Signals across whole app?

[@JoyofCodeDev]

it's probably due to ergonomics and performance concerns because most frameworks that implement signals wrap them in some way to improve the developer experience

[@zo2ahy]

What happens if you count.value++ inside of an effect?...

[@SRG-Learn-Code]

Brilliant.

[@Gatakari_manoj]

I am a noob just finished learning html,css tailwind and javascript now i want to learn a framework and didnt find good tutorials on svelte 5 pls make a beginners tutorial

[@wlvh42]

Good video, but the way you use a global variable called subscriber seems a bit dangerous to me. Does this work well just because JavaScript is single-threaded and no more than one use effect can run at the same time?

[@herosova]

yes i will surely implement this as i hate any js framework

[@thedelanyo]

7:34 I guess we need a banana Svelte library 😅😅

[@ba8e]

Svelnana hype!

[@ariefnurandono9917]

is that mean we can add signal without upgrade to svelte 5?

[@daleryanaldover6545]

basically yes, runes are just compiler specific and just transform runes into signals during runtime or build.

[@SeoFernando]

You can technically use preact signals in svelte (not that you should, but you can)

[@chanandlerbong6176]

Can I use this simple functions in production?

[@daleryanaldover6545]

Yes, this is what frameworks like Svelte (upcoming runes) and Solid uses.

[@jamesm4957]

angular v18 uses also signals(), computed() and effect()

[@JoyofCodeDev]

you can use preact signals

[@blacklistnr1]

signals are nice in theory but debugging them is a pain, there really needs to be some timeline & dependency graph

[@LetrixAR]

But why wasn't this being used until recently?

[@JoyofCodeDev]

I think it was always used in other frameworks under different names but it was never the focus of discussion I think until the component model won and people realized they're great for making user interfaces

[@vaisakh_km]

​​@@JoyofCodeDev i resently learned and made some pyqt applications, and qt uses signels from by default for widgets, but i have noticed as application grows, using signels becoming tedius, and i had to use M-V arch., which complex enough to bang head against desk for several days that time i understood why web become soo popular.. webdev is sooo easy than making a basic app in desktop app frameworks (atleast qt)

[@svenvanderheide75]

👏🏼👏🏼

[@madukomablessed4712]

First person, first view (Vue)🤝🏿

[@xpynim]

wow