An experiment in reactive literate programming


To make the document accept Ractive there are some (nasty) things you need to do. You’ll have to wrap the entire document in a container div which you’ll have to set to display=none Then you can use that element as the template and target another element (in this case an <article>) which will contain the parsed output.

You can then call Ractive like so:

var ractive = new Ractive({
    el: 'container',
    template: '#template',
    preserveWhitespace: true,
    components: { 'number': NumberInput },
    data: { scale: 7,
            histogram: HistogramVisualizer(faithful, "#histogram")}

Furthermore you’ll need to use the pre-release 0.3.8 builds since the preserveWhitespace option is not adhered to in older versions, making the #+BEGIN_SRC blocks fairly ugly.

Also for MathJax to work you’ll need to hack around the fact that MathJax removes the original element from the DOM. You can work around this by instead of wrapping the LaTeX equation in $$ or \begin{equation}, wrapping them in script tags like so:

<script type="math/tex; mode=display" id="kernel">
a^2 + b^2 = c^2

Notice the id, which is needed to reference the element when we want to update the MathJax output with MathJax.Hub.Queue(["Reprocess", MathJax.Hub, id]). This really nasty so there is a StackOverflow question about this.

Lastly the event management of Ractive did not seem to work, so I used JQuery instead, which was already a dependency for VerdictJS, This is probably a stupid mistake from my side.

But the cool thing is that you can C-c C-v t (tangle) and C-c C-e h h (export to HTML) and you’ll get this document.