Evolution of Signals in JavaScript

Recorded live on twitch, GET IN
/ theprimeagen
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact

[@AwkworldStudios]

Can we just take a moment to appreciate Ryan. He is an amazing developer, great communicator, and still humble. I want to be like him when I grow up

[@TankorSmash]

Who's Ryan?

[@AwkworldStudios]

@@TankorSmash Ryan Carniato, the creator of Solid JS

[@mannycalavera121]

​@@TankorSmashJDSL

[@ykhi]

amazing man

[@surferriness]

I want to be like Tom when I grow up

[@edz8659]

Chat to signals in ur area

[@struggopuggo]

Blazingly hot signals I hope

[@blackpurple9163]

​@@struggopuggois there any glitch where I get 2 for the cost of 1??

[@blue5659]

JDSL had signals right from the beginning. Tom is a genious

[@phoenix-tt]

I am working on a Vue compiler implementation in Rust (as a side project). It's really cool to get a deep-dive of how reactivity works and how to keep VDOM-based approach performant. Another point the core team is working on is a pure signals implementation, very similar to what Solid is doing. Very excited the framework is not stagnant

[@nixoncode]

my team hasn't migrated to vue3 yet, good on you on the compiler 😊

[@blue5659]

Hello my friend. I am working on a fork of surma 's jsxx compiler for javascript, written in rust

[@rsdyeahh]

Just to note, Newton was the president of Royal Society, which conduct the investigations about the Calculus creation and decide that Newton was the true inventor. So, not really as a judge in court, but as the president of the entity which could decided.

[@paxdriver]

You know what came first though? Flash movieclips had their own timelines. They were containers with their own timelines (render cycles) and states. Flash 5 specifically had everything we call new today.

[@aleksazivanovic1539]

The thing with react not wanting to change it’s mental model is that in their current mental model UI is function of state and therefore re-rendering is mandatory and you cannot simply introduce signals without changing what is considered as fundamentals of react.

[@aleksazivanovic1539]

Even though I like signal and think of it as a better approach for debugging and performance

[@heroe1486]

​​​@@aleksazivanovic1539 While they have no problem introducing oddities like RSC or have their core devs say that "if you use React to build apps you should use framework" although react "fundamentals" have always been that it's an unopinionated library that only does few things. And also had no problem switching the entire ecosystem to hooks few years ago. Doesn't seem like stability and strong principles are their priorities

[@aleksazivanovic1539]

@@heroe1486 Well, must I must agree with what you said😅

[@usercl3ev2pt1b]

Rerender everything when a single node is changed is wrong for ui dev. Ui is not at all about state management, also motion, gesture, animation so 'rerender everything' simply wont work

[@Ring0--]

Godamnit Prime. LET ME SLEEP!

[@leftyhero147]

Tbh, I remember learning about signals in the electronics classes and also learning about it when I was learning Qt (C++). To me it felt very natural and effective as a solution both in electronics and UI Development. When I learned about Observables and Subscribers in JS I thought that it was the same thing but with some innovation that I wasn't aware of. Looking to this whole comeback of signals in JS makes me feel like the whole ecosystem was a massive MacGyverization all the time, and we just to ended up with the true solution (that already existed). I think that to me this whole story speaks loudly about how bad javascript is and makes me think that probably we wasted the last decades trying to work around the limitations of it.

[@SimonBuchanNz]

It's pretty misleading to compare Qt signals and slots to eg SolidJS: there's not really much in common other than the name and that they cause UI updates. Qt signals are basically just JavaScript events (which aren't really like Qt's events, confusingly), something it's had since day one in 1995 (the same year as the first Qt!) The reason people are excited about signals in JS now isn't that you can run code when something changes, it's that the implementing runtime makes it trivial to define and use them, and to create derived state that is also trivial to use, and there's no need to connect and disconnect, it's all implicit where is being used, and you don't need to worry about reentry or dependency loops because the updates are always scheduled rather than synchronous. Basically the entire need for anything other than the obviously needed "show this" and "do that" code just vanishes into the runtime.

[@chaos_monster]

Qt Signal/Slot Pattern was also what I was thinking of first but it is not the same

[@christianm4906]

Qt Signals and Slots are just another implementation of the Observer design pattern, something that has existed from the beginning and has proven to work well. I don't understand why the web industry didn't favor this pattern in all its UI frameworks and libraries. It feels like a complete waste of time having to spend so many hours dealing with the painful React.js rendering approach, only to realize that it really sucks.

