What is cable.js?

cable.js is an Functional Reactive Programming (FRP) runtime, an event system, and module loader all unified under a common syntax.

Every piece of code depends on something, whether it's data, an event being triggered or a library. cable.js is a way of making these dependencies explicit and structuring your code around them. The result is a cleaner code structure that can easily handle constantly changing information and interaction.

Example

Let's build a markdown previewer. We'd like a page where one can write markdown code and have a live-updating preview of the resulting HTML. So, we write some elements for the input and the output:

<textarea id="input"></textarea>
<div id="output"></div>

Now use cable.js to connect the input to the output via a markdown compiler. We define some libraries that we'll use and the text-area, and write a function that connects them together by declaring argument names that match those resources.

Cable.define({
  $:Cable.library("jquery.min.js"),
  marked:Cable.library("marked.js"),

  source:Cable.textbox("#input"),
  dest:function($, marked, source) {
    $("#output").html(marked(source()));
  }
});

This is all the code needed to have a live updating preview. It's vanilla JavaScript running in strict mode: no fake pseudo-JS syntax that needs to be pre-processed. No magic markup tags.

Onward

Cable can do much more. There are a number of different kinds of nodes which can be added to the graph, including different kinds of events, data-sources, synthetic-data-sources, effects, libraries and cable-modules. Consult the examples and API document for more.

• Examples
• Tutorial
• API Documentation