Denis Stoyanov xgrommx

How to make a Cycle.js + Elm hybrid Etch-a-Sketch app

A couple of days ago, I wrote a Cycle.js app using Elm to render stuff to the page. This was pretty fun and got some attention, so I might as well write about it some.

Writing this thing

Overview

A Cycle.js application consists of three parts: your main function declaration, your drivers setup, and your application initialization with Cycle.run (which sets up the "Cycle" part of your application). We'll do the following in our app:

#RxJS 5 Operators By Example A (soon to be) complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

(I will be adding one operator per day until all operators are included.)

	var Ix = require('ix'),
	Rx = require('rx'),
	Enumerable = Ix.Enumerable,
	Enumerator = Ix.Enumerator,
	Observable = Rx.Observable;

	Observable.permute = function(root, hasPermutation, resultSelector) {
	return Observable
	.returnValue({ value: root, depth: -1 })
	.expandRecursive(function(wrapper) {

	//Some fantasy implementations
	const Just = require('./just')
	const Cant = require('./cant')
	const List = require('./list')

	//Spec file that defines what arguments are used for type identification
	const fantasy = require('./fantasy')

	//The magic.
	const {chain, map, index} = require('../../src/xface')(fantasy, [Just, Cant])

	const now = moment();
	const end = now.clone().add(2, 'minutes');
	const diff = (end - now) / 1000;

	const tick$ = Rx.Observable.timer(0,1000)
	.scan((acc) => {
	return acc - 1;
	}, diff)
	.take(diff);

	function Signal(sub) {
	this.sub = sub;
	}

	Signal.prototype = {
	/**
	* Applies the given function over each event.
	*/
	map: function(fn) {
	var sub = this.sub;

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	font-family: Sans-serif;

	module Main where

	import Control.Applicative
	import Data.Monoid
	import Data.Traversable
	import Data.Foldable

	-- Say I define a Binary Tree data structure

	data Tree a = Empty \| Leaf a \| Node (Tree a) a (Tree a)

	class Future {
	constructor(computation) {
	this.fork = computation
	this.__future__ = true;
	}
	static is(val) {
	return (val != null && val.__future__ === true)
	}
	static of(value) {
	if (Future.is(value)) return value;

Denis Stoyanov xgrommx

How to make a Cycle.js + Elm hybrid Etch-a-Sketch app

Writing this thing

Overview

Table of Contents