[@MichaelLazarski]

Fun fact: I wrote my Bachelor Thesis about Meteor. Still one of the best frameworks which I don't use at all.

[@abuk95]

How does this front-end Signals concept compare to Qt's signals? Is it the same thing? How do they differ?

[@danielvaughn4551]

I'm also obsessed with tools but I also love the frontend. I'm creating a website builder that's primarily keyboard-focused. It's like vim for web designers lol.

[@Milky____]

That sounds fking amazing let us know the name would love to check it out one day!

[@danielvaughn4551]

@@Milky____ will do!

[@andythedishwasher1117]

This interpretation of the signals concept is the reason Solid JS was the only JS framework in which I succeeded at creating an editable JSON tree on the front end. Maybe I just suck at JS, but the state management issues felt pretty insurmountable without getters and setters.

[@cmelgarejo]

18:00 * hides account with over 100k karma, walks to the back, whistling *

[@mfpears]

23:30 Observables aren't supposed to abstract away reactivity. They're supposed to make you write your code less like a pile of garbage. That's a good "leak"

[@jaysistar2711]

Meteor isn't hard to reason about, but there's not any isolating documentation. (Meaning docs that just explain 1 part in detail without other parts.) SolidJS signals and Leptos signals do about the same thing, but they added a "collection" concept which has a MongoDB like interface (on the client side).

[@ShadowKestrel]

Something more important to look at is the Evolution of Signals in JDSL. To see how it has changed over time, we'll look through the SVN... oh no, I broke JDSL. Tom is too much of a genius for me 😔

[@andythedishwasher1117]

I feel you on being a tool guy. I enjoy making stuff easier and faster, but I don't care so much making it pretty unless that serves the first two parameters. Trying to get into building no-code frameworks for front ends so that when we need front ends in our world of tool builders, we can just toss them together in a visual framework stocked with handles for the kind of internal tools that are being built frequently these days. Less consumer oriented, more engineer oriented.

[@derschutz4737]

Performance is not an advantage signals inherently have over a VDOM. A VDOM can be just as performant as signals (hence why dioxus is as fast as leptos).

[@ThePandaGuitar]

Experimented with SolidJS last year and I was impressed.

[@simonfarre4907]

