Discover gists

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

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

	const defaultIfZero = (a, x) => x === 0 ? a : x;
	const isDefined = x => x !== void 0;
	const isUndefined = x => x === void 0;

	const NONE = Symbol('NONE');

	const chalk = require('chalk');
	const val = x => (x === NONE ? (x = 'none', chalk.bold.grey) : chalk.cyan)(String(x));
	let highlightActiveNode = null;
	let highlightedEdges = [];

	'use strict';

	import {Router5, RouteNode} from 'router5';
	import logger from '../logger';

	// The set of valid sink functions includes synchronous state-affecting router functions that do not require a callback
	// and which do not have a significant return value other than the router object itself.
	const validSinkFuncs = ['add','addNode','canActivate','deregisterComponent','navigate','registerComponent','setOption','start','stop'];

	function validateAndRemapSinkArgument(arg) {

	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'