Tangle is a JavaScript library for creating reactive documents. | Hacker News Reader

Tangle is a JavaScript library for creating reactive documents.

worrydream.com

440 pointsjsavimbi62 comments

My first thought was "this is pretty cool!" but wondering who actually needs it. I then had the realization that this is, in fact, a very different way of data expression. It would force you to think not only about what you are saying, but how you are saying it and how to demonstrate the ideas within the text of the document itself and not simply say "Refer to fig 1.1". This could truly present a new way of displaying data on the web. It could bridge the gap between complex animations and simple text. 99.9% of all sites I see that contain some cool animation are completely independent of the content surrounding them. Having the content and interactions married together in a simple way is really something I've not seen too often. Kudos.

Yes, thanks for putting your thoughts into words. When I first saw this I just "felt" it was pretty cool, but couldn't really explain why.

As a numbers geek one of my pet peeves is that people all too rarely play out different scenarios to help the reader gain an understanding of the underlying model/data/relationships/etc.

Now some sites do this well (e.g. OKCupid's blog), but there is still a disconnect between text and data display. The reader has to play with the graph itself and that does create a bit of a cognitive fracture that I think subtly inhibits a better understanding.

So must of us are quite familiar with reactive programming, we just don't realize it. Anytime you've ever made an excel spreadsheet, with functions, you've done reactive programming. Seeing that the spreadsheet is one of the few areas where nonprogammers actually program, I'm hoping that as we better understand reactive programming we'll be able to expose it's power to general users.

For more information on functional reactive programming, I'd recommend looking at FlapJax and FatherTime

Another cool experiment with the graph example given there: http://worrydream.com/ExplorableExplanations/ — go down to the guitar icon (or find "incidentally" on the page).

I missed it the first time. Very cool, thanks for pointing it out.

If you missed it, Bret Victor also uses this profusely in Up and Down the Ladder of Abstraction (http://worrydream.com/LadderOfAbstraction/). Regardless of his use of Tangle, it's a great guide that definitely merits a thoughtful read.

I think we discussed the original mockup of this here: http://worrydream.com/ScrubbingCalculator/

It's interesting (for me, anyway) to contrast this with Wolfram's Computable Document Format (CDF, see http://www.wolfram.com/cdf/ ).

CDF documents can only be written using Mathematica, are only playable using a special CDF Player (or Mathematica), and you have to license CDF for commercial use. Tangle is free and open source (under an MIT License), JS is "playable" in most web browsers, and JS can be written using any text editor.

While I agree with the comparison, it would be unfair to not point out the wealth of functions that Mathematica exposes:

http://reference.wolfram.com/mathematica/guide/Mathematica.h...

Good point! I wonder how much of Mathematica's functionality can be bundled into stand-alone CDF documents (playable by the CDF Player).

Wolfram|Alpha has an API that can be called using JavaScript (for a fee), so some mixed solution is also worth considering.

This is one of the ideas I'm working on integrating into my toy data/programming language, Fern. https://github.com/andrewf/fern. It's not apparent from the README, but if you modify a Fern structure in memory, all dependent values will (should) be updated, even with name references pointing back up the hierarchy of data structures. These are mostly lists and maps (which define names for subsidiary structures), which can be generated by constructs like conditionals, functions, and (someday) loops.

Besides the ideas I listed, I see it being used in scenarios where you have formulas based on a few inputs, and want to see what the output looks like when you mess with stuff, like physical dimensions in a design or financial stuff.

It's nice to have a real term for this sort of thing in "reactive document" or "reactive programming" or what have you. Not so nice to realize my idea isn't unique and brilliant. :)

How does this work? Is it simply a shit ton of Observers?

Basically, a dirty flag that is checked every time you try to read a value. More specifically, each object has a self.value attribute that serves as a cache of the object's content. When it is notified that something has changed, it deletes the value. When you access it, it recomputes itself from scratch, taking advantage of caches of subobjects where possible.

You can see most of the logic in fern.ast.node.Node. self.refresh_impl is supposed to set self.value in a way appropriate to the subclass, and the Node functions handle the rest.

This is actually a pain to debug, especially with lots of nested scopes, but it seems to me like the evaluation should be lazy, rather than changing one object potentially re-computing the entire tree when you only cared about one part. You can call .refresh() on it manually if you need to get the computation out of the way.

It sounds like Cells or the Trellis.

What "Cells" are you talking about? Trellis looks cool; thanks for the tip.

The original one was http://common-lisp.net/project/cells/. You may also be interested in http://en.wikipedia.org/wiki/Reactive_programming and http://en.wikipedia.org/wiki/Dataflow_programming.

Yes indeed. Thank you.

Sounds a bit like what they in .NET, especially WPF, call DataBinding? I.e a control can display a mirror of a variable/property without much manual intervention.

They're similar, but I think Fern takes a pretty different perspective.

What's the difference between "reactive" and "interactive"? Just wondering if we really need a new buzzword...

I think "Reactive" refers to Reactive Programming where the display values change automatically when the input values change without the programmer having to explicitly set them.

Ah. Thanks... that explains.

Second michaels' reply. I encountered the term in my compilers class in college, so I don't think it's that new.

This looks neat. Definitely worth a look for some educational stuff.

It's not clear on the webpage but this was released under a MIT license

If you jump into the [code itself](https://github.com/worrydream/Tangle/blob/master/TangleKit/T...) it mentions that it is MIT licensed.

The graph is neat...I worry that the link is a UI paradigm that my mom or dad simply wouldn't grok though...I'm not a particularly good son and I don't talk to them much...so does anyone wanna test my theory out?

It certainly breaks UI expectations. Maybe arrows above and below the number?

Slider inputs would work better.

Also for me, I first didn't get it (at least with those adjustable values in the text). But the graph is very cool! Some UI improvements and I think it's ready for mom/dad use ;)

This is a specific document use of reactive programming, a paradigm where values are automatically updated when their dependencies change. Flapjax has offered reactive javascript for a long time now: http://www.flapjax-lang.org/

I think Flapjax didn't gain much traction largely because the website is ugly. Of course the the other reason is that regular event binding tends to be a good enough solution.

Some of the new client-side javascript solutions like knockout.js also offer reactive capabilities.

Take a peek at all of the author's projects [1]. It's amazing, humbling, depressing...

[1] http://worrydream.com/

Interesting, his idea about interactive pictures is what was my initial frustration with programming. "Why can't I just make that stuff go?"

If you are into games, a solution to interactive picture generation by artists would be akin to a particle editor. You let them define a few parameters and valid ranges, then the artist supplies graphics in the right places: voila. A good looking animation. Now restrict the end user to a few well defined ranges of these parameters as well and you have an interactive picture.

Clicked on the subtitle "purveyor of impossible dreams" shown below his name "BRET VICTOR" till I had a `screenquake`. Cool!

have I been missing something or this brakes every accessibility rules? how can I "slide" without a mouse? It seems I can't even tab to the sliding enabled elements.

It works perfectly fine on my android phone.

indeed, but I couldn't find a way to make the sliders work without touching the mouse. maybe there are some keyboard shortcuts that I couldn't find. also I believe you should be able to tab over the page to reach any input element, for consistency.

I can't even scroll his main website[1] with the keyboard if I enable Javascript. Thankfully it degrades nicely without the latter.

[1]: http://worrydream.com/

Sliding the numbers isn't the interesting part (I agree, it is horrible from an accessibility perspective). The interesting part is the automatic updates.

Of course, if you can't slap your own UI (or there aren't better UI's), then that's problematic. Given the author's other work, though, I don't think that is a problem.

Very cool! This makes for some interesting UI ideas. Also, it's not often that you see something this unique in the land of JS plugins. Good work.

If you like explanations like these, maybe you'll like the live explanation of the Burrows-Wheeler Transform that I wrote a few years back: http://canonical.org/~kragen/sw/bwt.html

I keep meaning to put it on the back of a better library so that it doesn't hang up the page if you type a too-long string.

I immediately find this useful. An app I am working on for a client allows for the preparation, setup and intake of candidate interviewees. The app has a few tools that help the administrator predict how many stations or interviewers will be required based on other parameters, like time it will take to conduct the interview process.

Impressive. It would be really neat if you could tie a variable to an external input (say, a WebSocket connection retrieving real-time data). Is the only way to adjust values user input, or could I do something more complex where real-time data is coming in and the document reacts to that as well?

Similar library from MS : RxJS:

http://channel9.msdn.com/Events/MIX/MIX11/HTM07

It's available for the CLR as well:

http://msdn.microsoft.com/en-us/data/gg577609

Interesting: HN's duplicated post detection seems to be disabled (this was posted only 9 days ago: http://news.ycombinator.com/item?id=3101618)

Funny how this submission got more attention than the one 9 days ago.

I think it allows reposting after a certain amount of time. I think this actually makes sense, because just because people missed it the first time doesn't mean it's not interesting.

Pretty cool. I will definitely use it in my projects. Thanks for sharing.

This wasn't really impressive to me until I started playing around with the dual pole filter. Awesome! Something like this should have been directly embedded in my prof's DSP lecture notes.

Nice, a dependency graph library for JavaScript. I wrote something similar for Clojure: https://github.com/gcv/dgraph

This is absolutely brilliant for educational uses. Even the front-page filter example is something I plan to suggest to my prof for the DSP class he teaches.

I'd like to suggest that in the case of audio, adding the ability to experience changes aurally in addition to visually.

That page does allow you hear the changes. See the toggle-switch next to the picture of the guitar.

"That page..." - which?

Turn on the guitar then go back up to the graph and change it. As you drag you hear its effect on the audio.

The page linked by the headline? I see no guitar on that page.

EDIT: So now I see markbao's comment[1] referencing a page[2] with a guitar on it. His comment was not in the top of my window when I was perusing earlier. In this thread of comments, there is no reference directly to the Explorable Explanations page, thus I was wondering when my sanity plummeted (since there's no guitar icon on the Tangle page).

While the Explorable Explanations page is darn nifty, in my original comment I did not clearly communicate my actual intent. To clarify: If Dr. Prof. will be incorporating such things into his lectures and course media, I suggest that he also provide the reactive aural experience to reinforce the material.

[1] http://news.ycombinator.com/item?id=3140241 [2] http://worrydream.com/ExplorableExplanations/

This is pretty cool but it needs to have a more distinctive style. Maybe the same as it is but green.

Any pointers to how it could be tied to a back-end rules engine?

Awesome, can you output to .pdf?

This is a really awesome idea

It seems to me that this would be a good tool to use in an attempt at the following code challenge, where Wikipedia would like to see article changes and trends visualized. I saw their challenge yesterday, and made a note of it, but am too busy on other projects, so I'm just putting the idea out there. Why not make Wikipedia articles visually reactive?

http://mediawiki.org/wiki/October_2011_Coding_Challenge/Real...

This could be really useful in an app that helps people control their finances (Register a product/service and then slide the quantity and price... and if you integrate it with wallmart products/price -or something like that- i think it would be one hell of an app)

edit: typo

Chrome dev tools should this type of UI in their CSS editor.

Reply on news.ycombinator.com