
Tangle: a JavaScript library for reactive documents - bpierre
http://worrydream.com/Tangle/
======
memset
I remember seeing this several years ago, and was thoroughly impressed. The
gentleman who wrote this library used it in an interactive essay called
"Ladder of Abstraction." [1]

Here is its previous HN discussion: [2]

[1]
[http://worrydream.com/LadderOfAbstraction/](http://worrydream.com/LadderOfAbstraction/)
[2]
[https://news.ycombinator.com/item?id=3099595](https://news.ycombinator.com/item?id=3099595)

~~~
DavidChouinard
The gentleman who wrote it is Bret Victor. I _highly_ recommend this talk [1]
by him (500k views), he's a true visionary.

[1] [https://vimeo.com/36579366](https://vimeo.com/36579366)

~~~
kolodny
Just watched that talk... amazing. Do any of the tools that he uses in that
talk exist?

~~~
doorhammer
I believe LightTable [0] ran with some of the concepts in the video, and I
remember one of Chris Granger's videos having an almost identical bit about
mapping time over space in a ball/block jumping game and very similar themes.
Either way, it's definitely worth checking out. Sorry if I get any of the
details wrong, I'm a bit out of step with Clojure.

[0] An IDE that supports Clojure and Javascript right now, maybe Python soon?
Bit behind on the news:
[http://www.lighttable.com/](http://www.lighttable.com/)

------
lightcatcher
Although Bret Victor's ideas behind reactive documents are interesting, I
think the first example on this page (regarding the state parks) is
particularly unfriendly and difficult to gain any understanding from. My views
very closely aligns with (and was influenced by) Evan Miller's blog post [1]
on the top that I highly recommend you read. The overall gist is that
equations are actually the friendliest way to spread information about the
relationships between several (ie more than 3 or 4) variables.

The final paragraphs of Evan Miller's essay address this particular webpage
(the Tangle demo) in particular.

[1] [http://www.evanmiller.org/dont-kill-
math.html](http://www.evanmiller.org/dont-kill-math.html)

~~~
hsparikh
Have yet to go through Evan's post, but as you point out, the equations might
be the most accessible way to truly comprehend relationships between 4 or more
variables.

However, libraries like Tangle are powerful tools to visualize and understand
relationships between 2-3 variables.

~~~
dvt
Maybe visualize, but _understand_? Doubtful. I don't think the computational
overhead justifies a complex subsystem instead of just something like "x =
cos(theta)" without some fancy rotating control.

~~~
davorak
My take on the best way to write/use such a document would be first present
the math, then a reactive example. The user should read the math formulate a
hypothesis/visualization/understanding of the system then use the reactive
document to verify or falsify the concept.

This does not remove mathematical understanding from the document, but adds an
opportunity for quick verification of an understanding. And according to my
vague understanding of learning and neural connection getting quick feedback
is key to forming strong connections.

------
aroberge
After a previous discussion on HN, I used it as an experiment to visualize the
convergence of Fourier and Taylor series
[http://personnel.usainteanne.ca/aroberge/](http://personnel.usainteanne.ca/aroberge/)

I think it would be really neat to have an entire mathematical textbook
interactive in this fashion.

~~~
davewasmer
Just an FYI, but your choice of series colors for your graph are very
difficult to differentiate as a colorblind person. Might consider changing one
of the colors.

~~~
aroberge
Could you possibly check now? Also, there are two more interactive pages that
are "hidden":
[http://personnel.usainteanne.ca/aroberge/mirror.html](http://personnel.usainteanne.ca/aroberge/mirror.html)
and
[http://personnel.usainteanne.ca/aroberge/single_lens.html](http://personnel.usainteanne.ca/aroberge/single_lens.html)

------
WickyNilliams
I saw this a few years back and was seriously impressed with the idea, not
just as a JS library but the concept of interactive (or reactive as Brett
calls them) documents. This is where HTML should be going as a form of media,
armed with the question, "what can HTML do that other forms of media cannot?"

But a lot has changed since then - has this been superseded by client-side
libraries with two-way data binding? e.g. angular or knockout. It would
probably be quite trivial to duplicate the functionality in either of those
libraries.

~~~
RussianCow
If what you're looking for is exactly what the example on the website shows
(say, an interactive textbook), then I would just use Tangle because it's
ready to go without much effort on your part. But if you wanted more
flexibility, then of course you should use a move advanced library like
Angular.

~~~
jjsz
How long would you say it'll take for it to be implemented in AngularJS?

~~~
WickyNilliams
I don't think it would be a big ask. Dependency tracking/resolution and two-
way data binding is baked in, so you'd only have to create some ui components
(e.g. a slider) to allow for altering of the values and everything else would
just work. Though if you wanted to do it properly you'd probably encapsulate
the functionality in a directive of some sort.

------
hsparikh
We are wholly inspired by Bret's work, and are currently playing around with
the tangle library to help students visualize the concept of area, perimeter,
and volume. Here is a preview:
[http://tuvalabs.com/resources/area/](http://tuvalabs.com/resources/area/)

We also plan to open source this code in due time. Ignore the mess please.

~~~
bajsejohannes
A suggestion for the visual area widget: Count the boxes for the user. So in
the first box you'd write 1, the second 2, etc. Then it's easy to verify that
the numbers are indeed a counting (they increase by 1) and that the calculated
are indeed checks out.

I'd write the numbers in gray so they don't dominate the image.

~~~
hsparikh
Thanks for the feedback. There is a lot of work that still needs to be done to
improve the UI for these tools, but our goal is to build a library of such
visual tools for tens of relevant topics.

------
hcarvalhoalves
Stuff like this, that explores the document nature of HTML, should be standard
on the web, instead of the current crazy trend of reinventing desktop
applications in the browser.

------
pmtarantino
I can imagine this in the science books of the future. I usually check with a
few cases to see if I understand the subject correctly, but sometimes I have
enough samples to test.

This would be great: the student can see the default example, learn the
subject and then try to check if he understood it correctly seeing how it
behaves changing the parameters!

~~~
_delirium
In a physics course I took some years ago, we used Mathematica notebooks for
that. The professor had written out explanations of a few subjects we were
studying in the style of tutorial notes or a paper handout, but within
Mathematica so you could change the parameters and see updates in real time.

~~~
jjsz
So which one do you recommend for a first year CS student Mathematica or
Tangle?

~~~
thauck
At this point, I might argue for IPython Notebook.

~~~
jjsz
The question I was going to make has been asked here:
[http://stackoverflow.com/questions/17483271/is-there-a-
way-t...](http://stackoverflow.com/questions/17483271/is-there-a-way-to-
create-interactive-plots-a-la-d3-in-ipython-notebooks)

------
kozhevnikov
Bar the obvious use in scientific texts I can imagine this being useful in
client facing data-driven BDD tests, i.e. tools like Concordion [1], FitNesse
[2], etc.

[1] [http://www.concordion.org/](http://www.concordion.org/) [2]
[http://fitnesse.org/](http://fitnesse.org/)

------
nilkn
This is a cool implementation, but the idea is not new. In fact, the majority
of front-end JavaScript libraries right now are more or less aiming to do the
same thing in their own way: AngularJS, Meteor, Ember, KnockoutJS, Bacon ...
even d3js. The list goes on. These are all attempts at implementing reactive
programming in the web, but they have different data and data binding models,
and they may have different front-end goals (e.g., Ember tries to keep a 1-1
correspondence between document state and URLs).

There's also Elm, which implements a variant of reactive programming known as
FRP.

~~~
hcarvalhoalves
I don't think AngularJS, Meteor or Ember are close to this though. The result
might be the same, depending on the use case, but the philosophy isn't.

AngularJS for instance looks like more about components and data-binding
(makes me remember the old Delphi days) in an attempt to use the browser as an
application framework than "interactive documents".

~~~
nilkn
Those libraries are ultimately just more sophisticated versions of this on a
bigger scale. Meteor in particular takes reactivity to a whole new level:
changes are propagated immediately not only to you but to other users as well
(if appropriate to the application, e.g., a chat room). The philosophy is more
or less the same in all cases: make the page react immediately to what the
user is doing without a full refresh. Some of those libraries take it further
and tie the page directly to the application back-end or database if desired.

I think the main appeal of something like Tangle is to get the benefits of
reactive programming while using only a very lightweight and simple library.
It provides a very clean interface to a subset of the functionality.

------
dylanhassinger
Neat but Knockout.js does this really well, seems to be getting more traction
these days.

[http://knockoutjs.com](http://knockoutjs.com)

------
bpierre
The GitHub repo
[https://github.com/worrydream/Tangle](https://github.com/worrydream/Tangle)

------
nkuttler
This looks very interesting even if I can't think of a use case yet. It would
be nice to see a license file though.

~~~
lccarrasco
Yes, a quick check through the source files indicates a MIT License, though
it'd be better if it was made clear in a LICENSE file.

This project looks great, I hope it takes off.

~~~
iso8859-1
It's a couple of years old... But at least Angular is taking off, which has
the same declarative principle...

------
emehrkay
This is very interesting. As an aside: MooTools doesn't get enough love in the
JS community. His Live Coding stuff was done with it
([http://www.youtube.com/watch?v=-QJytzcd7Wo](http://www.youtube.com/watch?v=-QJytzcd7Wo))

*it being MooTools and this library

------
fiatjaf
When I read this a year ago I was very impressed, but now I think (1) this was
superseeded by Angular and stuff alike and (2) this is not good user
experience, this is experience to experimenters, a restrict kind of user, very
restrict. For the common user maybe a simple chart is better.

------
emhart
I'm in the process of writing my first serious academic paper, and while I'll
still put the traditional document together, I think I'll try to make a second
version using tangle where appropriate. Very cool, thanks for pointing this
out.

------
angersock
Man, I would've loved something like this going through school--the final
example of the performance of an analog filter and watching the root-locus
plot change was really really cool.

------
Dirlewanger
Something like this is perfect update the horde of egregiously out-of-date
STEM examples littered across academics' websites that all look just like this
sans fancy JS.

------
arikrak
He has some great stuff on the site, and I'm thinking of using Tangle to help
teach math, but I'm wondering if letting people drag numbers is really so
helpful?

~~~
hrktb
For a mortgage simulation, or any kind of matrix type calculation, dragging
the numbers might be simpler and easier to understand than having a standard
form (even with seamless inline text input)

------
arms
Very cool. This is one of those things that makes me wonder "where can I use
this next?" Even more impressive is that this is apparently a few years old.

------
pallandt
Very neat, reminds me of Mathematica Notebooks.

------
pjmlp
Really nice.

Rediscovering Lisp and Smalltalk interactive environments.

~~~
iso8859-1
According to Bret in his "Inventing on Principle", a REPL is not enough
interactivity :P

~~~
pjmlp
Except the original Lisp and Smalltalk environments are much more than a
simple REPL.

Sometimes I wish people would learn about computing history.

Presentation from Kalman Reti about Lisp Machines, check the interactivity
starting at 00:44:00 and how to introduce mouse sensitive images at 01:00:00

[http://www.loper-os.org/?p=932](http://www.loper-os.org/?p=932)

Xerox presentations about Smalltalk-80

[http://www.youtube.com/watch?v=JLPiMl8XUKU](http://www.youtube.com/watch?v=JLPiMl8XUKU)

[http://www.youtube.com/watch?v=Cn4vC80Pv6Q](http://www.youtube.com/watch?v=Cn4vC80Pv6Q)

[http://www.youtube.com/watch?v=ODZBL80JPqw](http://www.youtube.com/watch?v=ODZBL80JPqw)

~~~
est
For me "more-than-REPL" just looks like a code visualization tool where you
can jump between symbolics. Mouse sensitive images looks just like a prototype
of AutoCAD

screenshot if anyone is interested.

[http://i.imgur.com/FjaDFgi.png](http://i.imgur.com/FjaDFgi.png)

[http://i.imgur.com/sGNN3la.png](http://i.imgur.com/sGNN3la.png)

Bret Victor's work is much, much more impressive, you can change variable
values and see results in _realtime_. In that Mario game example, you can see
Mario's trajectory and adjust values to see how physical parameters affect the
height and distance Mario can jump, and modify gravity ticking equation to see
Mario jump & walking up-side-down.

~~~
pjmlp
I am not saying his work is not great, far from it.

What I mean is that these ideas were already present in such environments.

The "more-than-REPL" stated by me, means that these environments allowed for
an interactive type of work that went further than a simple textual REPL.

Many young HN readers tend to associate REPL to the pure REPL textual version
they have access to, while using vi and emacs on their UNIX boxes.

------
likeclockwork
It seems like it'd be easy to rig this kind of thing up with Angular.

------
ppradhan
this is inspired! I like it.

