Discover gists

Cycle.js approach to handling IO looks similar to how it was done in earlier FRP implementations. That seems to be an independent discovery, and that's always even better.

Yampa provides a function reactimate:

:: IO a	-- ^ IO initialization action
-> (Bool -> IO (DTime, Maybe a)) -- ^ IO input sensing action
-> (Bool -> b -> IO Bool)        -- ^ IO actuaction (output processing) action
-> SF a b	-- ^ Signal function

made with esnextbin

~/code/most/most-subject/perf subject-class* 19s
❯ node ./filter-map-reduce.js
filter -> map -> reduce 1000000 integers
-----------------------------------------------
most         14.20 op/s ±  0.83%   (68 samples)
xstream      21.91 op/s ±  1.90%   (29 samples)
rx 5          4.68 op/s ±  1.12%   (16 samples)
-----------------------------------------------

	function NOOP() {}
	var button = getSomeButtonSomehow();

	// all of these Animation objects are immutable, and just describe the motion
	var moveRight = Animate.positionX({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
	var moveDown = Animate.positionY({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
	var fadeOut = Animate.opacity({ to: 0, ease: Easing.cubicBezier(0,1,1,0), duration: 50 });

	var move = moveRight.with(moveDown, 100); // start moveDown 100ms after moveRight starts
	var reusableAnimation = move.then(fadeOut, -fadeOut.duration); // start fadeOut 50ms before move ends

	// If the ES6 Promise is available, it uses that, else:
	Rx.config.Promise = RSVP.Promise;

	// To promise with success
	Rx.Observable
	.just(42)
	.toPromise(/* Optional Promise ctor like RSVP.Promise */)
	.then(
	result => console.log('Result', result),
	reason => console.log('Reason', reason));

	import { createStore, applyMiddleware } from 'redux';
	import { Observable, Subject } from 'rxjs';

	const api = type => {
	console.log(`calling API ${type}`);
	return new Promise(res => setTimeout(() => res(), 500));
	};

	const actionOrder = (actions, order) => actions.every((action, index) => action.type === order[index]);
	const actionPredicate = actions => filterableAction => actions.some(action => action === filterableAction.type);

	import React from 'react';

	export class Sto extends React.Component{
	static defaultProps = {
	store: x => x
	}
	state = {
	value: this.props.store()
	}
	dispatch = action => this.setState({

	import {run} from '@cycle/xstream-run'
	import {makeDOMDriver, div, input, button, label} from '@cycle/dom'
	import {makeLocalStorageDriver} from 'cyclejs-storage'
	import Collection from '@cycle/collection'
	import xs from 'xstream'
	import debounce from 'xstream/extra/debounce'
	import dropRepeats from 'xstream/extra/dropRepeats'
	import pairwise from 'xstream/extra/pairwise'
	import delay from 'xstream/extra/delay'
	import concat from 'xstream/extra/concat'

	<!doctype html>
	<html>
	<head>
	<script src="shadow-root.js"></script>
	</head>
	<div>
	<div slot="main">
	I'm some projected content.
	</div>
	<shadow-root>