antonycourtney

A realistic RxJS app with diamond wiring

Consider the following user interface (inspired by Strava) for looking at time-series charts of network data:

Notes on this interface and my Rx implementation of it:

• Each chart (stacked vertically) charts a different metric (latency, packet loss and throughput) but over the same time period.
• As the user moves the mouse left and right on any chart, the vertical line (called the tracker) moves to track the mouse position on all charts. The number displayed in the gray box on the right is the value underneath the tracker for that metric.

ohanhi

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components, meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views

kpuputti

/*eslint-env es6 */

// Inspired by the paper "A tutorial on the universality and
// expressiveness of fold" by Graham Hutton (available at
// http://www.cs.nott.ac.uk/~gmh/fold.pdf), implementing some generic
// list handling functions in JavaScript in terms of `fold`.

// Personally I had an enlightnening moment when I realised the
// beautiful interplay of cons lists and foldr during the FP101x
// Haskell course. JavaScript's syntax doesn't make this very apparent

axefrog

function runInScope(main, sources, context, ...args) {
  if(!main) {
    throw new Error('A "main" function must be supplied, which will be called in scope and from which a (sinks) object will be returned');
  }
  if(!sources) {
    throw new Error('A source drivers object must be supplied, to which scoping can be applied');
  }
  if(!context) {
    throw new Error('A scope context object must be supplied, either as a string, or as an object of key/value pairs');
  }

axefrog

'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) {

ohanhi

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

dom$.js

import Cycle from 'cyclejs';

const { h, Rx } = Cycle;

// all html/svg element names <<
var elements = [
  'a',
  'abbr',
  'address',
  'area',

eplawless

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

mattpodwysocki

// 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));

zudov

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