Tangle: a JavaScript library for reactive documents | Hacker News Reader

Tangle: a JavaScript library for reactive documents

worrydream.com

435 pointsbpierre70 comments

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/ [2] https://news.ycombinator.com/item?id=3099595

I thought this was a few years old as well but I'm happy to be reminded of it.

I really enjoyed this http://worrydream.com/#!/ExplorableExplanations

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

Also consider reading his seminal essay called "Magic Ink" [1] and afterwards take a look at the publication date and try to remember where the web was back then.

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

I have watched this video a few times and periodically revisit it. Sometimes we get to far into the woods and need to be reminded where we can go writing software.

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

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/

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

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.

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.

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.

Dijkstra wrote something (in the same vein, if not an exact topic-match) similar but a bit more strident in '85

http://www.cs.utexas.edu/users/EWD/transcriptions/EWD09xx/EW...

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/

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

There's at least one textbook based on Wolfram's proprietary CDF format.

http://www.wolfram.com/mathematica/customer-stories/developi...

(I like your visualization page – a nice way to explain that part of wavelet compression.)

Wow, you taught me something. I've heard of the "Fourier transform" many times and it never clicked what it was for.

Thanks!

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.

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

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.

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.

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

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.

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/

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

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.

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.

Does it work with touch? (I do not have a touch device)

The numbers should be draggable via touch.

They'd be quite small touch targets assuming you wanted to view the shape and calculation as you change them. Have you considered making the shapes resizable by dragging?

personally, I feel uncomfortable reading stuff like "If the width is 2 units and the height is 2 units, the area is 4 square units since 2 times 2 is 4". 2 plus 2 is 4 as well, yeah ? As also, 2 ^ 2 = 4 The area is 4 regardless of what 2 times 2 is, or 2 plus 2 is, or 2 raised to 2. I get your intent, but the phrasing is questionable pedagogy at best.

Definitely agree with you, and the phrasing will change as we improve the design of these pages. Thanks for the feedback!

I share your passion for revolutionizing math education, but I don't quite understand the attachment to "Common Core." Federal prescriptive nonsense is a huge obstacle for real innovation in education and outside of the need to make a sale I don't see why you'd limit yourselves.

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.

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!

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.

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

Pedagogy aside, Mathematica will serve them better from a 'other people use this' perspective over the years.

At this point, I might argue for IPython Notebook.

The question I was going to make has been asked here: http://stackoverflow.com/questions/17483271/is-there-a-way-t...

Precisely. In physics, testing extreme cases and boundary conditions is one of the first ways to get a better understanding of a system. Tangle can be a great tool to empower learners to do this visually.

I am currently working on interactive 2-d physics simulation in the browser with much the same ideas. On the desktop we have apps like KDE Step but I haven't found anything similar for the web.

Currently I have particles,disks and boxes working with gravitation, coulomb and custom-defined forces. I also implemented Runge-Kutta method of integration instead of horribly inaccurate Euler's method. You can manipulate the objects, their parameters and laws even while the simulation is running.

I need to add basic collision detection and things like springs, links, and linear/angular motors and embedding the simulation as a widget before polishing it up and releasing.

Email me in case this sounds interesting and you would like to stay updated.

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/ [2] http://fitnesse.org/

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.

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".

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.

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

http://knockoutjs.com

The GitHub repo https://github.com/worrydream/Tangle

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.

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.

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

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)

*it being MooTools and this library

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.

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.

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.

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.

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?

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)

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.

Very neat, reminds me of Mathematica Notebooks.

Really nice.

Rediscovering Lisp and Smalltalk interactive environments.

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

Ya, parent is just living in the past.

Parent is an old dog that gets amazed how little HN young kids know about computer history.

Parent really thinks Smalltalk had the capabilities, realized or not, to do the demos that Bret did in Inventing on Principle. Smalltalk and Lisp have never shown the capability, and in fact just can't do it. Time travel was just never a big thing there.

The Smalltalkers do this all the time; I had even Ralph Johnson poo hoo my 2007 live programming talk. But you get the feeling that these people really think nothing new can be invented after the 80s. They say "Smalltalk" already does this! And you say "show me" and then they just shut up.

Well for starts it is a bit hard to get a Xerox system at the shop around the corner.

Second, I mentioned it was a good idea to follow these ideas.

My only point is that they aren't new and many live programming advocates sell them as if they were new.

All the ideas presented in Christopher Hancock's 2003 dissertation on live programming are compared adequately against previous work. There are plenty of advocates out there for anything that don't do their homework and don't bother with related/previous work sections...only academics like us concern ourselves with that.

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

Xerox presentations about Smalltalk-80

http://www.youtube.com/watch?v=JLPiMl8XUKU

http://www.youtube.com/watch?v=Cn4vC80Pv6Q

http://www.youtube.com/watch?v=ODZBL80JPqw

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/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.

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.

You could do that on a Lisp Machine, too. Symbolics sold a complete interactive animation and game development system. Nintendo used it in the early years. The software later got ported.

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

this is inspired! I like it.

Reply on news.ycombinator.com