I also love tool building. It's why I contribute to projects like GDB, RR etc. It's fun. Also, the guys who either are maintainers (GDB) and authors (RR) are just a vast ocean of expertise. They make me feel dumb, all the time (that's NOT their intention though), but boy you learn so much from the know how.

[@mrbigberd]

Elm went ALL the way down this rabbit hole. It was based on Evan's FRP thesis ideas about signals. Even when the whole language was designed around the concept, it wound up being dropped because of the issues around making them ergonomic, safe, and scalable. Elm ultimately dropped FRP.

[@dmitriylevy7865]

"you a call function, the function poops out the value, then changes it in the html" 19:48 "you want more details pooping out the value? go look at SolidJs" 20:40

[@qm3ster]

Does something already exist to attach RxJS (good for organizing my event/signal logic) to Solid.js signals for rendering?

[@fuzzy-02]

Im an undergraduate and I have no idea what Prime is saying most of the time, but damn do I have fun watching him. And I also feel smarter UwU

[@naranyala_dev]

great article, prime movement

[@laughingvampire7555]

those who thought on making bi-directional data binding never made their own mechanical keyboards or they never understood why you need to add diodes to a mechanical keyboard

[@huang47tw]

I also need to take a deep breath when seeing both sweetjs + rxjs

[@jamiebowers7484]

Plus one for Vue, especially version 3. I'd love to watch a "reaction video" of you trying Vue.

[@khhnator]

as someone who doesn't do webdev... i have no idea whats is being spoken about... is signals just like events?

[@quantum_dongle]

I use Meteor in prod... It's theoretically so good, but the actual usage of it quickly becomes spaghetti

[@abc123evoturbobonker]

Lol, YT recommends Bill Burr since I started watching you

[@Ring0--]

Bill Burr has his moments. But they can sound similar.

[@lukehightower4198]

And Ders' from Workaholics! You funny as hell mang

[@andythedishwasher1117]

I have to say SolidJS was pretty decidedly my best experience in the JS world, but I still don't have great feelings about the JS world.

[@legitjimmyjaylight8409]

You mean like signals and slots from QT?

[@Ring0--]

2 good seasons Yoshii

[@christianm4906]

Implementations of the Observer design pattern have existed since the beginning and have proven to work well while maintaining simplicity. A prime example is the Qt/C++ framework's signals/slots mechanism, which enables communication between classes without needing to know anything about their implementation. This is a true separation of concerns in practice. I don't understand why the web industry didn't favour this pattern in all its UI frameworks and libraries. It feels like a complete waste of time to spend so many hours dealing with the painful React.js rendering approach, only to realise that it really sucks. To clarify, I am not comparing SolidJS with Qt here, but rather expressing my preference for the simplicity and effectiveness of the Observer pattern as implemented in systems like Qt.

[@medilies]

West World is top-notch, every seasonh...

[@Ring0--]

I need either SD coffee or SD Xanax.

[@Yay295]

So it's events, but with a library abstraction tacked on top.

[@projectodemayhem]

"...JavaScript isn't the best language..." - Ryan Carniato

[@hamm8934]

Once I went Vue, I never left. Even svelte doesn’t feel too much easier than Vue. For me, Vue is that perfect balance. Also, being able to use Vue without a build step really is such an asset for integration and updating legacy stuff.

[@shrin210]

Whatever we chose we got comfortable with it For me it was React

[@jvoyager1]

Qt/PyQt, has been using signals/slots as well

[@W1ngSMC]

It's not the same thing.

[@_diversable_]

If you're interested in building tools for developers... what do you think dev tools could / might look like in 3D environments like the Apple Vision Pro ??

[@vishaldinesh]

That was me I'm the greek guy hey prime, and people do sometimes refer to me as The Greek God

[@gertrude1310]

You guys are talking like those frameworks invented the prefect data binding, yet almost a decade earlier the ActionScript Flex framework already had all this perfectly tuned. It feels like React, MobX etc are just going to end up converging to what was once....

[@ddomingo]

Personally, I saw react and thought “I still like jQuery more”. 2013 was a chaotic year for the frontend world, I didn’t get why any of these new frameworks/libraries were better than just plain old jQuery. I absolutely hated AngularJS. RxJS was very impressive, but it took me years to understand.

[@ThePrimeTimeagen]

hah, rxjs... dang i loved that one until i hated that one

[@naranyala_dev]

more article from hackernews!!!

[@PixelOutlaw]

There's probably a tasteful balance but I think they're getting pretty gross. Everything's starting to look like a Perl one liner.

[@laughingvampire7555]

Elm has had the reactivity with compiler long before all those people, long before Svelte, but your insistence on having familiar syntax makes lose of the best tools.

[@andythedishwasher1117]

I want to see Ryan write a front end framework in Mojo! That would totally be the future!

[@mfpears]

1:05 Imperative spaghetti is worse

[@Yutaro-Yoshii]

5:45 I would have appreciated a west world spoiler alert

[@Yutaro-Yoshii]

@@mattmurphy7030 now you got a like on your comment. I'm mad😂😂😂

[@k98killer]

I believe jQuery is properly pronounced "jackery". /s

[@codedusting]

Madhava of Kerela School of Mathematics, India. 200 years before either Newton or Leibneiz. Search for him. Then search for how Jesuit Priests stole that knowledge and brought it to the West. How it connects with Newton.

[@ea_naseer]

Greeks with Method of Exhaustion (integral calculus): 🍹🍹

[@notlessgrossman163]

Babylon had it before all that

[@fredguth1315]

Rodriguez? Leibniz?

[@danylo.s]

Why he does this "rwwrr" thing? What does it even mean?..

[@1Caja]

You aren't ready to know yet

[@kamehameha38]

You don't find it sexy?

[@TheNewton]

it's a joke/satire implying what was just said can have a sexy innuendo to it that would appeal to the humor a 13 year old would have but he has a 18+ audience that should be more mentally mature, but aren't. It's like waggling your eyebrows and saying "that's what she said" to any thing even if it banal😏.

[@hakuna_matata_hakuna]

devto markdown is doodoo

[@TheC3lso]

first (who cares in the end haha)

[@TheC3lso]

@@mattmurphy7030 Because why not? Nobody needs to care, it was cool to see the possibility and then doing it for the fun!

[@TheC3lso]

Well, you will get over it anyway

[@codestuff782]

I also care bro, go for it!

[@edz8659]

First

[@sandworm9528]

First! Ok people, if you see this comment and there's less than ten comments, you should also comment "first". As the actual first comment i officially give you permission

[@donnikitosCom]

I've been experimenting with signals as too. What do you guys think about @mutablejs/core?