Git Product home page Git Product logo

most's Introduction

Build Status

Monadic streams for reactive programming

Join the chat at https://gitter.im/cujojs/most

Most.js is a toolkit for reactive programming. It helps you compose asynchronous operations on streams of values and events, e.g. WebSocket messages, DOM events, etc, and on time-varying values, e.g. the "current value" of an <input>, without many of the hazards of side effects and mutable shared state.

It features an ultra-high performance, low overhead architecture, APIs for easily creating event streams from existing sources, like DOM events, and a small but powerful set of operations for merging, filtering, transforming, and reducing event streams and time-varying values.

Learn more

Simple example

Here's a simple program that displays the result of adding two inputs. The result is reactive and updates whenever either input changes.

First, the HTML fragment for the inputs and a place to display the live result:

<form>
	<input class="x"> + <input class="y"> = <span class="result"></span>
</form>

Using most.js to make it reactive:

var most = require('most');

var xInput = document.querySelector('input.x');
var yInput = document.querySelector('input.y');
var resultNode = document.querySelector('.result');

exports.main = function() {
	// x represents the current value of xInput
	var x = most.fromEvent('input', xInput).map(toNumber);

	// y represents the current value of yInput
	var y = most.fromEvent('input', yInput).map(toNumber);

	// result is the live current value of adding x and y
	var result = most.combine(add, x, y);

	// Observe the result value by rendering it to the resultNode
	result.observe(renderResult);
};

function add(x, y) {
	return x + y;
}

function toNumber(e) {
	return Number(e.target.value);
}

function renderResult(result) {
	resultNode.textContent = result;
}

More examples

To run the example above and others using RaveJS: clone the repo into a web servable dir, cd examples/<name> && bower install, and load index.html in your browser.

Get it

As a module:

npm install --save most` or `bower install --save most
var most = require('most');

As window.most:

bower install --save most`
<script src="most/dist/most.js"></script>

Interoperability

Promises/A+ Fantasy Land

Most.js streams are compatible with Promises/A+ and ES6 Promises. They also implement Fantasy Land Monoid, Functor, Applicative, and Monad.

Reactive Programming

Reactive programming is an important concept that provides a lot of advantages: it naturally handles asynchrony and provides a model for dealing with complex data and time flow while also lessening the need to resort to shared mutable state. It has many applications: interactive UIs and animation, client-server communication, robotics, IoT, sensor networks, etc.

Why most.js for Reactive Programming?

High performance

A primary focus of most.js is performance. The perf test results indicate that it is achieving its goals in this area. Our hope is that by publishing those numbers, and showing what is possible, other libs will improve as well.

Modular architecture

Most.js is highly modularized. It's internal Stream/Source/Sink architecture and APIs are simple, concise, and well defined. Combinators are implemented entirely in terms of that API, and don't need to use any private details. This makes it easy to implement new combinators externally (ie in contrib repos, for example) while also guaranteeing they can still be high performance.

Simplicity

Aside from making combinators less "obviously correct", complexity can also lead to performace and maintainability issues. We felt a simple implementation would lead to a more stable and performant lib overall.

Integration

Most.js integrates with language features, such as promises, iterators, generators, and asynchronous generators.

Promises

Promises are a natural compliment to asynchronous reactive streams. The relationship between synchronous "sequence" and "value" is clear, and the asynchronous analogue needs to be clear, too. By taking the notion of a sequence and a value and lifting them into the asynchronous world, it seems clear that reducing an asynchronous sequence should produce a promise. Hence, most.js uses promises when a single value is the natural synchronous analogue.

Most.js interoperates seamlessly with ES6 and Promises/A+ promises. For example, reducing a stream returns a promise for the final result:

// After 4 seconds, logs 10
most.from([1, 2, 3, 4])
	.delay(1000)
	.reduce(function(result, y) {
		return result + y;
	}, 0)
	.then(function(result) {
		console.log(result);
	});

You can also create a stream from a promise:

// Logs "hello"
most.fromPromise(Promise.resolve('hello'))
	.observe(function(message) {
		console.log(message);
	});

Generators

Conceptually, generators allow you to write a function that acts like an iterable sequence. Generators support the standard ES6 Iterator interface, so they can be iterated over using ES6 standard for of or the iterator's next() API.

Most.js interoperates with ES6 generators and iterators. For example, you can create an event stream from any ES6 iterable:

function* allTheIntegers() {
	let i=0;
	while(true) {
		yield i++;
	}
}

// Log the first 100 integers
most.from(allTheIntegers())
	.take(100)
	.observe(x => console.log(x));

Asynchronous Generators

You can also create an event stream from an asynchronous generator, a generator that yields promises:

function* allTheIntegers(interval) {
	let i=0;
	while(true) {
		yield delayPromise(interval, i++);
	}
}

function delayPromise(ms, value) {
	return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

// Log the first 100 integers, at 1 second intervals
most.generate(allTheIntegers, 1000)
	.take(100)
	.observe(x => console.log(x));

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.