Skip to content

README.md

Latest commit

 

History

History
91 lines (65 loc) · 2.87 KB

README.md

File metadata and controls

91 lines (65 loc) · 2.87 KB

cable.js

An effect system and FRP runtime for JavaScript

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

A simple example would be 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>

What remains is to use cable.js to connect the input to the output via a markdown compiler.

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

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

That's it! 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.

A working example of this previewer can be found in examples/markdown.htm in the repository. Consult the Building section of the readme for help running the example.

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. A tutorial is coming soon.

API

The API is documented in the wiki.

Building

To download and build, you'll need npm and git.

# download:

git clone git@github.com:whatgoodisaroad/cablejs.git
cd cablejs

# install dependencies and build:

npm install
grunt build

# download example dependencies:

cd examples
bower install

Roadmap

  • ☑ Functioning core system.
  • ☑ Builds and runs in strict mode.
  • ☑ Functioning examples.
  • ☑ Functioning cyclic dependency graphs.
  • ☑ Module loader is AMD compliant.
  • ☑ Write API docs.
  • ☑ Streamline event definition syntax.
  • ☑ Enable subdefinition syntax for library-dependnat nodes
  • ☑ Alias support.
  • ☑ Write unit tests.
  • ☐ Write more unit tests.
  • ☐ Write tutorial.
  • ☐ Implement tools for debugging the dependency graph (via Cable._debug()).
  • ☐ Make the dependency graph more plastic (i.e. reconfigurable).
  • ☐ Add history sensitivity decorations.