Signals, the push-pull based algorithm

(willybrauner.com)

48 points | by mpweiher 2 days ago

8 comments

  • noelwelsh 1 hour ago
    Overall, very nice article. A few notes:

    * I think the first implementation in JS land was Flapjax, which was around 2008: https://www.flapjax-lang.org/publications/

    * The article didn't discuss glitch-freedom, which I think is fairly important.

    • willybrauner 23 minutes ago
      I didn't know about Flapjax, thanks I'll check it out. Glitch-freedom is indeed a gap in this article. I focused on the signal algorithm exclusively without some implementation optimisation like batching updates; there is so much more to cover! Maybe in a next one, Thanks!
    • HumanOstrich 59 minutes ago
      After wondering what the heck glitch-freedom is and learning about it, I agree with you. It seems like it deserves at least a brief explanation in an article about how signals work.

      I've gone with the universal `alien-signals` package for my project (which doesn't use a frontend framework that includes signals). They show benchmarks of being by far the fastest and have strict limits on code complexity. Those limits are also supposed to avoid glitches by design, and now at least some of that is tested[1].

      [1]: https://github.com/stackblitz/alien-signals/pull/39

  • fabianholzer 2 hours ago
    I do not want to distract from the content of the article, which is highly relevant for folks who built UIs with frameworks that are conceptually based on signals, but the way that the reading experience is designed really great, in particular the guided reading flow through the instructive code path is something that I rarely have seen done at all, and this even works pretty well on mobile. It's a delightful reminder on how a dynamic medium can be more than the simulation of print on screens.
    • willybrauner 59 minutes ago
      I searched for the "right way" to explain this algorithm, and ultimately parsing the code was the clearest for me. This isn't always true; sometimes a graph or an interactive module has more impact; it really depends on the topic. Thanks for the feedback.
  • cloogshicer 1 hour ago
    What an amazing article. I really like the presentation of text scrolling together with the code. Wonder how this is done under the hood.
    • willybrauner 1 hour ago
      Thanks a lot! The left column containing the text is sticky, The right column is absolute and translate on Y and depend on an intersection observer triggered by each scroll section from the left.
  • cmacleod4 1 hour ago
    Nice presentation, looks like the same thing I implemented in Tcl here: https://wiki.tcl-lang.org/page/ReacTcl :-)
  • rienbdj 1 hour ago
    Sodium (and the book that goes with it) is a great resource too https://github.com/SodiumFRP/sodium
  • danieltanfh95 2 hours ago
    How is error handling expected to happen here?
    • tcfhgj 2 hours ago
      Result<T> should work
      • ramon156 1 hour ago
        I love this pattern, but I always felt like squeezing idiom B into idiom A when doing this in e.g. TS. I never tried effect-ts, so maybe I'm missing out. Anyone have experience in this?
    • nothinkjustai 1 hour ago
      try-catch
  • Tade0 0 minutes ago
    [dead]
  • Morpheus_Matrix 1 hour ago
    [dead]