TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Poor man's signals – tiny vanilla JavaScript signals implementation

39 pointsby Joeri9 months ago

16 comments

atoav8 months ago
Maybe it is just me, but the examples that should show up in the boxes are just blank, white areas.<p>Firefox on Android
评论 #41445043 未加载
评论 #41444064 未加载
评论 #41443829 未加载
hbbio8 months ago
Take it any you want, as _signals_ or something else, what has been lacking in the JavaScript world and reimplemented many times is... functional reactive programming!<p>Our own take on this is <a href="https:&#x2F;&#x2F;github.com&#x2F;okcontract&#x2F;cells">https:&#x2F;&#x2F;github.com&#x2F;okcontract&#x2F;cells</a> where we try to stick as close as possible to the spreadsheet analogy. We&#x27;re using it to build a very complex web app and it&#x27;s doing marvels.
评论 #41444697 未加载
评论 #41444635 未加载
评论 #41443888 未加载
评论 #41444398 未加载
评论 #41444150 未加载
rahkiin8 months ago
This is not entirely like the original signals, but using event emitters instead.<p>I found <a href="https:&#x2F;&#x2F;dev.to&#x2F;ryansolid&#x2F;building-a-reactive-library-from-scratch-1i0p" rel="nofollow">https:&#x2F;&#x2F;dev.to&#x2F;ryansolid&#x2F;building-a-reactive-library-from-sc...</a> to be a much better ‘from scratch’ example. This is by the maker of SolidJS
seumars8 months ago
Isn&#x27;t this just an implementation of the Observable pattern? IIRC the difference between observables and signals is that signals don&#x27;t recompute the value unless any of its sources change, by using a dependency graph. Also, .effect() is just what used to be called .subscribe() in knockout.js and others.
评论 #41444106 未加载
评论 #41444516 未加载
xnorswap8 months ago
Isn&#x27;t this where we were 15 years ago with knockout observables?
kirillrogovoy8 months ago
While not 100% same thing, I&#x27;ve been a happy user of nanostores to manage state in vanilla JS.<p>It has `computed` too which works very similarly. On top of that, it has integrations with front-end frameworks such as React.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nanostores&#x2F;nanostores">https:&#x2F;&#x2F;github.com&#x2F;nanostores&#x2F;nanostores</a>
评论 #41451656 未加载
fabiospampinato8 months ago
This seems a bit different from the kind of signals frameworks have, where dependencies are tracked automatically (no dependency array), and you can sort of chain stuff automatically, so for example you can have an effect that depends on 3 memos that depend on 4 signals or whatever else, and you never experience non-fresh values.<p>If you want to look a bit deeper into this I had written another sort of toy implementation that much more closely resembles what the frameworks are actually doing: <a href="https:&#x2F;&#x2F;github.com&#x2F;fabiospampinato&#x2F;flimsy">https:&#x2F;&#x2F;github.com&#x2F;fabiospampinato&#x2F;flimsy</a>
soulofmischief8 months ago
Nice! I recommend checking out mithril&#x2F;stream [0], it&#x27;s framework-agnostic and quite small but comes with your standard map&#x2F;lift&#x2F;etc. Does everything you need and with a standard, flexible interface.<p>I think the code itself is messy and outdated ES5, so I rewrote it in TypeScript and made some improvements to QOL, clarity and performance and use that package liberally across a lot of codebases. I&#x27;ll post it here sometime whenever I push it to GitHub.<p>[0] <a href="https:&#x2F;&#x2F;mithril.js.org&#x2F;stream.html" rel="nofollow">https:&#x2F;&#x2F;mithril.js.org&#x2F;stream.html</a>
FjordWarden8 months ago
Ok, the EventTarget is a very cute trick and I haven&#x27;t thought much about implementing signals this way. However, all &quot;serious&quot; signal libraries have at least computed (higher order signals), and a way to sample a value, meaning get the value from a signal without triggering its effects, and no you can&#x27;t just call foo.value because this won&#x27;t work with computed signals, and a way to batch multiple write calls to multiple signals, which is often implemented by swapping the effects in and out of the update phase of the signal.
评论 #41444467 未加载
评论 #41444428 未加载
austin-cheney8 months ago
I really don’t see the point. All changes come from events whether user, system, or network events. All you need is event handlers, which is obviously already there at the lowest level.<p>The rest of the stuff the article mentions like rerendering and DOM diffing are all extremely inefficient framework nonsense that is entirely unnecessary.<p>So, to achieve the desired result be event oriented in everything you do, keep things simple, and don’t let framework nonsense distract from common sense.
kwhitefoot8 months ago
Why do I have to disable uBlock Origin to make this work?
pwdisswordfishz8 months ago
&gt; In case you&#x27;ve been living under a rock, here&#x27;s the example from Preact&#x27;s documentation that neatly summarizes what signals do:<p>&gt; [blank box]<p>Okay, very cool
jitl8 months ago
It takes like 1 more example to actually have “signals” that automatically wire up dependencies between computed() and signal(). Without that, what’s the point?<p>Rich man’s signals provide a really interesting way to structure incremental computation, sometimes called “self-adjusting computation”, without manual book-keeping elbow-grease from the programmer. Ideally, one can use signals as containers for the inputs to your program and receive a program that automatically does the minimal possible re-computation when a signal changes.<p>Without that, “poor man’s signals” is just “stores” from React’s 2014 era.
tobyhinloopen8 months ago
new keyword is out of fashion? Why?
评论 #41444166 未加载
cynerx8 months ago
Examples don&#x27;t work with AdBlock enabled—you have to disable it. Even after doing so, parts of the snippets are blurry and illegible.
评论 #41444437 未加载
SkiFire138 months ago
FYI reading this on Firefox for Android and no example except the very last one renders
评论 #41444266 未加载
评论 #41444383 未加载