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.

Tangle is a JavaScript library for creating reactive documents.

440 pointsby jsavimbiover 13 years ago

27 comments

methodinover 13 years ago
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.
评论 #3141776 未加载
评论 #3140491 未加载
markbaoover 13 years ago
Another cool experiment with the graph example given there: <a href="http://worrydream.com/ExplorableExplanations/" rel="nofollow">http://worrydream.com/ExplorableExplanations/</a> — go down to the guitar icon (or find "incidentally" on the page).
评论 #3140828 未加载
评论 #3140364 未加载
评论 #3140829 未加载
troymcover 13 years ago
It's interesting (for me, anyway) to contrast this with Wolfram's Computable Document Format (CDF, see <a href="http://www.wolfram.com/cdf/" rel="nofollow">http://www.wolfram.com/cdf/</a> ).<p>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.
评论 #3141073 未加载
andrewflnrover 13 years ago
This is one of the ideas I'm working on integrating into my toy data/programming language, Fern. <a href="https://github.com/andrewf/fern" rel="nofollow">https://github.com/andrewf/fern</a>. 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.<p>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.<p>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. :)
评论 #3143279 未加载
评论 #3142652 未加载
评论 #3143049 未加载
mcantelonover 13 years ago
What's the difference between "reactive" and "interactive"? Just wondering if we really need a new buzzword...
评论 #3140354 未加载
评论 #3140382 未加载
desigoonerover 13 years ago
This looks neat. Definitely worth a look for some educational stuff.<p>It's not clear on the webpage but this was released under a MIT license
评论 #3140182 未加载
latchover 13 years ago
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?
评论 #3140383 未加载
评论 #3140472 未加载
gregwebsover 13 years ago
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: <a href="http://www.flapjax-lang.org/" rel="nofollow">http://www.flapjax-lang.org/</a><p>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.<p>Some of the new client-side javascript solutions like knockout.js also offer reactive capabilities.
ez77over 13 years ago
Take a peek at all of the author's projects [1]. It's amazing, humbling, depressing...<p>[1] <a href="http://worrydream.com/" rel="nofollow">http://worrydream.com/</a>
评论 #3141760 未加载
评论 #3142886 未加载
gabrieleover 13 years ago
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.
评论 #3141817 未加载
评论 #3140816 未加载
hackDailyover 13 years ago
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.
kragenover 13 years ago
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: <a href="http://canonical.org/~kragen/sw/bwt.html" rel="nofollow">http://canonical.org/~kragen/sw/bwt.html</a><p>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.
tomlinover 13 years ago
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.
fomojolaover 13 years ago
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?
balakkover 13 years ago
Similar library from MS : RxJS:<p><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM07" rel="nofollow">http://channel9.msdn.com/Events/MIX/MIX11/HTM07</a><p>It's available for the CLR as well:<p><a href="http://msdn.microsoft.com/en-us/data/gg577609" rel="nofollow">http://msdn.microsoft.com/en-us/data/gg577609</a>
DanielRibeiroover 13 years ago
Interesting: HN's duplicated post detection seems to be disabled (this was posted only 9 days ago: <a href="http://news.ycombinator.com/item?id=3101618" rel="nofollow">http://news.ycombinator.com/item?id=3101618</a>)
评论 #3141006 未加载
评论 #3141000 未加载
maxwinover 13 years ago
Pretty cool. I will definitely use it in my projects. Thanks for sharing.
hanskuderover 13 years ago
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.
gcvover 13 years ago
Nice, a dependency graph library for JavaScript. I wrote something similar for Clojure: <a href="https://github.com/gcv/dgraph" rel="nofollow">https://github.com/gcv/dgraph</a>
radarsat1over 13 years ago
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.
评论 #3140340 未加载
zxwover 13 years ago
This is pretty cool but it needs to have a more distinctive style. Maybe the same as it is but green.
tamersalamaover 13 years ago
Any pointers to how it could be tied to a back-end rules engine?
hollandaiseover 13 years ago
Awesome, can you output to .pdf?
guyhtover 13 years ago
This is a really awesome idea
ThaddeusQuay2over 13 years ago
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?<p><a href="http://mediawiki.org/wiki/October_2011_Coding_Challenge/Real-Time" rel="nofollow">http://mediawiki.org/wiki/October_2011_Coding_Challenge/Real...</a>
jQueryIsAwesomeover 13 years ago
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)<p>edit: typo
crizCraigover 13 years ago
Chrome dev tools should this type of UI in their CSS editor.